Sigueme por RSS! RSS

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.

demo descarga


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

2 comentarios: Suscribete a los comentarios por RSS

Unknown

Hola Reinaldo, una consulta, cómo puedo cargarlo con codeigniter?, tengo un boton en una vista y necesito que al hacer click en él se carge en el fancybox una vista determinada.
Gracias!
Hector

Reinaldo Cassiani (cass)

Hola. Básicamente la integración es tal cual indica el tutorial, lo que cambia es que llamas a la vista en la zona del div que posteriormente se muestra, ejemplo:

<div style="display: none;">
  <div id="div_inline" style="height: 100px; overflow: auto; width: 400px;">
  <?php $this->load->view('la_vista_que_deseas_cargar'); ?>
  </div>
</div>

Lo demás es es ir ajustando usando CSS y no deberías tener mayor problema.

Publicar un comentario

- Los comentarios están siendo moderados y serán publicados en la brevedad posible.