Opção de Lightbox em JQuery.





Download em http://fancybox.net/home



1° Instalação:



importar JS e CSS necessários

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.1.pack.js"></script>

<link rel="stylesheet" href="/css/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />

2° Criar arquivo JS de "configuração", informa quais elementos serão mostrados no lightbox



arquivo JS exemplo:

$("a#single_image").fancybox();





$("#iframe").fancybox({

        'width'                : '40%',

        'height'            : '80%',

        'autoScale'         : false,

        'transitionIn'        : 'none',

        'transitionOut'        : 'none',

        'type'                : 'iframe'

});

quando faço esta declaração


$("a#single_image").fancybox();

estou dizendo que os elementos com id single_image :

<a id="single_image"

serão exibidos dentro do lightbox



o exemplo "iframe" mostra a utilização do mesmo método descrito acima, porém com alguns parâmetros, ver em: http://fancybox.net/api







Utilizar Slideshow:



definir no arquivo de JS de configuração com a seguinte chamada:

$("a.group").fancybox({

        'transitionIn'    :    'elastic',

        'transitionOut'    :    'elastic',

        'speedIn'        :    600,

        'speedOut'        :    200,

        'overlayShow'    :    false

});

definir a propriedade 'rel' no grupo de elementos de deseja exibir em slideshow:

(utiliza apenas a propriedade 'rel' para definir um grupo de imagens)

<a id="group_elements" rel="group">Imagem 1</a>

<a id="group_elements" rel="group">Imagem 2</a>

<a id="group_elements" rel="group">Imagem 3</a>


<a id="group_elements" rel="group">Imagem 4</a>

Fancybox também disponibiliza recursos de callbacks e Ajax,



ver mais em:

http://fancybox.net/home



arquivo com exemplos de configurações do Fancybox (exemplos da página home do Fancybox):



http://www.fancybox.net/js/web.js?m=20100203