Como criar uma Lightbox
Autor: Héliton Martins | Publicado: 2014-04-03T12:38:00-03:00



No tutorial de hoje, eu vou ensinar à vocês como criar uma LightBox. A imagem com lightbox é exibida numa pop-up nesta mesma página. Já a imagem sem lightbox, é exibida normalmente como se fosse apenas um link.
Gostaria muito de dizer que fazer esse efeito é facil, mas a verdade é que fácil é, mas é muito chato.
Ela usa CSS, Javascript e HTML. Ela ficou legal.
Clique em Ler Postagem Completa.

Veja:
Baixe aqui e abra com seu navegador.
Se você clica em uma foto, ela é aberta na lightbox, e esta lightbox possui setas para frente a para tras, a indicação do número da imagem(Na ordem que aparece no html), uma legenda e um botão "Close".
Para colocar as suas fotos, e edita-la, siga este tutorial:
Primeiro, copie o código abaixo e cole no bloco de notas.


&lt;!DOCTYPE html&gt;
&lt;html lang="en-us"&gt;
&lt;head&gt;
 &lt;link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Karla%7CMontserrat"&gt;
 &lt;link rel="stylesheet" href="https://sites.google.com/site/martynsdownloads/home/downloads/screen.css"&gt;
 &lt;link rel="stylesheet" href="https://sites.google.com/site/martynsdownloads/home/downloads/lightbox%20%282%29.css"&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;div class="image-row"&gt;
    &lt;div class="image-set"&gt;
     &lt;a class="example-image-link" href="***" data-lightbox="example-set" data-title="***"&gt;&lt;img class="example-image" src="***"&gt;&lt;/a&gt;
     &lt;a class="example-image-link" href="***" data-lightbox="example-set" data-title="***"&gt;&lt;img class="example-image" src="***"&gt;&lt;/a&gt;
     &lt;a class="example-image-link" href="***" data-lightbox="example-set" data-title="***"&gt;&lt;img class="example-image" src="***"&gt;&lt;/a&gt;
     &lt;a class="example-image-link" href="***" data-lightbox="example-set" data-title="***"&gt;&lt;img class="example-image" src="***"&gt;&lt;/a&gt;
     &lt;a class="example-image-link" href="***" data-lightbox="example-set" data-title="***"&gt;&lt;img class="example-image" src="***"&gt;&lt;/a&gt;
     &lt;a class="example-image-link" href="***" data-lightbox="example-set" data-title="***"&gt;&lt;img class="example-image" src="***"&gt;&lt;/a&gt;
     &lt;a class="example-image-link" href="***" data-lightbox="example-set" data-title="***"&gt;&lt;img class="example-image" src="***"&gt;&lt;/a&gt;
     &lt;a class="example-image-link" href="***" data-lightbox="example-set" data-title="***"&gt;&lt;img class="example-image" src="***"&gt;&lt;/a&gt;
     &lt;a class="example-image-link" href="***" data-lightbox="example-set" data-title="***"&gt;&lt;img class="example-image" src="***"&gt;&lt;/a&gt;
     &lt;a class="example-image-link" href="***" data-lightbox="example-set" data-title="***"&gt;&lt;img class="example-image" src="***"&gt;&lt;/a&gt;

    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
 &lt;/section&gt;
  &lt;script&gt;!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');&lt;/script&gt;
 &lt;/div&gt;

 &lt;script src="http://yourjavascript.com/114144344/jquery-1-11-0-min.js"&gt;&lt;/script&gt;
 &lt;script src="http://yourjavascript.com/334471441/lightbox.js"&gt;&lt;/script&gt;

 &lt;script&gt;
 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-2196019-1']);
 _gaq.push(['_trackPageview']);

 (function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();
 &lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;




Agora, observe no código os campos destacados. Você deve alterar somente eles. Agora acompanhe como alterar cada um deles:
Campos verdes: Ele é o URL da imagem que estará na lightbox. (Veja: "Como saber o URL de uma imagem")
Campos amarelos: Neste campo, insira uma legenda para a imagem.(Opcional)
Mas atenção: Para inserir acentos, 'ç', e caracteres especiais, você precisa usar alguns códigos que eu vou citar no final do tutorial.
Campos Vermelhos: Este é o URL da miniatura da imagem, assim você tem liberdade de colocar uma miniatura e a imagem na lightbox diferente, apesar de que eu não recomendo.

Feito isso, vá em Arquivo, Salva Como..., e depois marque Todos os Arquivos. Digite um nome qualquer e coloque no final do nome .html. Abra o arquivo com seu navegador.
Atenção: Se você deseja adicionar mais ou menos que 10 imagens, basta repetir esta linha e fazer as alterações:

     &lt;a class="example-image-link" href="***" data-lightbox="example-set" data-title="***"&gt;&lt;img class="example-image" src="***"&gt;&lt;/a&gt;
Para colocar acentos nas letras:
HTML&gt; Como inserir acentos

           

Héliton Martyns