Galeria de Fotos Lightbox

Galeria de Fotos Lightbox

Neste artigo vamos fazer uma Galeria de Fotos usando o Lightbox.

Abordagem prática da utilização do Lightbox na criação de uma galeria de imagens utilizando os scripts.

Vamos dar início ao nosso tutorial você aprenderá a inserir efeito Lightbox nas imagens do site com uma maneira simples, rápida siga o passo a passo abaixo.

Código Html:

<div id="vlightbox1">
                
    <a class="vlightbox1" id="lightbox-responsiva" href="galeria/fotos/1.jpg" title="Foto 1">
        <img src="galeria/capa/1.JPG" alt="foto 1">
    </a>

    <a class="vlightbox1" id="lightbox-responsiva" href="galeria/fotos/2.jpg" title="Foto 2">
        <img src="galeria/capa/2.JPG" alt="foto 2">
    </a>

    <a class="vlightbox1" id="lightbox-responsiva" href="galeria/fotos/3.jpg" title="Foto 3">
      <img src="galeria/capa/3.JPG" alt="foto 3">
    </a>

    <a class="vlightbox1" id="lightbox-responsiva" href="galeria/fotos/4.jpg" title="Foto 4">
      <img src="galeria/capa/4.JPG" alt="foto 4">
    </a>

    <a class="vlightbox1" id="lightbox-responsiva" href="galeria/fotos/5.jpg" title="Foto 5">
      <img src="galeria/capa/5.JPG" alt="foto 5">
    </a>

    <a class="vlightbox1" id="lightbox-responsiva" href="galeria/fotos/6.jpg" title="Foto 6">
      <img src="galeria/capa/6.JPG" alt="foto 6">
    </a>

    <a class="vlightbox1" id="lightbox-responsiva" href="galeria/fotos/7.jpg" title="Foto 7">
       <img src="galeria/capa/7.JPG" alt="foto 7">
    </a>

    <a class="vlightbox1" id="lightbox-responsiva" href="galeria/fotos/8.jpg" title="Foto 8">
       <img src="galeria/capa/8.JPG" alt="foto 8">
    </a>

 </div><!--Fecha Lightbox-->

Segui os Scripts abaixo:

Ccss e os js do Light Box.

 <!--Inicia o Light Box-->
      <link rel="stylesheet" href="lightbox/css/vlightbox1.css" type="text/css" />
      <link rel="stylesheet" href="lightbox/css/visuallightbox.css" type="text/css" media="screen" />
          
      <script src="lightbox/js/jquery.min.js" type="text/javascript"></script>
      <script src="lightbox/js/visuallightbox.js" type="text/javascript"></script>

      <script src="lightbox/js/thumbscript1.js" type="text/javascript"></script>
      <script src="lightbox/js/vlbdata1.js" type="text/javascript"></script>
 <!--Inicia o Light Box-->

Responsivo Extra:

Sabemos que hoje praticamente 90% dos acessos na web é pelo Celular, tabletes, e vários tamanhos de Monitores.

Você possui visitantes que acessam seu site tanto pelo desktop como pelos dispositivos móveis, como o celular ou tablet? Seu site está adaptado para ser visualizado em todos os tipos de dispositivos? Com a evolução dos aparelhos que carregamos no bolso, é cada vez mais importante trabalhar com um site responsivo, que se adapta a qualquer formato.

Suas vantagens derivam da adaptação a qualquer ferramenta que os usuários estejam usando para facilitar a sua visualização. Além disso, os sites responsivos também podem expandir para visualizações de detalhes da página dando um zoom.

Veja alguma das adaptações nas páginas para sites responsivos que precisam ser feitas:

• Alterações no layout do site.
• Colocar as principais ferramentas de acesso para os usuários, para facilitar nas telas menores.
• Alterar as imagens e cores do site.
• Aumentar o espaço entre os links para que o dedo não encoste em dois links ao mesmo tempo.

Adapatei o uma class no css para deixar as imagens Responsiva.

/*Responsivo*/
/*480PX BREAKPOINT*/
@media (min-width:30em){
#vlightbox1 #lightbox-responsiva { width:47.5%; float:left; }
}

/*768PX BREAKPOINT*/
@media (min-width:48em){
#vlightbox1 #lightbox-responsiva { width:31.8%; }
} 

/*1280PX BREAKPOINT*/
@media (min-width:80em){
#vlightbox1 #lightbox-responsiva { width:23.6%; }
}

Baixar Código Veja Funcionando