Como utilizar lightbox do jquery

Posted agosto 18th, 2009 by Willem

Muito simples utilizar este plugin que deixa seu site com um nível mais proficional.

1° -
Pt-br: Incluir os arquivos de css e javascript (jquery e lightbox).
ENG: Include files css and javascript (jquery and lightbox).

<link rel=”stylesheet” type=”text/css” href=”css/jquery.lightbox-0.5.css” media=”screen” />
<script src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/jquery.lightbox-0.5.js”></script>

2° -

Pt-br: Inclua na head este código que ativará o plugin

ENG: Including the head of the code the code below that will enable the plugin

<script type="text/javascript">
$(document).ready(function(){
  $(function() {
    $('#gallery a').lightBox();
  });
});
</script>

3° -

Pt-br: Agora crie uma div com gallery igual id e adicione todos os links, todas imagens que estiverem no <a href=”> irao carregar com filtro preto em volta

ENG: Now create a div with id equal gallery and add all the links, all images that are in <a href=”> will carry around with black filter

<div id="gallery">
  <a href="photos/image2.jpg"><img src="photos/thumb_image2.jpg" alt="" /></a>
  <a href="photos/image3.jpg"><img src="photos/thumb_image3.jpg" alt="" /></a>
  <a href="photos/image4.jpg"><img src="photos/thumb_image4.jpg" alt="" /></a>
  <a href="photos/image5.jpg"><img src="photos/thumb_image5.jpg" alt="" /></a>
</div>

Example

Tags: ,

Filed under:Jquery, Linguagens/Frameworks/Outros, Todos

Leave a Reply