Plugin Fancybox de JQuery

Si te gustó el plugin Lightbox de JQuery, quizás también te interese el FancyBox, que, aparte de conseguir el efecto al estilo lightbox, permite visualizar además de imágenes, contenido HTML y multimedia.

Características:

* Permite mostrar imágenes, elementos HTML, SWF, Iframes, etc.
* Personalizable a través de la configuración y CSS.
* Si se incluyen las funciones para el mouseover, puedes cambiar las imagenes usando la ruedita del mouse.
* Trabaja con transiciones y sombras.

Modo de uso:

1.- incluyes el JQuery, el Fancybox y el CSS antes de </head>:

<!-- JQuery --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>

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

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

2.- indicamos a que imágenes se le aplicaran efectos (y cuales serán esos efectos), haciendo uso de los selectores.

a.- lo principal es inicializar el plugin una vez se cargue la página:

$(document).ready(function() {

  // aplicando efectos a todos los enlaces
  $("a").fancybox();

});

b.- aplicando efectos a determinadas imagenes:

$("a#id_de_la_imagen").fancybox();
$("a#id_de_la_imagen2").fancybox();

c.- agregando efectos a un grupo de imágenes:

$("a[rel=grupo_de_imagenes]").fancybox({
   // efectos ..
});

se aplicaría a todos los enlaces con atributo rel="grupo_de_imagenes".

d.- mostrando el contenido de elementos divs (texto inline):

$("#inline").fancybox({
   'titlePosition': 'inside'
});

y dentro del body:

<a href="#div_inline" id="inline" title="Titulo">Texto Inline</a>

fíjate que con el atributo href enlazamos al elemento con id div_inline, que en este caso es un div:

<div style="display: none;">
  <div id="div_inline" style="height: 100px; overflow: auto; width: 400px;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit 
tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante 
ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet 
ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium 
varius, cursus ac tortor. Vivamus fringilla congue laoreet.
  </div>
</div>

e.- efecto iframe: armamos un enlace con id cualquiera

<a id="idiframe" href="http://www.cassianinet.blogspot.com">Iframe</a>

y le agregamos los efectos correspondientes:

$("#idiframe").fancybox({ 
  'width': '75%', 
  'height': '75%', 
  'autoScale': false, 
  'transitionIn': 'none', 
  'transitionOut': 'none', 
  'type': 'iframe' 
});

Puedes encontrar ejemplos completos en la documentación oficial.

Si agregamos la extensión mouseover que viene con el zip de descarga, podemos conseguir que las imagenes en la galaría cambien usando la ruedita del mouse.

Sitio oficial: fancybox.net