By Lecca – Letícia Pontes » Arquivo » Tutorial Lightbox

Vídeo: Diário da ortognática – Pós-opertatório

Semana passada postei…

View more

Receita: Ratatouille

Lá em 2007…

View more

Dica de série: Unbreakable Kimmy Schmidt

Ontem foi meu…

View more

Comprei na china: Pincéis de maquiagem

Fazia um bom…

View more

Tutorial Lightbox

Lightbox Image Viewer 2,0 desenvolve Lightbox Image Viewer:
Serve para abrir as imagens com um efeito especial onde a imagem a ser aberta se sobressai acima do blog.

Veja exemplo:



clique para ampliar

1º – Baixar os arquivos a serem hospedados e colocados abaixo nos seus respectivos endereços:
Baixe os arquivos aqui:Lightbox 2.03

Coloque estes arquivos entre o seu <head> </head>do seu html.
Não esqueça de fazer download e susbtituir os links abaixo pela sua própria hospedagem, deixei assim para que vocês possam testar com todos os arquivos já hospedados.


Onde estão as imagens a serem substituidas:

No lightbox.js
No lightbox.css
Procure pelas imagens que hospedei e substitua pela sua hospedagem.

Precisara ter no começo das sua página caso não tenha para funcionar corretamente:


Dica: para pesquisar e localizar nomes use CRTL+F que localiza mais rápido.

Precisara também hospedar todas as imagens em seu hosting, tambéms os arquivos, substitua pelos meus arquivos que estar lá, deixei para vcs localizarem no lightbox.js porque dar um pouquinho de trabalho para localizar.

Crie sua miniatura e substitua e use os códigos abaixo :


O atributo rel é obrigatório, a fim de ativar o efeito especial para as imagens

O ” title ” Permite que ao abrir a imagem apareça então uma descrição da mesma.
define e acrescenta uma legenda abaixo da imagem ampliada.


Lightbox versão 2 também acrescenta a capacidade de agrupar vários links imagem em conjunto.

Use esntão esse códigos para ter sequências na visulização de suas imagens.
Como você pode ver, a imagem tem ligações a um grupo juntos, você muda o “rel” pelo r “luz [Roadtrip]”, onde “Roadtrip” vai ser o responsavel pelas imagens em sequencia conforme clicada .


Página que aceitam formatos js :

http://www.ripway.com

http://www.ueuo.com

É isso aí!Aproveite este fantástico script. Lembre-se, há também lightbox V1 se você não precisa do recurso de agrupamento é só um efeito elegante para suas imagens.

Visite página original dynamicdrive.com


Comentar

Comentários

Anonymous | 26-05-2009 às 14:35 | Responder

Muito bom, gostei.

Rhay Espíndola | 17-08-2009 às 00:04 | Responder

Eu não consegui…não aparece com uma outra pagina encima do blog…aqui tabm n ta funcionando =/

Rhay Espíndola | 20-08-2009 às 10:21 | Responder

Lecca Depois que eu fiz tudo dinovo deu certo…só que agora não ta dando dinovo nem la no blog nem aki no tuto…hahahha…sera que esse lightbox sai do ar as vezes?
Beijos

Regiana | 16-05-2010 às 19:13 | Responder

Oi Lecca ..gostaria de mudar o meu blog..mais ou menos nas cores e estilo do seu..mas confesso que estou com muitas dificuldades não sei nem por onde começar..será que tem como vc arrumá-lo para mim?de repente a gente acerta ou coisa assim..Por favorrr please!!

Anonymous | 16-02-2013 às 01:07 | Responder

This page certainly has all the information and facts I wanted about this subject and didn’t know who to ask.

Feel free to visit my website … baby girl pictures