Galeria CSS com Efeito Lightbox

Neste tutorial, você aprenderá como criar uma galeria simples, com um efeito lightbox em CSS e jQuery. Fazer Galeria de Imagens. Faça um Bloco Mostrar Lightbox. Use o código Stylesheet para posicionar e esconder o Lightbox display block, este funciona para mostrar e esconder o efeito da galeria. Use Código jQuery de Efeito Lightbox

Por Programação Pular para comentários

Neste tutorial, voc? aprender? como criar uma galeria simples, com um efeito lightbox em CSS e jQuery.

Suporte navegador ? Chrome, Firefox, Opera, Internet Explorer
Linguagem ? CSS3, jQuery e HTML4
Dificuldade ? Intermedi?rio
Tempo de conclus?o ? 20 minutos

Preview do resultado: - Aqui

http://www.oficinadanet.com.br//imagens/coluna/3145/lightbox.jpg


Passos para Implementar o Efeito Lightbox


N?s vamos seguir estes passos para aplicar as fontes para sua p?gina.

Etapa 1: Fa?a o download e inclua jQuery no HTML

  • Fazer Galeria de Imagens;
  • Fazer um bloco Mostrar o Lightbox;
  • Usar o c?digo Stylesheet para posicionar e esconder o Lightbox display block, este funciona para mostrar e esconder o efeito da galeria;
  • Usar jQuery para o Efeito Lightbox.


Passo 1: Download & Incluir jQuery
jQuery ? uma maneira r?pida e concisa Biblioteca JavaScript que simplifica percorrer documentos HTML, manipula??o de eventos, anima??o e intera?es Ajax para desenvolvimento web r?pido. jQuery ? um leve "escrever menos, fazer mais" biblioteca de JavaScript. Duas vers?es do jQuery est?o dispon?veis para download: uma minified e um descompactado (para depura??o ou leitura). Ambas as vers?es podem ser baixadas em: jQuery.com.

Teremos que incluem jQuery dentro do < head > tags.
Aqui est? o c?digo:

    


H? uma maneira alternativa para incluir Biblioteca jQuery na p?gina web sem ter que baixar arquivo jQuery. Isto pode ser feito pela adi??o de src atributo para o script tag.
Definir o valor de src atributo como "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";

   


Etapa 2: Fa?a a Galeria de Imagens
Todas as imagens est?o dentro de um ?nico div elemento. Cada img elemento deve ter class atributo com "miniatura" de valor. Vamos usar esta class mais tarde com jQuery para acionar o Efeito Lightbox.
Galeria CSS com Efeito Lightbox  Galeria CSS com Efeito Lightbox  Galeria CSS com Efeito Lightbox


Passo 3: Fa?a Lightbox Display Block
O Bloco de exibi??o Lightbox consistem em duas div elementos. Primeira div elemento com id="popup" ter uma cor de fundo preto e se estende por toda a tela. Um segundo com id="center" est? dentro do primeiro div elemento onde a imagem clicado ser? exibida. A img tag com id="lightbox" ser? substitu?do pela imagem que voc? clique na galeria de imagem. A img tag com id="close" ser? usado como o bot?o de fechar para o Efeito Lightbox.
    


Passo 4: Use o c?digo CSS para posicionar e esconder o Lightbox Display Block
A Lightbox ? vis?vel apenas quando algu?m clica em qualquer imagem na galeria. Resto do tempo ele est? escondido. N?s vamos usar CSS display propriedade para esconder a Lightbox. Aqui est? os c?digos de estilo CSS para Lightbox Display Block.
 


A explica??o
Para < div id="popup" >
Linha 3? #popup{
Id nome Selector para a Lightbox principais div.

Linha 4? background:#000000;
Cor de fundo preto para < div id="popup" >.

Linha 5 e Line 6? height: 100% ; width: 100% ;
Altura e largura ? definida como 100% para cobrir toda a tela.

Linha 7? position: fixed;
Esta propriedade ser? a posi??o do div com id="popup" em rela??o ? janela do navegador. Para posicionar o elemento no mesmo lugar na tela, mesmo que voc? role para cima / baixo da p?gina.

Linha 8 e Linha 9? top: 0 ; left: 0 ;
Para posicionar o < div id="popup" > a partir do canto superior esquerdo.

Linha 10? : display: none ;
Para ocultar o < div id="popup" > , propriedade de exibi??o ? definido como none. Por padr?o, essa div popup n?o ser? exibido para o usu?rio.


[Para < div id="center" >]
Linha 12? #center{
O seletor id da div . A imagem clicada ser? mostrada aqui.

Linha 13? border: 10px solid #121212 ;
Para 10 cor s?lida estilo de pixel Border cinzento escuro.

Linha 14? margin: 6% auto ;
Para posicionar a div id="center" no centro da tela.

Passo 5: Use o c?digo jQuery para o Efeito Lightbox
O jQuery ir? detectar clique sobre a imagem dentro da galeria de imagens.
Em seguida, ele substitui o valor de src atributo do < img id="lightbox" src="..." > < img id="lightbox" src="..." > com o src da imagem clicada na galeria.

O C?digo jQuery.



A explica??o

Linha 3> $ (document). Ready (function () {
Para executar o c?digo quando uma p?gina ? processada completamente.

[Para Ativa??o Lightbox]
Linha 4? $(.thumbnail).click(function(){
Para detectar todos os cliques sobre a imagem com class="thumbnail" na Galeria de Imagens.

Linha 5? var address= $(this).attr(src);
Atribui o src valor da imagem clicada para o address da vari?vel.

Line 6? $(#popup).fadeIn(slow);
O < div id="popup" > ir? desaparecer lentamente para o ponto de vista.

Linha 7? $(#lightbox).attr(src,address);
Isto ir? substituir o src atributo da imagem com id="lightbox" com o valor atribu?do ao address da vari?vel.


[Para desativa??o Lightbox]
Linha 9? $(#close).click(function(){
Para detectar clicar em um elemento com id="close" .

Linha 10? $(#popup).fadeOut(fast);
Para desativar a Lightbox tendo div id="popup" com um efeito fadeout.

Resultado: - Aqui
http://www.oficinadanet.com.br//imagens/coluna/3145/lightbox.jpg


Fa?a o download do c?digo abaixo:
csslightbox.zip

Compartilhe com seus amigos:
Thauan Almeida
Thauan Almeida É desenvolvedor Flash, Joomla e Programação. E aqui na Oficina da Net mostrará tutoriais sobre a ferramenta da Adobe e os outros citados acima.
FACEBOOK //
Quer conversar com o(a) Thauan, comente:
Carregar comentários
Você sabia que o Oficina da Net tem um canal no Youtube?
Sim, sou inscrito
Não sabia, vou me inscrever
Não sabia, mas não tenho interesse no Youtube