Galeria de imagens dinâmica estilo eventos com PHP, JCarousel e SexyLightbox

Galeria de imagens dinâmica estilo eventos com PHP, JCarousel e SexyLightbox

24/06/2010 | POR Davi Assis | 62 Comentários | 23.832 VISITAS

Saudações meus queridos estou aqui pata publicar mais uma Super VA do amigo DAVI ASSIS. Nesta aula ele mostrará a comunidade UP como criar uma galeria de eventos ou exposição.

Galeria esta muito usada em sites festivos e tudo mais. Utilizado na aula os plugins jcarousel e SexyLightbox e nosso querido jQuery, e o mais interessante é que é uma aula completa com a galeria já dinâmica em.

E como o DAVI mesmo fala, aquele forte abraço e até a próxima! :)

DADOS DO AUTOR:
Nome: Davi Assis
Site: www.classificautos.com.br

Arquivos: LINK
Scrips: LINK

62 respostas para “Galeria de imagens dinâmica estilo eventos com PHP, JCarousel e SexyLightbox” deixe a sua!
  • Davi Assis Em: 24 de junho de 2010 as 12:35

    Pessoal, esqueci de deixar o site do SexyLightbox :(
    http://www.coders.me/web-html-js-css/javascript/sexy-lightbox-2

    Confiram o site, tem alguns feitos bem lgls ;)

  • Robson V. Leite Em: 24 de junho de 2010 as 13:11

    Best UP

  • Alex.L Em: 24 de junho de 2010 as 14:05

    Olá Davi. Otima Video aula. bom. n sei oke eu fiz errado mais revi a video aula 4 vezes e naum consegui faze funcionar o Sexylightbox. uma duvida. meu site é em ajax. os links são configurados como -> exe :( onclick=’load(‘a,’a')” ) . tem algum poblema? c eu incorporo a cahamda do script na index.php ele da erro no site. desalinha todo o css. e c eu ponho na pagina q vou usar. ele n funciona e abre a imagem inteira normalmente. Tem uma sugestão do ke devo fazer?

  • Robson Rafael Em: 24 de junho de 2010 as 14:41

    Vídeo aula bem legal.
    Parabéns!

  • Davi Assis Em: 24 de junho de 2010 as 15:07

    @Alex: Bom cara quanto ao uso de ajax, sinceramnete eu num majo, nem imagino oq esta acontecendo, soory :(

    Mas quando da o erro de abrir a imagem inteira, é porque o sexylig… não esta condifurado certo, ele não esta consegindo puxar os plugins.

    Faça o seguinte, crie uma pasta no seu servidor, e refaça la, e veja se d erro, configure e teste.

    Qualquer coisa to no chat da UP: (add no msn)
    group1169004@groupsim.com

  • João vitor p. sousa Em: 24 de junho de 2010 as 19:45

    Best Up ²

  • Matheus Silva Em: 24 de junho de 2010 as 19:53

    Best Up ³

  • Italo Izaac Em: 24 de junho de 2010 as 20:00

    Muito Lgl !! UP

  • Reginaldo Santana Em: 25 de junho de 2010 as 8:47

    @Davi Assis meu amigo um Best Up pra você show a vídeo aula… Parabéns!!!

  • leonardo Em: 25 de junho de 2010 as 10:01

    som ficou pouquinho baixo, mais a VA ficou show, parabens!!! muito bom

  • Matheus Silva Em: 25 de junho de 2010 as 10:19

    @Alex.L
    nao sei se vai dar certo mas, como seu site tem esses negocios de onclick=”load…..” tente colocar em uma funçao o script do davi e chame do mesmo jeito.
    ex:
    function davi(){
    faz as coisas…
    }

    e bota no onclick=”davi”>

    nao sei se da certo…tente ai =D

  • Alex.L Em: 25 de junho de 2010 as 12:32

    @Matheus Silva, bom não entendi muito oque você quiz diser. mais c poder me passa seu msn ou algo assim pra min poder falar com você seria melhor. Obrigado.

  • Carlos Eduardo Em: 25 de junho de 2010 as 15:56

    Olá Davi Assis, muito boa sua video aula, porém no exemplo em que eu fiz e tambem pelo que pude perceber no seu exemplo está igual. O que acontece é que toda vez que clico na imagem maior que que abre o efeito, sempre carrega a primeira imagem da lista. Teria como aparecer no efeito a imagem no qual está sendo clicada. Obrigado pela atenção.

  • Davi Assis Em: 25 de junho de 2010 as 19:06

    @Carlos Eduardo: Salve amigo,

    bom para resolver isso é só passarpara o link a imagem.

    Dentro do Java, onde vc passa a imagem coloque o seguinte:

    $(“.widget .mid a”).attr(“href”, $(this).attr(“src”));

    Ou seja, deve ficar assim:

    <script type="text/javascript" src="js/jcarousel.js" /></script>
    <script type="text/javascript">
    $(function(){
       $(".widget .carosel").jCarouselLite({
         btnNext: ".next",
         btnPrev: ".prev",
         visible: 3,
         speed: 500
       })
       
       $(".widget img").click(function() {
        $(".widget .mid img").attr("src", $(this).attr("src"));
    	$(".widget .mid a").attr("href", $(this).attr("src"));	
    })
    
    })
    </script>
  • Matheus Silva Em: 25 de junho de 2010 as 21:49

    @davi como tu coloco essa estrutura no codigo?? =D
    esse negocio semelhante ao do robson??

  • Davi Assis Em: 26 de junho de 2010 as 2:39

    @ Matheus, descupl num tendi a pergunta =/

  • Matheus Silva Em: 26 de junho de 2010 as 13:48

    como tu fez para colocar o codigo igual o robson botaq, com o fundo branco, coma a numeraçao da linha etc.

  • Luciano Júnior Em: 26 de junho de 2010 as 18:13

    @Matheus Silva: Ele colocou o codigo no nosso forum de suporte, e, tambem da certo nos comments ai h so colocar entre as tags:
    [ c o d e ] [ / c o d e] sem os espaços:

    exemplo
  • Davi Assis Em: 26 de junho de 2010 as 22:21

    UP²

  • Matheus Silva Em: 26 de junho de 2010 as 22:44
    rsrsrrs

    vlw ai

  • Marcos Em: 28 de junho de 2010 as 13:39

    Olá Davi Assis assisti seu video é bem legal mais agora vi que contem um erro primario, vc não mostro como fazer o sistema de cadastramaneto de imagens no banco de dados, espero que você corrija esse erro.

  • Luciano Júnior Em: 28 de junho de 2010 as 17:30

    @Marcos: Isso não pode ser considerado um erro pois ele não informou que iria fazer o sistema, até porque já temos mais de 1 VA de upload de imagens.

  • Davi Assis Em: 28 de junho de 2010 as 19:12

    @Marcos: Salve amigo, então, eu realmente não ensinei esta parte, como o @Luciano disse, já temos VA sobre isso.
    A intenção da VA era mostrar como interagir os plug-inss em uma galeria de imagens dinâmica, assim como eu também não expliquei sobre o Jcarousel.
    Caso tenha alguma dúvida de como cadastrar as imagens no banco, crie um post lá no fórum que eu te ajudo com o maior prazer amigo.
    Aquele forte abraço a todos!!!

  • Davi Asiss Em: 8 de julho de 2010 as 15:27

    Eita, 1001 visitas em 2 semanas =D

  • Paulo Em: 14 de julho de 2010 as 3:25

    Cara achei super interresante sua galeria mas não consigo fazer ela pegar o id da pasta e listar o arquivo pode me ajudar

  • Paulo Em: 14 de julho de 2010 as 3:27

    exemplo imagens/teste/$dados[pasta]/

  • neodentrodamatrix Em: 14 de julho de 2010 as 20:26

    ola Davi..poderia me dar um help?

    link:

    http://www.upinside.com.br/forum/viewtopic.php?f=3&t=78

    abraços

  • Davi Assis Em: 16 de julho de 2010 as 1:13

    @neodentrodamatrix: estou dando uma olhada, amanha eu ja te de uma resposta ^^

    @Paulo: não entendi direito qual é a sua necessidade, cria um tópico no fórum e explica melhor, ou podemos conversar pelo chat ^^

    Aquele forte abraço a todosss… e essa semana estou de volta a todo vapor pessoal!!!

  • stevan Em: 11 de setembro de 2010 as 7:31

    meu tenho um problema, não sei se dá pra me ajudar, assim como o site que você mostra o de classificado, o meu site puxa as imagens de um banco, mas algumas vezes o numero de imagens é menor q 4 (o limite que estipulei para aparecerem ) como faço para tirar nesse caso os botões de next e prev ?? valew pela ajuda.

  • Felipe Prado Em: 13 de outubro de 2010 as 14:21

    Parabéns. As duas VA sobre JCarousel me ajudaram bastante. Até então não conhecia o site e com certeza vou virar visitante assíduo.

  • jackson Em: 19 de outubro de 2010 as 10:55

    Parabens Davi .. excelente video aula…. minha duvida em relação a esse exemplo ficou em como mostrar a descrição da foto puxando do bd .. pois eu consigo exibi-la(a descrição), mas não consigo fazer mudar de acordo com a imagem, vc poderia me ajudar ?
    Agradeço sua atenção.

  • Rodrigo Em: 27 de novembro de 2010 as 22:08

    Oi, Davi!

    Parabéns pela aula!!

    Você utiliza arquivos específicos nesta aula! Poderia indicar uma aula específica sobre upload de imagens pra eu poder utilizar nesta aula?

    Obrigado!

  • Robson V. Leite Em: 28 de novembro de 2010 as 12:37

    @Rodrigo: Se não me engano está em uma das 3 primeiras aulas dos Exercícios!

  • Rodrigo Em: 13 de dezembro de 2010 as 9:55

    Olá Davi. parabéns pela ótima aula.

    Estou com uma dificuldade e não estou encontrando a solução, fiz um projeto bem parecido com o do exemplo da aula, a diferença é que não esteou usando banco de dados, mas sim uma listagem de imagens de uma pasta, esta tudo ok, também uso o efeito carrosel, que também está funcionando belezinha, não uso a imagem média, mas apliquei o efeito sexylightbox, esté não funciona de geito nenhum junto com o carrosel, funciona apenas o segundo script da pagina, se o carrosel estiver por segundo é ele que funciona, se o sexy lightbox estiber por segundo funciona, mas os dois não. Não consegui encontrar solução para isso.
    Se puder me ajudar, agradeço muito.
    Abraço

  • Davi Assis Em: 17 de dezembro de 2010 as 3:29

    @*, obrigado pessoal pelo apoio, pretendo voltar em pouco tempo.

    @Rodrigo, Boa noite amigo, bom isso pode estar acontecendo pq vc deve estar usando o LightBox com biblioteca jQuery, não sei porque, mas alguns LightBox jQuery dão erro se usados juntos com outro efeitos em jQuery. Para isso use um LightBox com bibloteca Mootools.
    Agora caso esse não seja o problema, posta la no fórum, que eu te ajudo. :D

    Aquele velho e conhecido abraço a todos!!!

  • Alessandro Em: 25 de dezembro de 2010 as 18:32

    Olá, gostária de saber se é possível colocar um efeito de transição na imagem média quando clica na imagem do carousel, como um fade in, fade out por ex, ou algum outro efeito da própria biblioteca do jquery

    Vlw!

  • Sérgio Em: 3 de janeiro de 2011 as 12:07

    Pessoal:

    Tentei com o shadowbox e com o SexyLightBox.
    No caso do Shadowbox, acabo tendo um erro de contagem das imagens e sempre mostra a primeira imagem.
    No caso do SexyLightBox, se você clicar em uma da imagens do carousel que não seja a primeira, não aparece a opção “previous” (anterior), para ver as imagens anteriores.
    Os links para os exemplos são:

    http://www.ssaguiar.com/va/index.php – para o shadowbox
    http://www.ssaguiar.com/va/index_.php – para o SexyLightBox

    Alguém pode me dar uma ajuda?

    Agradeço.

  • Weikmam Joel Em: 20 de abril de 2011 as 2:04

    Opah Amigo, conheci o seu site a pouco tempo, tenho seguido umas videos aulas, e tenho axando mto bom, gostei mto, agora queria uma ecrementacao, tipo, pq no site em q estou desemvolvendo, eu nao quero abrir a imagem no lightbox, entao fiz igual a video aula q vc indica no inicio desse tutor, ai peguei dessa aula somente ate a parte q vc comeca cm o lightbox, entao tah funcionando meu carosel e qnd clico em das imagens, ele muda o src e manda pra imagem media, td igual vc explicou, mas queria por mais dois botoes para eu poder passar as imagens uma a uma, pela imagem media, e q se fosse possivel tbm, qnd eu ir passar, tipo, eu tenho 3 imagens sendo exibida no meu carrosel, tw na primeira, se eu deh 4 clicks no meu botao q avanca a imagen media, automaticamente o carrosel passa, igual acontece no orkut, obrigado!!! t+! vcs sao 10

  • Weikmam Joel Em: 20 de abril de 2011 as 2:08

    e como vw usar somente a imagem media cm o carosel, sem o lightbox, poderia me falar uma forma deu criar um pequeno load enquanto a imagem media carrega? obrigado!!!!

  • Lucas Maestro Em: 3 de julho de 2011 as 13:20

    Davi muito legal a VA, porem não estou conseguindo baixar os arquivos. teria como verificar?? no aguardo obrigado, parabens.

  • alex Em: 2 de agosto de 2011 as 22:32

    to tentando biaxar os arquivos, mas esta off!

  • Gerde Santos Farias Em: 10 de agosto de 2011 as 16:34

    Não consigo baixar os arquivos esta off =/

  • Marcos Em: 31 de agosto de 2011 as 16:15

    Fala Davi, blz?

    Você fez alguma alteração no css? Porque eu fiz como na video aula e não ta funcionando. Se puder agradecer, eu agradeço.

    Té mais. Abraços

  • Marcos Em: 31 de agosto de 2011 as 16:17

    *Se puder responder..

  • Marcos Em: 2 de setembro de 2011 as 0:36

    Já consegui resolver o problema.

    té mais.

  • Felipe Vieira Vendramini Em: 5 de setembro de 2011 as 9:33

    Salve, primeiramente :D vo agradecer neah xD
    porque muito do que sei, uns 70% do que sei de PHP e webdesign aprendi aqui (:
    mais eu gostaria de saber,
    se da pra fazer sem os arquivos?
    Porque nao esta dando para baixar (:
    Brigadãao e parabens pelo site

  • Anderson Em: 9 de setembro de 2011 as 16:05

    Olá,

    Os Links para baixar o código estão quebrados.

  • Luis Fernando Em: 1 de dezembro de 2011 as 15:35

    Olá Robson! Primeiro quero parabeniza-lo pelas vídeos aulas postadas que ajudam e ensinam muito nós desenvolvedores. No caso desta vídeo aula, os dois links (Arquivos: LINK e Scrips: LINK) estão fora do ar. Poderia por gentileza subir esses dois links para que possamos baixar!
    Desde já muito obrigado.

  • by_dylo Em: 6 de dezembro de 2011 as 8:33

    Davi preciso do codigo fonte amigo nao consigo falar com o vc

  • Anderson Felipe Em: 10 de dezembro de 2011 as 23:40

    eu queria saber se da para vc encinar e outro forma, é assim: quando a pessoa clicase no botão prev ou next trocase a src da imagem de cima, seria uma forma mas dinamica, obrigado!

  • Anderson Felipe Em: 10 de dezembro de 2011 as 23:43

    eu queria saber se tem como fazer esse video de uma outra forma, é assim quando o internalta clicase no botão prev a imagem que iria aparecer rm cima é a imagem anterior a que tava, e quando clicase em next apareceria a proxima imagem da que estava aparecendo!
    Obrigado!

  • Andre luiz zaramelo Em: 2 de janeiro de 2012 as 23:04

    poderia fazer uma video aula igual a essa sem banco de dados? pois no video indicado pelo nosso amigo sobre jcarousel, as imagens ficam em pastas

  • denis Em: 18 de janeiro de 2012 as 17:43

    como eu faço para adicionar uma classe a miniatura ativa do jcarousel lite para poder diferenciar ela das outras?

  • Roberto Em: 28 de janeiro de 2012 as 15:10

    Os links estão todos quebrados, poderia coloca-los novamente Robson ou Atualiza-los desde já agradecemos.

  • Daniel Em: 8 de fevereiro de 2012 as 12:33

    Olá Robson, antes de tudo quero parabenizar toda equipe upinside pelo trabalho realizado, pois é de grande valor para nós que buscamos conteúdo e informações que realmente possam ser úteis, para todos. Parabens!

    Nesta video aula, gostaria dos arquivos, mas os links estão quebrados! Fiz conforme vc explicou, mas ocorre alguma diferença pois minha imgs não “pegam” os atributos e ficam sem o efeito carosel. Se possivel, aguardo uma ajuda! Obrigado.

  • Osmair Coelhod Em: 14 de fevereiro de 2012 as 11:12

    Os links estão fora do ar, quero fazer download dos arquivos alguém tem?

  • Claudio Macena Em: 22 de fevereiro de 2012 as 23:05

    Parabéns, Davi pela V. A, então preciso saber de um coisa tenho que comprar, o plugin do sexylightbox? através do link http://www.coders.me/web-html-js-css/javascript/sexy-lightbox-2, que disponibilizou? Só existe este meio para conseguir os arquivos? A V.A é muito boa mas sem os arquivos é como ir na praia e não ter o sol, por favor disponibiliza aê to precisando, abraços a todos!

  • Claudio Macena Em: 23 de fevereiro de 2012 as 12:29

    Ótima video aula , porem uma dúvida o plugin do sexlightbox no site do link http://www.coders.me/web-html-js-css/javascript/sexy-lightbox-2 que o Davi deixou tem que pagar? Alguem tem o link dos arquivos, para disponibilizar?

  • sergio Em: 26 de fevereiro de 2012 as 23:32

    os linkls de downloads estão off :S nao poderia colocar novamente

  • osm Em: 7 de agosto de 2012 as 17:33

    muito boa a video aula eu consegui fazer o carrosel com o robson mas nao consegui fazer
    o carosel de imagens dinamica pois o arquivo index nao da pra baixar mais nao esta mais disponivel no link
    eu quero aprender a fazer esta conexao,ok? obrigado

  • lea Em: 19 de outubro de 2012 as 12:18

    Oi Davi, otima V. aula, tenho uma duvida, que tipo de campo é “imagem” no banco de dados, se é BLOB ou varchar (255)
    Obrigada

  • Luis Nelson Em: 2 de fevereiro de 2013 as 18:38

    Parabéns pela aula mais por favor, corrija os links dos downloads. Abraços

Deixe seu comentário!