Dicas para NET: Como criar uma Lightbox

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.

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

</div>
</div>
</div>
</section>
<script>!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');</script>
</div>

<script src="http://yourjavascript.com/114144344/jquery-1-11-0-min.js"></script>
<script src="http://yourjavascript.com/334471441/lightbox.js"></script>

<script>
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);
})();
</script>

</body>
</html>

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:

Para colocar acentos nas letras:
HTML> Como inserir acentos

Héliton Martyns

Páginas

Novidades DPN!!!

Pesquise algo

3 de abr. de 2014

Como criar uma Lightbox

Nenhum comentário:

Postar um comentário