Galeria de Fotos LightBox

Olá, em um post anterior eu comentei sobre o LightBox e prometi falar um pouquinho sobre ele, então vamos lá.

O LightBox, resumidamente e a grosso modo, é um conjunto de bibliotecas JavaScript que são utilizadas para exibição de fotos e imagens onde o efeito é realmente muito surpreendente, muito bonito, ao menos eu acho.

Bem, não vamos programar nada, como eu disse o LightBox é uma biblioteca e portanto já está prontinha para usarmos, usaremos um exemplo bem simples exibindo apenas 2 fotos / imagem.

Então, como de costume, vamos ao HTML com o index.html ou  index.php como preferir.

<html>
<head>
<title>.: LightBox :.</title>
<link rel=”stylesheet” href=”css/galeria.css” type=”text/css” media=”screen” />
<!– incluindo os arquivos da biblioteca LightBox–>

<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />
<script type=”text/javascript” src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/scriptaculous.js?load=effects”></script>
<script type=”text/javascript” src=”js/lightbox.js”></script>
</head>
<body>
<div id=”galeria”>
<ul>
<a href=”fotos/image1.jpg” rel=”lightbox[roadtrip]”>
<img src=”fotos/image1.jpg” class=”thumb”></a>
<a href=”fotos/image2.jpg” rel=”lightbox[roadtrip]”>
<img src=”fotos/image2.jpg”  class=”thumb”></a>
</ul>
</div>
</body>
</html>

O arquivo  galeria.css

body{
background-color:#000000;
}

a{
text-decoration:none;
}

a:hover{
text-decoration:none;

}

.thumb{
border:1px solid #fff;
border-bottom:10px solid #fff;
padding:2px;
width:120px;
height:100px;

}

Acima um exemplo bem simples da utilização do LightBox, é interessante criar a galeria utilizando miniaturas(thumbs) geradas automaticamente pelo PHP e você pode ver como criar miniaturas de fotos em outro post  ‘ Criar Thumb (miniatura) com PHP‘.

Vamos continuar no LightBox, as linhas que adicionam o javascript, e elas são 3, são necessárias para que o lightbox funcione, então ao baixar o lightbox, descompacte-o e mantenha os arquivos nos seus diretórios originais,  o arquivo lightbox.css também é necessário, então se você precisar de formatação CSS ou funções javascript, crie outros (js e css) arquivos preservando os do lightbox ok.

Agora você me pergunta, onde está a galeria a que se refere no título e eu lhe respondo junte 2 Posts desse blog e você terá uma galeria!  😉

De toda forma minha intenção não foi de explicar como funciona o LightBox e sim de dizer que ele existe, é muito fácil de usar e o principal de tudo o visual é perfeito… então procurem um pouco no google e encontrarão muita coisa a respeito do LightBox!

Para baixar o lightbox em sua última versão visite LightBox aproveite e dê uma navegada no site deles, tem muitos exemplos legais lá.

O link para ver o Exemplo funcionando

E agora como eu sou muito bonzinho 😉   o download de tudo pronto  download

Se preferir galeria com banco de dados: link

Não deixe de ver : http://clares.com.br/2010/11/04/galeria-de-fotos-lightbox-php/

Até o próximo Post.

Comments

  1. By Junior

    Responder

  2. By rafael

    Responder

  3. By Thor

    Responder

  4. Responder

  5. By thiago

    Responder

  6. By Johnatan

    Responder

  7. Responder

    • Responder

  8. Responder

  9. By Róger Klein

    Responder

  10. By Róger Klein

    Responder

    • Responder

  11. By Róger Klein

    Responder

    • Responder

  12. By Róger Klein

    Responder

    • Responder

  13. By Róger Klein

    Responder

  14. By Paulo

    Responder

    • Responder

  15. By valois

    Responder

  16. By Rafael

    Responder

  17. By Bruno

    Responder

    • Responder

      • By Bruno

        Responder

        • Responder

          • By Bruno

  18. By Bruno

    Responder

    • Responder

  19. Responder

  20. Responder

    • Responder

  21. Responder

    • Responder

      • Responder

        • Responder

  22. By Neto

    Responder

    • Responder

  23. By Neto

    Responder

    • Responder

  24. By MARCIO

    Responder

    • Responder

  25. By Simoni

    Responder

    • Responder

  26. By Simoni

    Responder

    • Responder

  27. By ranulfo

    Responder

  28. By Edmar

    Responder

  29. Responder

    • Responder

      • Responder

  30. By Renato

    Responder

  31. By yan

    Responder

  32. By João Santos Neto

    Responder

    • Responder

  33. By fabio

    Responder

    • Responder

  34. By kleber

    Responder

  35. Responder

  36. By Diego

    Responder

    • Responder

      • By Diego

        Responder

        • Responder

  37. By Diego

    Responder

    • Responder

      • Responder

        • Responder

  38. Responder

  39. Responder

  40. By Bruno

    Responder

  41. By Lucas

    Responder

    • Responder

  42. Responder

  43. By Lucas

    Responder

  44. Responder

  45. Responder

  46. Responder

  47. By Lucas

    Responder

  48. By Davi Correa

    Responder

    • Responder

  49. By Paulo Pereira

    Responder

    • Responder

      • By Paulo Pereira

        Responder

        • Responder

      • By Paulo Pereira

        Responder

  50. By Paulo Pereira

    Responder

  51. By Paulo Pereira

    Responder

  52. By Vagner

    Responder

    • Responder

      • By Vagner

        Responder

        • Responder

  53. Responder

    • Responder

  54. By thiago

    Responder

    • Responder

  55. By todois

    Responder

    • Responder

  56. Responder

    • Responder

  57. By ana flavia

    Responder

    • Responder

  58. By Josimar

    Responder

    • By leandro alves

      Responder

  59. By tiagofur

    Responder

Perguntas duplicadas ou cujo a resposta esteja nos comentários serão ignoradas.
Comentários com códigos serão ignorados(para isso, use o pastebin.com e informe aqui o link).
Faça sua pergunta e "aguarde" ser aprovada para aparecer no blog.
Aguarde sua resposta, ela não é em tempo real, tenha paciência!

Deixe seu comentário