Tutorial LightBox 2
Como instalar a galeria de imagens feita em JavaScript
Olá, vamos a mais um tutorial do nosso querido JavaScript, neste post, vamos conhecer o famoso LightBox, um lindo script para galeria de imagens e muito fácil de usar e personalizar.Quanto mais evolui a nossa internet, mais os plugins externos (Flash, Silverlight, etc..) estão ficando para traz, os motivos são os mais diversos possíveis. Os desenvolvedores estão cada vez mais usando JavaScript para a interação do usuário com os sites, pois só existem vantagens, algumas delas são:
*Não necessita instalação de plugins de terceiros.
*Compatível com todos os sistemas operacionais.
*Compátivel com todos os browser's.
*Alto nivel de personalização.
*Uso sem restrição de direitos autorais.
*Facil desenvolvimento.
*Desenvolvimento em muitas IDE's(Programas) de programação, inclusive o bloco de notas.
entre outros benefícios, bom já escrevi de mais, vamos ao que interessa, clique no lei mais para visualizar o tutorial.
VEJA AQUI O RESULTADO FINAL DESTE TUTORIAL,
Tutorial:
Nosso primeiro passo, é baixar o script neste link, note que é um arquivo .zip, neste arquivo vamos encontrar 3 pastas(css, images e js) e um arquivo index.html, que contém exemplos, não vamos entrar em detalhes neste post sobre eles.Agora, vamos criar uma pasta chamada "ExemploLightBox", logo em seguida, vamos descompactar o arquivo .zip baixado e copiar todas as pastas(menos o arquivo index.html) para o diretório que acabamos de criar, a "ExemploLightBox".
Agora, vamos selecionar nossas imagens que vai compor nossa galeria, escolhi estas 4, clique nelas para baixar ou use as que desejar, porém, não use imagens com altura ou largura muito grande, para não "estourar" no browser.
Com as nossas imagens em mãos, vamos criar uma nova pasta dentro do diretório "ExemploLightBox" com o nome de "fotos", cole as imagens escolhidas para detro da nova pasta, agora, vamos criar o nosso arquivo html de acordo com o código abaixo,
<html> <head> <title> .:: thecodebr.blogspot.com - Tutorial LightBox 2 </title> <script type="text/javascript" src="js/prototype.js"> </script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"> </script> <script type="text/javascript" src="js/lightbox.js"> </script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> </head> <body bgcolor="#FF6600"> <center> <br> <br> <br> <br> <a href="fotos/courtney_landscape.jpg" rel="lightbox"> <img src="fotos/courtney_landscape.jpg" width="100" height="66" border="0"/> </a> <a href="fotos/immersion.jpg" rel="lightbox"> <img src="fotos/immersion.jpg" width="100" height="66" border="0"/> </a> <a href="fotos/steampunk-landscape.jpg" rel="lightbox"> <img src="fotos/steampunk-landscape.jpg" width="100" height="66" border="0"/> </a> <a href="fotos/vuf48.jpg" rel="lightbox"> <img src="fotos/vuf48.jpg" width="100" height="66" border="0"/> </a> </center> </body> </html>
Comentando as linhas acima:
Não vou entrar muito em detalhes sobre a estrutura html, que é padrão, bom, na linha 06 linkamos o arquivo javascript do lightbox, a propriedade "type" define que tipo é este arquivo, no nosso caso é "text/javascript", a conhecida proriedade "src" define onde está o arquivo chamada, da linha 09 á 13 escrevemos as mesmas coisas, porém chamando outros arquivos, todos do memso tipo. Na linha 15, linkamos a folha de estilos do lightbox. Pulando para a linha 27, com a tag "a" podemos definir um link para quase todos os controles HTML, a proriedade "href", define o caminho para onde a página vai quando clicarmos no controle que está dentro da tag, a proriedade "rel" que está definida com o valor "lightbox" é a que faz a mágica do lightbox, na linha de baixo a 28, chamamos a tag "img", com esta tag, chamamos uma imagem, de qualquer tamanho e lugar, como já sabemos, a proriedade "src" define o caminho da imagem seguido do nome do arquivo, a propriedade "width", define a largura ou comprimento que está imagem vai ter, a propriedade "height" define a altura da nossa foto, a proriedade "border", define se a nossa imagem vai ter ou não bordas, todas as 3 ultimas proriedades citadas anteriormente só aceitam numeros seguidos do valor de medida, por padrão, usamos somente a unidade "px" que mede em pixels, ou deixamos em branco que dai pega automatico.
Nas linhas abaixo, fizemos a mesma coisa porem só alteramos a propriedade "src" das tags "a" e "img" para pegar outras imagens.
Bom, neste link, você encontra o resultado final do nosso arquivo, simples não, muito facil é um ótimo resultado, dando um requinte muito especial em um site.
Se você já é um desenvolvedor um pouco avançado, poderá tambem personalizar o seu script do lightbox, editando os arquivos "lightbox.css" e o "lightbox.js" e também as imagens que estão dentro da pasta "images", porém se você não se sentir seguro em editar estes arquivos, é melhor não mexer para não causar mal funcionamento do script, mais não se preocupe, em um outro post, estarei demonstrando como personalizar nosso lightbox.
Bom por enquanto é isso, até a próxima e bons estudos, qualquer duvida poste um conetário, abraços.
Se você já é um desenvolvedor um pouco avançado, poderá tambem personalizar o seu script do lightbox, editando os arquivos "lightbox.css" e o "lightbox.js" e também as imagens que estão dentro da pasta "images", porém se você não se sentir seguro em editar estes arquivos, é melhor não mexer para não causar mal funcionamento do script, mais não se preocupe, em um outro post, estarei demonstrando como personalizar nosso lightbox.
Bom por enquanto é isso, até a próxima e bons estudos, qualquer duvida poste um conetário, abraços.
Postagens
3 comentários:
Gostei bastante e me ajudou muito, mas como faço para colocar o "próxima imagem ou imagem anterior" ?
Talvez esse link te ajude..
http://www.huddletogether.com/projects/lightbox2/#example
Valeu cara! ajudou muito :)
Postar um comentário