Customizando seu LightBox 2 - Parte 1

Neste tutorial vamos aprender como customizar o script de galeria de imagens, nosso LightBox 2

PARA SABER COMO INSTALAR O LIGHTBOX 2 CLIQUE AQUI

Todos nós sabemos que o LightBox 2 é um script free, ou seja, todos os desenvolvedores do mundo podem utiliza-lo em seus desenvolvimentos. Com este cenário surge um questão importante, se você utilizar a versão padrão em seu projeto pode ter o mesmo script com o mesmo layout igual a milhões de sites. Por este motivo, os desenvolvedores criaram o projeto pensando em sua personalização, assim construíram um script com bom entendimento para outros personaliza-lo.

Vamos ao que interessa,

AO TUTORIAL,clique no leia mais para ver o post completo.



Neste tutorial vamos aprender a fazer as seguintes personalizações.

1. Trocar as imagens dos botões.
2. Personalizar o fundo overlay.

1- Trocando as imagens dos botões.

Nosso Lightbox 2 vem com todos botões ou imagens de comando em inglês e isto em uma página do Brasil não é muito legal, para traduzi-las é simples, em nosso script na pasta "images" temos todas as imagens usadas, para altera-las podemos simplesmente editar os arquivos e adaptar com cores e fontes, porém não devemos aumentar o tamanho das imagens, apenas editar dentro do tamanho padrão e também devemos manter o nome do arquivo para não termos que alterar o código do script.

2- Personalizando o fundo overlay da imagem.

O fundo overlay do LightBox é aquele que fica com uma certa transparência, que por padrão é preta e tem o "overlayOpacity" com o valor de 0.8. Para alterarmos a cor é easy, abra o arquivo "lightbox.css" que está dentro da pasta "css", na última linha da folha de estilos tem a chamada "#overlay" com vários atributos, vamos mudar apenas o valor do atributo "background-color" que está por ultimo.

Vamos alterar a intensidade da transparência, abra o arquivo "lightbox.js" que está dentro da pasta "js", altere o valor da variável "overlayOpacity" que está nas primeiras linhas, o valor varia entre "0.0" e "1.0", sendo 1.0 sem transparência.

Neste post ficamos por aqui, em breve teremos mais, qualquer dúvida comentem, abraços.