prettyPhoto – LightBox para jQuery
Postado por: Pedro Rogério emTodo desenvolvedor um dia já utilizou o famoso efeito Lightbox ao menos uma vez em seus projetos, seja para mostrar uma galeria de fotos, ou para mostrar formulários de login, objetos multimídia. Ele se tornou uma bela alternativa ao popup. Para os utilizadores do framework jquery existe uma alternativa chamada prettyPhoto. Sua utilização é muito simples, basta efetuar o download do jquery, e dos arquivos do prettyPhoto. Exemplo de como adicioná-lo na página:
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
Depois basta adicionar o atributo rel=”prettyOverlay” em sua tag que o JavaScript executa todo o processo. Exemplo:
<a href="images/fullscreen/1.jpg" rel="prettyOverlay" title="Descrição da Imagem">IMAGEM 1</a>
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Eu uso o prettyphoto pra quando iniciar o meu site ele exibir uma imagem por ele..
utilizo o script
$(document).ready(function(){
$(“a[rel^='prettyPhoto']“).prettyPhoto();
$.prettyPhoto.open(‘http://www.link.com.br/image.jpg','','‘);
});
para exibir, porem em NENHUM IE ele funciona.. diz que nao existe a imagem.. alguma sugestão/
Na verdade, além das funções acima, pra funcionar minha galeria tive que incluir mais esse script despois da div das imagens:
$(document).ready(function(){
$(“.gallery:first a[rel^='prettyPhoto']“).prettyPhoto({animationSpeed:’slow’,theme:’light_square’,slideshow:2000, autoplay_slideshow: true});
$(“.gallery:gt(0) a[rel^='prettyPhoto']“).prettyPhoto({animationSpeed:’fast’,slideshow:10000});
$(“#custom_content a[rel^='prettyPhoto']:first”).prettyPhoto({
custom_markup: ”,
changepicturecallback: function(){ initialize(); }
});
$(“#custom_content a[rel^='prettyPhoto']:last”).prettyPhoto({
custom_markup: ”,
changepicturecallback: function(){ _bsap.exec(); }
});
});
nao consigo fazer o prety photo funcionar no internet explorer
oque eu faço tentei o script acima mas nao funfo”
this is of challenge #2
Why did you join the blogging challenge:
I join the blogging challenge because i wanted to learn new things of other countries and make new friends
What do you hope some of the activities include?
i hope that some activities are interacting with other people
Finally, what do you hope to get out of the challenge by the end of the ten weeks?
I hope that more people visit my blog and put many good comments