Galeria de Fotos LightBox

Esse Post foi movido para :

http://clares.com.br/2008/02/28/galeria-de-fotos-com-o-lightbox/

Desculpe pelo transtorno, aproveite para assinar o novo blog.

Marcado:, ,

121 pensamentos sobre “Galeria de Fotos LightBox

  1. Junior maio 14, 2008 às 4:44 pm

    Ficou show de bola, funcionou certinho!!
    Parabens pelo Blog. Continue assim.

  2. rafael agosto 28, 2008 às 2:46 pm

    Muito bom o tutorial e a galeria realmente e muito bacana … o efeito e show de bola ! Valeu, parabens!

  3. Thor setembro 10, 2008 às 2:14 pm

    Gostaria de ver tutoriais ensinando a utilizar FrogJS Javascript Gallery e jqGalScroll. Grato!

  4. Rafael Clares setembro 10, 2008 às 2:52 pm

    Thor, dê uma olhada ai:
    http://www.puidokas.com/portfolio/frogjs/

    abraços.

  5. thiago dezembro 2, 2008 às 1:21 pm

    parabens !!

    Muito bom o tutorial e a galeria realmente fico nota 10.

  6. Johnatan dezembro 12, 2008 às 2:42 pm

    cra muito simples mesmo , tava precisando estudar este tipo de codigo css , muito bacana , valeu ….

  7. EDSON FERNANDES janeiro 15, 2009 às 1:38 am

    olá, sou novato na área e gostaria de saber se tem como mudar o tamanho da miniatura e se tem jeito de colocar uma string contendo a descrição da imagem.
    Desde já deixo meus agradecimentos.

    • Rafael Clares janeiro 15, 2009 às 2:37 am

      Ola Edson,
      tem como colocar sim, para colocar a descrição da imagem basta adicionar o atributo title na tag, veja:

      <a href="images/image-1.jpg" rel="lightbox[roadtrip]" title="descricao foto">

      Quanto ao tamanho você pode mudar no CSS onde a classe .thumb mantem as dimensoes da miniatura, veja:

      Na classe .thumb do arquivo galeria.CSS

      width:120px; // altere aqui a largura
      height:100px; // e altere aqui a altura

      Abraços,

  8. arimoral janeiro 22, 2009 às 3:39 am

    Ei moral, como faz pra colocar mais fotos
    Galeria de Fotos com o LightBox eu tenho que auterar todavia o index???…dá adica aí moral, parabens pelo site muito bom mesmo

  9. Róger Klein fevereiro 10, 2009 às 1:28 pm

    Muito boa a explicação, até eu que não sei quase nada de html, php, css… consegui fazer funcionar…
    muito boa mesmo….
    vlwwww

  10. Róger Klein fevereiro 10, 2009 às 3:44 pm

    Eu tenho uma perguntinha….
    talves tenha um tuto sobre a minha questão…
    eu procurei e não achei…
    mas, a questão é a seguinte…
    Eu tenho várias fotos para colocar em um site, mas algumas fotos estão com as dimensões diferentes umas das outras, então eu gostaria de saber como posso redimensionar os thumbs uma a uma, pra não ficar fotos espichadas…
    att.

    • Rafael Clares fevereiro 10, 2009 às 4:35 pm

      Olá Róger, você pode trocar o tamanho fixo das thumbs por percentual, você pode usar por exemplo, thumbs de 30% das dimensões originais da imagem, dessa forma você terá miniaturas com tamanhos personalizados automáticamente. Até logo,

  11. Róger Klein fevereiro 10, 2009 às 4:41 pm

    Cara… valeu pela dica… deu certinho como eu queria…
    Muito bom o seu site ai…. to aprendendo muito com vc…
    abrçs
    flws…..

    • Rafael Clares fevereiro 10, 2009 às 4:44 pm

      Róger, que bom cara!
      Obrigado pelo comentário,
      abraços

  12. Róger Klein fevereiro 17, 2009 às 11:22 pm

    Surgiu outra dúvida….
    Como posso fazer pra colocar fotos em outra coluna do site??

    • Rafael Clares fevereiro 18, 2009 às 3:51 pm

      Olá Roger, desculpe minha falta de interpretação mas não entendi muito bem o que quer fazer!
      Se for criar um unico sistema para colocar fotos por categoria em diferentes áreas do site, você pode
      criar outros diretórios para o upload e no momento do upload informar para qual pasta vai a foto, vc pode por ex. adicionar ao form de envio uma lista combo com o nome de cada diretorio/categoria…..
      Espero que seja isso que quer fazer….hahahaha
      se não for me explica melhor aí…
      abraços,

  13. Róger Klein fevereiro 18, 2009 às 4:54 pm

    Bom… não é bem isso, eu me expressei mal…. eu quero fazer o alinhamento das fotos na página, e não estava conseguindo, mas agora consegui atras do comando hspace e vspace, acho q não é a melhor maneira de se fazer o alinhamento das fotos, mas foi a única forma que encontrei… gostaria que me desse alguma dica quanto a isso… vlw pela atenção…
    abrçs

  14. Paulo fevereiro 22, 2009 às 2:15 am

    Parabéns pelo Tutorial Rafael,
    Queria tirar uma dúvida contigo:
    Gostaria de usar o efeito em fotos que já estão no diretório do site, consegui implantar, mais só reconheceu 9 fotos e não criou as miniaturas, voce teria uma dica pra me passar?

    • Rafael Clares fevereiro 26, 2009 às 3:55 pm

      Olá Paulo, amigo você pode me enviar zipado sua galeria (nao precisa ser todas as fotos) dai vejo pra vc,
      pq não vi ainda isso, então me manda ae rafadinix@gmail.com, dependendo do que for já te mando de volta funcionando..
      Obrigado pelo comentário,
      abraços

  15. valois março 9, 2009 às 5:49 pm

    olá, o seu site é muito bom…

    tem como mudar o tamanho que a foto será exibida?

  16. Rafael abril 28, 2009 às 1:40 pm

    Bom dia chará :P
    estou com uma dúvida quando chamamos as imagens em minuatura no css elas são carregadas com o tamanho de bits real ou com o tamanho de uma miniatura?

  17. Bruno maio 8, 2009 às 6:12 pm

    Grande amigo, perfeito trabalho,
    porém as miniaturas precisam estar dentro de um php? abraços

    • Rafael Clares maio 8, 2009 às 6:18 pm

      Olá Bruno,
      não precisa chamar as miniaturas dentro de uma página PHP!
      obrigado pelo comentário.
      abraços

      • Bruno maio 8, 2009 às 6:30 pm

        Sério mesmo amigo? entao posso dar sequencia na galeria sem me preocupar com php?

      • Rafael Clares maio 8, 2009 às 6:38 pm

        Bruno,
        isso mesmo!

      • Bruno maio 8, 2009 às 7:29 pm

        Amigo me perdoa a ignorancia, mas o certo é criar os thumb manualmente quando nao utiliza o arquivo php? obrigado

      • Rafael Clares maio 8, 2009 às 8:03 pm

        Sim,
        se não vai utilizar o arquivo thumbs.php para gerar a miniatura, então deverá criar as miniaturas ou definir a largura e altura dentro da TAG IMG (width e Height). Abraços

  18. Bruno maio 8, 2009 às 10:03 pm

    Grande Rafel Consegui fazer galeria, mais uma vez obrigado por seu serviços de compartilhar ideias e etc, a unica coisa que nao ficou legal, foi que nao aparece o button para avançar ou voltar… tem ideia onde eu possa verificar onde eu possa ter errado? grande abraco!

    • Rafael Clares maio 13, 2009 às 6:55 pm

      Ae Brunao, dá uma olhada no CSS se está apontando para o local certo e se as imagens estão realmente lá….estranho isso ae hein …só você reclamou disso até agora… boa sorte!!!

  19. weverton o. Reis junho 4, 2009 às 6:32 am

    tem como eu abrir no lugar da imagem um formulario exemplo ou uma parte de uma pagina tipo frameset?

  20. Renato Vitor setembro 23, 2009 às 2:25 pm

    bom dia, cara não consegui baixar o “Tudo pronto que você deixou para download.

    • Rafael Clares setembro 23, 2009 às 2:52 pm

      Renato, sei que vai parecer uma resposta padrão mas … “Comigo funcionou”

      Acabei de testar o download e baixei o arquivo no mesmo link que aparece “tudo pronto” rs rs

      até

  21. Renato Vitor setembro 24, 2009 às 1:16 pm

    bom dia….cara deu certo a galeria…mas as imagens thumbs ficaram distorcidas….tem alguma dica

    • Rafael Clares setembro 24, 2009 às 1:19 pm

      Renato, tenho sim …
      Mas me diga, quais dimensões originais da imagem e para quais dimensões está mudando?
      Você alterou algo no arquivo .php ?
      No aguardo,
      abs

      • Renato Vitor setembro 24, 2009 às 1:30 pm

        Rafael,

        A imagem que irá abrir com o efeito lightbox é de 300×300 pixels e a miniatura é de 100×100 pixels

        No aguardo…abraços

      • Rafael Clares setembro 24, 2009 às 1:42 pm

        Renato, compacta seu exemplo e me envia em: rafadinix@gmail.com.
        flw

      • Renato Vitor setembro 24, 2009 às 1:52 pm

        ta ok….vou lhe enviar…

        Uma pergunta. Posso alterar o tamanho da imagem em algum software…photoshop ou fireworks?

      • Rafael Clares setembro 24, 2009 às 2:04 pm

        Pode sim, claro, normalmente!!!

      • Renato Vitor setembro 24, 2009 às 2:50 pm

        quero dizer….o tamanho das muniaturas…tbém posso?

      • Rafael Clares setembro 24, 2009 às 3:13 pm

        Renato, acho que será mais fácil eu ver seu código, assim consigo te dizer o que está errado.
        até,

  22. Neto março 2, 2010 às 2:18 pm

    Parabéns pelo exemplo! agora tem como fazer o contrário-ou seja, uma imagem e abrir o litebox com as outras?

    • Rafael Clares março 2, 2010 às 6:49 pm

      Neto, obrigado pelo comentário. Quanto a sua pergunta, não entendi muito bem o que deseja fazer.
      Por um acaso é exibir uma miniatura e depois que clicar abrir um outra imagem?
      Se for isso, basta trocar a imagem destino que será exibida e ela está no a href=”image….” . ex:




      abraços

  23. Neto março 3, 2010 às 11:46 am

    Oi Rafael, obrigado pela resposta, é pessoas como você que faz a diferença! Bem, o que preciso é que a partir de uma imagem abra outra usando o efeito litebox (se posso dizer assim), e na “caixa” que se abrir tenha lá as outras imagens relacionadas a essa! no link: http://notebook.pontofrio.com.br/Notebook-CCE-ILP-432-c-Intel-Dual-Core-T4200-4GB-320GB-LCD-141-HDMI-Wireless-e-Linux-30870.html?Filtro=C56, mostra exatamente o que preciso. Mais uma vez obrigado! e espero que possa me ajudar, já pesquisei na internet muito mas não achei como fazer!

    • Rafael Clares março 6, 2010 às 2:48 am

      Neto, apesar de ser simples é algo delicado, a única coisa que posso te adiantar é que não passa do mesmo efeito parecido com o lightbox, no entanto no lightbox estamos abindo uma única imagem e neste exemplo está sendo chamado não só uma imagem mas sim uma página html com várias imagens onde cada uma imagem possui o efeito desejado.
      O Visual LightBox é quem possibilita que ao invés de chamar uma única imagem seja chamada uma página (iframe) com diversas imagem e juntamente o efeito em cada uma delas.
      Nunca utilizei e isso impossibilida que eu possa lhe ajudar de forma mais eficaz, mas dê uma navegada no site do Visual Lightbox, segue o link :
      http://visuallightbox.com/photo-gallery-with-lightbox-simple-html-demo.html

      forte abraço,

  24. MARCIO março 18, 2010 às 8:39 pm

    Tem como diminuir a borda superior da foto quando aberta? digo a margem que fica no topo antes de aparecer a foto ( quando a foto é aberta).

    • Rafael Clares março 23, 2010 às 2:03 pm

      Marcio, dê uma olhada no CSS, certamente dá sim. Mas não fui até este nível de detalhes, isso não será abordado. Obrigado pelo comentário

  25. Simoni maio 28, 2010 às 6:25 am

    Rafael, eu montei a galeria e como o Bruno disse, eu tambem não consegui ativar a função “prevLink””nextLink” e tambem vi em outros sites, que ao clicar na imagem ela fecha e eu não consegui ver essa função.

    Outro detalhe , é como poderia ser feito, para que em vez de colocarmos uma série de thumbs apontando a imagem, apenas colocariamos uma e ela chamaria aleatóriamente as demais?

    Se puder me ajudar, agradeço.

    E finalizando, quando achava que tudo estava perdido, que teria que morrer na mão de um código pago, descobri sua dica. Agradeço imensamente pela visão profissional que vc tem. Temos de ganhar em cima de nossos clientes e deixarmos de ser ambiciosos e egoista, querendo guardar para si o que se aprende. Se fosse assim, o que seria de nossos professores?

    • Rafael Clares maio 28, 2010 às 6:42 am

      Olá Simoni, obrigado pelo comentário…
      Bem, realmente esse é um post infeliz rs rs rs sobre lightbox, prometo que irei atualizar, está muito vago e também porque é bem velho, muitas coisas surgiram desde então,
      o que você está querendo fazer é possível sim no lightbox, é até fácil se for algo estático, bastando dar uma olhada no site da lightbox.
      O mesmo não é tão diferente para fazer com uma linguagem dinâmica, eu morro de vontade de escrever este post, irei fazer logo, por enquanto dê uma olhada em:
      http://smoothgallery.jondesign.net/showcase/gallery/#myGallery-picture(2)
      http://visuallightbox.com/
      http://flowplayer.org/tools/demos/scrollable/gallery.html

      O primeiro link tem mais a ver com que você quer e não é dificil de tornar dinâmico, se for estática é moleza (mas ninguém usa mais estático né).
      O segundo link é bem bonito e mais chatinho, é um instalador (windows) você cria uma galeria simples, faz engenharia reversa para tornar dinâmica com PHP por exemplo, mas é possível.
      O terceiro link é um plugin jquery e eu tenho utilizado bastante, acho muito produtivo e simples de usar… ah desse último tenho um exemplo dinâmico em :
      http://clareslab.com.br/newscg/post.php?pageid=15

      Dê uma olhada nos docs destes links e verá que não é tão ruim de fazer (com exceção do visual lightbox 2º link).

      abraços e até logo

  26. Simoni maio 29, 2010 às 7:09 pm

    Rafael, o link CLARESLAB é muito bom, vou tirar o final de semana para estuda-lo. Agora o http://visuallightbox.com, eu já tinha baixado, mas ele cria um espelho de identificação e para retira-lo tem de pagar.
    Valeu a dica, e gostei muito do seu site….vou ficar antenada aqui.
    Abraços e bom final de semana.

    • Rafael Clares maio 29, 2010 às 11:36 pm

      Ah você se refere ao clareslab.com.br? ehehe
      preciso atualizar o link “cases” hahaha que vergonha, é que são os primeiros trabalhos e também pq eu só programa, não tenho a mínima vocação para design apesar de ter vontade de aprender hahaha
      blz então, abraços

  27. ranulfo junho 3, 2010 às 12:34 am

    Parabéns pelas dicas!
    mas surgiu um pequeno problema enquanto a tamanho da imagem final no lightbox
    tem como definir um tamanho fixo pro lightbox??
    padronizar sua saida, para que sempre tenha um tamanho 300px x 300px por exemplo, independente do tamanho original da foto

  28. Edmar julho 19, 2010 às 1:00 pm

    CAra sem comentários estava quebrando a cabeça para fazer o lightbox só tenho a lhe agradecer….

  29. Edelson setembro 20, 2010 às 5:06 pm

    Olá Rafael.
    Você sabe se tem como mostrar as miniaturas dentro da visualização do LightBox? Tipo, no rodapé, sei lá…
    Eu acho isso bem útil, para o usuário poder ir direto para a foto que interessa, sem ter que passar uma por uma, e sem ter que sair da janela do LightBox para voltar para a tela de miniaturas inicial.
    O site http://www.moto.com.br usa esse esquema que estou querendo, mas não sei que tipo de galeria que eles usam.
    Abraços!

    • Rafael Clares setembro 20, 2010 às 5:14 pm

      Edelson eles utilizam o GreyBox (http://orangoo.com/labs/GreyBox/). Você pode tentar adapta-lo, infelizmente só ajudo em relação à instalação, como está comentado no post, para customizações não tenho como ajudar. abraços

      • Edelson outubro 6, 2010 às 12:57 pm

        Valew Rafael, obrigado pela dica!

        Abraços!

  30. Renato setembro 22, 2010 às 10:53 am

    Rafael,
    E se eu quero que ele vizualize as fotos de uma certza pasta, “setada” pela URL.
    Exemplo:
    http://www.clares.com.br/index.php?=ehnois
    (nem sei se é assim que fica as variaveis na url)
    ai na a galeria a ser mostrada no index.php estaria em http://www.clares.com.br/ehnois
    sacou?
    Obrigado, seu site é perfect

  31. yan janeiro 24, 2011 às 1:09 am

    parabéns pelo post! muito legal!

  32. João Santos Neto maio 20, 2011 às 11:39 am

    Olá Rafa, muito bom essa galeria de fotos …
    Procurei uma e a que me paraceu bem legal foi essa. Tenho um site no ar sobre karate e existe muitas fotos para serem postadas e este album ficou bem legal.
    Porém segui todos os comandos que enviou, mas quando ponho no ar não fica com o efeito que foi mostrado, ou seja: abre outra página com a foto … pode me ajudar ou me dar uma ideia de outra “galeria” que possa abrir as fotos mais rápido ?
    Valeu cara, PARABÉNS pelo post.

    • Rafael Clares maio 23, 2011 às 3:43 pm

      João, você pode me passar o link do site para eu ver o que há de errado?
      Abraços

  33. fabio maio 21, 2011 às 9:19 pm

    Ei Rafael neste lightbox aparesce a marca d’agua quando a gente cria a galeria tem como tirar esta marca d’agua ou melhor vc aconselha algum programa semelhante a este ?
    Obrigado pela atenção e esta otimo seu site parabens mesmo vc tem ajudado muito as pessoas pelo que leu observei fique com Deus

    • Rafael Clares maio 23, 2011 às 3:42 pm

      Fábio, cara me desculpe mas agora fiquei meio perdido rs rs marca dagua? É nesse post mesmo? Rapaz acho que não hein! Dá uma olhada direito para se certificar que não comentou no post errado!
      A não ser que esteja falando do visuall ightbox um aplicativo desktop que você seleciona as imagens para criar automaticamente a galeria, se for o caso eu não conheço nenhum grátis para você poder criar.
      Ainda, esse post na verdade não está relacionado ao programa e sim ao efeito apenas.
      Obrigado pelo comentário e um forte abraço!

  34. kleber junho 7, 2011 às 2:52 pm

    muito bom me ajudou bastante

  35. Fred Sousa junho 23, 2011 às 2:43 am

    Lightbox é show de bola! sempre uso em meus projetos. Parabens pelo post.

  36. Diego julho 27, 2011 às 7:50 am

    Muito legal mesmo, só tenho uma pergunta. veja bem, eu tenho esse cod:
    <a href="cadastro/” rel=”lightbox[roadtrip]”><img src="cadastro/” width=”100″ height=”100″ border=”0″>

    ou seja, pego o link da img do banco e exibo ela com o link, mais como tem mais de 1 user cadastra do ele mostra Foto 1 de 80, não teria como exibir só a imagem clicada?

    • Rafael Clares julho 27, 2011 às 7:05 pm

      Diego é só remover o [roadtrip]
      Altere o rel=”lightbox[roadtrip]“ para rel=”lightbox“

      abraço

      • Diego julho 27, 2011 às 10:25 pm

        Rafael, ficou perfeito.
        Já sou leitor do seu site a algum tempo e eu já usava o seu sistema de criar thumbs mais nunca consegui usar ele dinamicamente. exe;
        tenho um sistema de upload de foto e eu preciso pegar o nome da imagem e passar por varivalvel pra essa linha:

        imagejpeg($image_p, “fotos_users/$AQUIEURECEBO/”, 80);
        imagedestroy($image_p);

        Já tentei concatenar mais sem sucesso. pode dar mais essa força?

        No mais, parabéns pela proposta do seu site.

      • Rafael Clares julho 27, 2011 às 10:32 pm

        Diego, você tem que fazer o seguinte:
        – quando efetuar o upload você grava o nome da imagem no banco
        ex: image_1.jpg – somente o nome da imagem, sem o caminho…
        E então você passa o caminho para o thumb.php na url, ex:


        Só isso!

        tabela fotos sql
        foto_id
        foto_url

        $query = mysql_query(“select * from fotos”)
        while ($rs = mysql_fetch_object($query))
        {
        echo " <img src="thumb.php?img=fotos_users/$rs->foto_url” / > " ;
        }

        abraço

  37. Diego julho 28, 2011 às 12:05 am

    Rafael essa parte eu consigo de boa, oque não da é fazer que que a linha abaixo pegue o nome e faça a thumb:
    exe:

    $japegueionome = “foto_user_id_10”;
    imagejpeg($image_p, “fotos_users/$japegueionome/”, 80);

    pq isso tem q ser feito dinamicamente qdo o user fizer o upload da foto dele, manja?

    • Rafael Clares julho 28, 2011 às 12:09 am

      Ixi cara mas essa conversa começou a dar voltas.
      Se você ler o que eu escrevi anteriormente vai ver que o que você precisa passar para o arquivo thumb é diferente do que você está mostrando aí.
      basta ler novamente e atentamente que você irá conseguir… eu tenho N sistemas que utilizam exatamente esse formato.

      Veja o código fonte desse link e repare o que está sendo passado ao thumb.php
      http://clareslab.com.br/projetos/sinapse/galeria.php?proid=49

      • Diego Pinheiro julho 28, 2011 às 12:25 am

        Entendi, é que meu proposito é diferente, minha ideia era pegar a mesma imagem que o user fez o upload e acrescentar o thumb ai no banco eu teria:

        imagemgrande | imagempequena
        imgteste.jpg imgteste_pequena.jpg

        e na pasta eu teria as mesmas imagens salvas. por isso a necessidade de pegar o nome da foto por variavel.

        Mais eu entendi perfeitamente oque vc quis dizer. vou testar logo que eu terminar o mural

      • Rafael Clares julho 28, 2011 às 12:37 am

        Diego, você não precisa ter nomes diferentes nas imagens.
        Você precisa criar a estrutura de diretório como abaixo :
        /fotos
        /fotos/thumbs/

        os nome das imagens são iguais em diretórios separados.

        No upload você salva a imagem padrão em /fotos/ e a miniatura em /fotos/thumbs/
        Mas se for fazer isso você não precisa do arquivo thumbs.php, concorda que não há utilizade se você for gerar uma miniatura no upload?

        Agora, o que você pode fazer é criar 2 arquivos thumbs, um que gere uma miniatura e outro que exiba o tamando original, para ficar melhor você pode
        passar os parametros no thumbs.php

        $w = “120”;
        $h = “100”;
        if(isset($_GET[‘w’]))
        {
        $w = $_GET[‘w’];
        }
        if(isset($_GET[‘h’]))
        {
        $h = $_GET[‘h’];
        }

        include_once(‘thumbnail.inc.php’);
        $thumb = new Thumbnail($_GET[‘img’]);
        $thumb->resize($w,$h);
        $thumb->show();
        exit;

        Ah, dê uma olhada também nessa Classe:
        http://www.verot.net/php_class_upload_samples.htm

  38. Diego Pinheiro julho 28, 2011 às 12:46 am

    de boa, fiz da forma dita anteriormente e deu certo. perfeito manow. quando eu terminar o trabalho eu mostro.
    bom é que eu n preciso dispor de mais espaço em hd e no banco tbm.

  39. Diego Pinheiro julho 29, 2011 às 7:49 pm

    Fala ae Rafael. na boa?

    Passando pra deixar os links:

    http://opcaonossa.6te.net/layout.php?id=album (ainda vo editar as tabelas)

    http://opcaonossa.6te.net/layout.php?id=mural

    Ehehe. agora só to esperando o Registro do Domínio, rs.

    • Rafael Clares agosto 4, 2011 às 3:43 am

      Aê garoto, hehehehe parabéns irmão!
      show!

  40. Bruno agosto 3, 2011 às 7:56 pm

    ótimoooooooo

  41. Lucas agosto 5, 2011 às 12:00 pm

    E ai rafael. td blz? PArabéns pelo post, já venho alguns dias estudando ele, consegui aprender bastante, pois atráves dele eu busquei vários outros assuntos. Mas estou com uma dúvida (acho que simples. rs), na hora de criar a galeria, as imagens fica em um tamanho original 500×375 no site e ai desestrura todas as outras tabelas, um exemplo de como eu queria que ficasse é esse do Diego Pinheiro. Agradeço desde já, Obrigado.

    • Rafael Clares agosto 5, 2011 às 9:07 pm

      Lucas, basta definir o tamanho da imagem via html ou css.

      html

      css
      img { width:100px; height:100px; }

  42. Diego Pinheiro Coelho agosto 5, 2011 às 9:23 pm

    Valeu Rafael. Coloquei mais um efeito na tabela e talz. ficou bacana.

    No problema do Lucas acredito que seja no thumb.php, ou na FALTA dele, rs

    deve estar

    $new_width = 500;

    $new_height = 375;

    pois, se ele chamo a imagem corretamente (thumb.php?img=x.jpg) não teria como ficar em outro tamanho.

    OU ele chamou a imagem assim:
    e só deu um

    rel=”lightbox[roadtrip]

    desta forma ele teria a imagem no tamanho original

  43. Lucas agosto 7, 2011 às 3:04 pm

    Quero agradecer pela dica, obrigado Rafael e Diego, deu certo aqui, quando eu hospedar eu posto pra vc´s darem uma olhada. Valeu.

  44. Diego Pinheiro Coelho agosto 11, 2011 às 3:16 am

    Correndo o risco de ser acusado de plagio eu digo:

    “Aê garoto, hehehehe parabéns irmão!
    show!”

    ehehEHeh

    • Rafael Clares agosto 11, 2011 às 3:18 am

      Valeu irmão!
      Abraços

  45. lucdesigner agosto 14, 2011 às 1:07 am

    Oh eu denovo.. rs
    Para aquele efeito, de quando passar o mouse na foto, eu consigo no PHP também? Sei como no flash, mas acho ser inviavel coloca-lo junto do lightbox. Agradeço demais, valeu.

    • Rafael Clares agosto 20, 2011 às 2:35 am

      Luc não entendi muito bem, efeito ? onde tem esse efeito? quando for assim sempre post o link, é que eu me perco nos meus posts hehehe
      PHP não cria eventos no lado cliente (ao passar mouse, essas coisas). Se você viu algo assim, certamente é Jscript / CSS, já o flash nao aguento olhar pra ele nem pronto.

  46. Diego Pinheiro (@magroruts) agosto 20, 2011 às 6:11 am

    Rafael. “Acho” que ele se refere ao efeito que eu coloquei junto com a galeria, link:

    http://opcaonossa.6te.net/layout.php?id=album&galeria=grupo

    Luc, o link do css:

    http://opcaonossa.6te.net/css/new.css

    Abraços : )

    • Rafael Clares agosto 20, 2011 às 7:03 pm

      Pode crer Diegao, isso ae! Valeu man!

  47. Lucas agosto 30, 2011 às 11:51 am

    E ai tah blz, Muito obrigado aos dois, consegui ver hoje as respostas, mas valeu demais já vou preparar pra fazer. Como prometido, segue o link do site que fiz, http://www.metaisbrilhantes.com.br ;
    Abraços =)

  48. Davi Correa dezembro 27, 2011 às 10:43 am

    Bom Dia Rafael, parabens pelo post
    deu tudo certinho mais como estou usando um iframe a foto abre no iframe…. por ex. tenho a index com um menu linkando para a pagina fotos (onde esta o lightbox) quando clico na foto abre apenas na iframe. Bom tem como eu fazer abrir na index??? Obrigado e parabens mais uma vez.

    • Rafael Clares janeiro 5, 2012 às 2:13 am

      DAvi, fica ruim de fazer isso aí, você vai precisar pesquisar no google uma forma de configurar a abertura fora do iframe, algo como window.parent ou então o nome de um segundo iframe, infelizmente não tenho nada desse tipo já pronto !

  49. Paulo Pereira fevereiro 10, 2012 às 6:45 pm

    Oi Rafael, excelente ponto de apoio o seu site. Para quem está começando, como eu, é uma excelente fonte de estudo. Os posts são muito bem explicados. Parabéns!
    Então, estou fazendo uma galeria de imagens e acontece que no meu servidor local tudo funciona perfeitamente, inclusive a criação de miniaturas. Entretanto, ao colocar no servidor remoto, as miniaturas não aparecem, embora o lightbox funcione perfeitamente.
    Já revisei, refiz, tentei mudar algumas coisas, ma não funcionou. As miniaturas não são mostradas quando a galeria está no servidor remoto. Alguma ideia? Obrigado.

    • Rafael Clares fevereiro 10, 2012 às 7:16 pm

      Olá Paulo, valeu!
      Cara, verifique a versão do PHP e versão da classe thumbnail, leia os comentários dos posts sobre miniaturas, verá que tem 2 versões do thumbnail.
      Outra coisa que pode ser, verifique os nomes dos arquivos, no linux (geralmente usado no remoto) nomes com espaços ou acentos são inválidos e não podem ser exibidos!
      Abs, boa sorte!

      • Paulo Pereira fevereiro 14, 2012 às 1:36 pm

        Caro Rafael, primeiramente obrigado pela resposta.
        Infelizmente ainda não funcionou. As miniaturas não aparecem quando o script está no servidor remoto, apenas no local.
        Os códigos foram digitados corretamente (pelo menos não há apóstrofos e acentos no lugar das aspas), li todos os comentários dos vários posts sobre miniaturas. A versão do Php local é 5.3.10 e remoto é 5.3.8.
        A classe thumbnail baixei a que você disponibilizou no post Galeria Lightbox + Upload de fotos + Thumb + Painel Admin, mas também baixei a mais recente em http://phpthumb.gxdlabs.com/. Tentei com as duas.
        O html está assim:

        <a rel="lightbox['roadtrip']" href="../../imagens/” title=”” ><img src="mini.php?imagem=../../imagens/” />

        O mini.php está assim:

        resize(75, 75);
        $thumb->show();
        ?>

        Não entendo porque não funciona. Será que estou passando por cima de alguma coisa?
        Abs. Obrigado

      • Rafael Clares fevereiro 15, 2012 às 2:59 pm

        Mas o que seria esse mini.php? Você alterou o nome do arquivo apenas?
        Não sei de onde saiu o ../../imagens/

      • Paulo Pereira fevereiro 14, 2012 às 1:41 pm

        O html está assim:
        <a rel="lightbox[roadtrip]" href="../../imagens/” title=”” ><img src="mini.php?imagem=../../imagens/” />

  50. Paulo Pereira fevereiro 14, 2012 às 1:52 pm

    Desculpe, mas percebi que algumas tags html não são exibidas corretamente.
    O mini.php:

    require_once (‘classes/thumbs/ThumbLib.inc.php’);

    $thumb = PhpThumbFactory::create($_GET[‘imagem’]);
    $thumb->resize(75,75);
    $thumb->show();
    exit;

  51. Paulo Pereira fevereiro 16, 2012 às 3:04 pm

    Caro Rafael, boa tarde.
    Segue o link: ****************

    • Rafael Clares fevereiro 16, 2012 às 3:10 pm

      Paulo, onde está:

      Altere para:

      Ou seja:
      Alterar o ../../images/

      para:
      http://site.com.br/caminho_pasta_das_images/

      exatamente como está no link abaixo irá funcionar:

      Perceba que se copiar esse link e jogar no browser a imagem só não vai aparecer por um outro motivo dessa vez…
      O allow_url_fopen está desativado no seu PHP
      envie para raiz do site um arquivo chamado php.ini com o conteúdo abaixo:
      allow_url_fopen=on

      Primeiramente envie o php.ini
      e depois tente acessar o link:

      claro que alterando site.com.br pelo seu domínio

      • Paulo Pereira fevereiro 16, 2012 às 4:17 pm

        É isso aí garoto! Funcionou beleza! Muitíssimo obrigado pela sua ajuda. Pude aprender um pouco mais. Nâo havia me atentado para as mensagens do log de erros. Só agora percebi que já estavam me avisando sobre o allow_url_fopen.
        Você deve ter percebido que aquele link é somente pra esse nosso teste, mas vou deixar lá um pouco mais pra você ver o resultado.
        Grande abraço e mais uma vez, muito obrigado.

  52. Vagner abril 22, 2012 às 2:22 am

    Ola mestre Rafael, usei sua galeria, adaptei ao meu projeto, ficou muito bom…
    Mas quero dar uma incrementadinha, como sempre. Preciso colocar o botão compartilhar do facebook logo ao lado da imagem tanto de total, consegui encontrar onde ele monta o link da imagem que ta mostrando, que é no publicMethod.load = function (), la no img.src = href, mas não estou conseguindo fazer com que mande esse link pra quando monta a colorbox com a imagem para o iframe do botão do face, da sempre null, por favor me de uma ajuda, lhe agradeço. Há e obrigado por todas as suas postagens, são muito úteis,

    • Rafael Clares abril 22, 2012 às 2:52 am

      Wallaaaaaa, rsrs, fala aê Vagner!
      Cara, não tive tempo de simular seu problema mas você pode fazer o seguinte, adicione à galeria o JQuery e crie um bind para o evento click.
      Ex:

      $(‘a’).live(‘click’,function(){
      var imgUrl = $(this).attr(‘href’);
      $(this).attr(‘title’,imgUrl)
      $(this).attr(‘rel’,imgUrl)
      })

      com isso você tem no título e em REL(utilizado no lightbox) da tag A o endereço da imagem.
      Pelo que vi você tem boa noção de prog, acho que essa dica será suficiente para você!
      Abs e obrigado pelo comentário, qualquer coisa dá um grito aê!

      • Vagner abril 23, 2012 às 1:52 am

        Bah meu amigo, desculpe, mas em Jquery estou apenas conseguindo achar o sentido da coisa agora, não manjo ainda, em php até me garanto. Não sei se eu não lhe entendi direito ou perguntei mal, quero colocar o botão compartilhar embaixo quando abre a lightbox, pra quando o cara abrir ou trocar de foto, recarregue com o link da imagem atual, mas não ta fácil, será que vc poderia me dar uma ajudinha um pouco maior?

      • Rafael Clares abril 23, 2012 às 2:36 pm

        Vagner, me desculpe mas como dito no post, para customizações estou sem tempo mesmo.
        Mas para uma pessoa que se garante no PHP, isso aí é moleza demais.
        A ajuda que eu posso dar é em relação ao código que disponibilizei porque eu já decorei ele,
        novas implementações eu precisaria testar aqui, simular, etc… e o tempo não ajuda.

  53. Aparecido moreira de paula maio 20, 2012 às 6:41 pm

    Gostei muito legal
    eu gostaria de saber se pode copiar este código e trocar os seu parámetros???
    Obrigado

    • Rafael Clares maio 23, 2012 às 9:14 pm

      Aparecido, você pode baixar os fontes de alterar como desejar;
      Boa sorte!

  54. thiago agosto 2, 2012 às 4:27 pm

    seguinte, to montando um site onde todo o conteudo carrega via ajax dentro de uma div, qdo chamo a pagina galeria, ela abre normal, mais qdo clico na foto p fazer o efeito, ele me abre uma outra pagina, ele n faz o efeito lihgtbox dentro da div

    • Rafael Clares agosto 13, 2012 às 2:00 pm

      Thiago, abrindo em DIV eu não tentei fazer. Creio que tenha que mudar algo no JS do lightbox; Melhor dar uma procurada no google.

  55. todois agosto 5, 2012 às 3:11 am

    Ola to com muita dificuldade de inserir essa galeria no meu site, colocando o arquivo prototype.js ele desativa o slaid do topo é so esse arquivo ja testei todos

    • Rafael Clares agosto 13, 2012 às 1:58 pm

      Tente colocar primeiro os arquivos (js) da galeria e depois do slide!
      Tente alterar a ordem em que os arquivos são chamados no HTML;

  56. gustavofaint agosto 13, 2012 às 3:55 pm

    Olá Rafael devo dizer que seu tópico está muito bom.
    Eu baixei o Light Box Pronto. Minha pergunta é a seguinte.
    Quando eu abro no meu site a galeria de imagens, aparecem todas fotos.
    Mas não sei como criar um menu para selecionar qual galeria vou querer.
    Por exemplo: festa de são joão, feira do livro…

    Peço sua ajuda,
    obrigado.

    • Rafael Clares agosto 20, 2012 às 3:12 pm

      Gustavo, infelizmente esse post não aborda o assunto. Para isso tem que ir um pouco além com banco de dados.
      Existem outras galerias no blog. Dê uma pesquisada, talvez encontre algo que sirva!
      abs

  57. ana flavia setembro 19, 2012 às 1:59 am

    Olá Rafael eu consigo criar uma galeria lightbox da seguinte forma em uma miniatura abram 3 fotos grandes ai de outra miniatura abram 5 fotos grandes e de outra uma foto variando assim?? consigo criar assim? sem ter todas as miniaturas?????

    • Rafael Clares setembro 19, 2012 às 3:38 pm

      Sim, mas acho que você está falando de categorias. Será preciso criar uma galeria com categorias.
      Deve ser assim que você quer: http://clareslab.com.br/dream/album.php
      Infelizmente, só tiro as dúvidas em relação aos scripts, não consigo (devido a falta de tempo) ajudar em customizações.
      De toda forma, durante o processo você pode me fazer perguntas sobre o script que responderei, sempre lembrando de fazer uma busca no google antes de perguntar;
      Boa sorte

Os comentários estão desativados.

%d blogueiros gostam disto: