BlogBlogs.Com.Br
Clique aqui para assinar o Feed
Participe da comunidade TheCodeBr no Orkut
Siga o TheCodeBr no Twitter

domingo, 2 de maio de 2010

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.


5 comentários:

caren disse...

Como eu faço para proteger as fotos de serem copiadas ou salvas? Eu uso marca d´água mas queria proteger. Dá pra fazer isso com essa galeira? Estou na maior dificuldade de achar uma galeria simples e que não permita salvar as imagens. Eu quero colocar uma galeria no meu blogger. Se puder me ajudar te agradeço! Parabéns pelo teu blog!
Caren

Jonatas Freitas disse...

Olá, 100% é impossivel mais tem maneiras com JavaScript de desabilitarmos o botão direito do mouse e as teclas assim dificultando um pouco, irei postar um tutorial sobre isto, abraços e obrigado.

Moacir Junior disse...

Olá amigo.
Gostei muito do seu tutorial.
Poderia tira uma dúvida?
Como fasso pra abilitar a função "próxima foto, e foto anterior"?
Obrigado!

Anônimo disse...

Olá moacir, muito simples basta adicionar [roadtrip], ficaria assim: rel="lightbox[roadtrip]"
Gostaria de saber se têm como aumentar a fonte do título?

Vivi.Alamo disse...

Olá.
Gostei do seu tutorial.
Poderia tira uma dúvida?
Como fasso pra abilitar a função "próxima foto, e foto anterior"?
Obrigado!

Postar um comentário


----------------------------------------------------

About me (+)

Jonatas Freitas

Este blog surgiu da minha necessidade de passar meu conhecimento adiante e tornar esta web ainda mais bonita e funcional.

Meus artigos serão direcionados ao desenvolvimento web em geral.
Tutoriais, dicas, notícias e boas práticas sobre: Html, css, JQuery, action script, c# e outros.

Boa sorte nos estudos.

E-mail:
jonatas.freitas@live.com

----------------------------------------------------


Download:


----------------------------------------------------


----------------------------------------------------

Chat Rápido:


----------------------------------------------------

Contador:

Free Hit Counter
----------------------------------------------------

Tools:

Parceria.info - Divulgue seu Site
Technology Blogs

Free SEO Tools

{thecodebr} 2010 {/thecodebr}