FancyBox: Una alternativa a lightbox y otra opción para ventanas modales.

Seguimos con el mundo de los plugins de jQuery, el productivo framework libre de javascript que, con pocas líneas, te permite mejorar la experiencia del usuario, poner la página bonita y quedar como un Master del Universo delante de tu jefe.

Previamente en este blog hablamos de cómo hacer ventanas modales de forma sencilla con jQueryUI y de cómo trabajar con el plugin Lightbox. ¿Y si te dijera que hay un plugin que incorpora ambas funcionalidades? Sí, un plugin que te permite crear ventanas modales, mostrar galerías de fotos flotando sobre la web original, cargar iFrames (con todo lo que ello te puede proporcionar: vídeos de youtube, metacafe, vimeo, juegos o funcionalidades en flash…). Yo lo he utilizado para una ventana modal y para un flash. Podéis ver varias demos en esta página y descargarlo desde esta.

Como supongo que estáis deseando una explicación, allá voy: Lo primero, tras descargar es copiar en vuestro servidor el archivo .js (para entornos de producción mejor la versión “pack”, que está comprimida, para experimentar usad la versión normal con el código legible), las imágenes, el .css (ojo, importante, si las imágenes y el .css no van a estar guardadas en la misma carpeta revisad las url de las mismas en el css, porque este viene pensado para que estén así) e incluirlos en la cabecera de la página donde queréis cargarlas. Para su correcto funcionamiento requiere que incluyáis una versión de jQuery superior a la 1.6, así que echad un ojo que todavía hay mucha gente funcionando por ahí con versiones viejas.

Una vez incluída la librería veamos dos ejemplos. Si quisiéramos usarlo para ampliar una imágen tipo facebook (como haría el lightbox) el código sería tal que así:
HTML:

<a class="ejemplo" href="../image/foto1.jpg" title="EjemploImagen"><img src="../image/foto1thumb.jpg"  /></a>

Explicación rápida: creamos un link, le damos una clase (que en el javascript utilizaremos para acceder al mismo, también podría usarse un id, pero suponiendo un caso real lo habitual son clases porque suele trabajarse con varias imágenes) y hacemos que la referencia apunte a la imagen que queremos cargar. Luego, para mostrar en el menú de la página, cargamos una versión minimizada de la imagen.

<script type="text/javascript">  
  $(document).ready(function(){  
      $(".ejemplo").fancybox({ });  
  });  
</script>  

Y sólo con esa línea de javascript ya tienes el efecto logrado.

Ahora imaginemos que queremos abrir una ventana modal con un aviso (por ejemplo, unas condiciones de uso, que es lo que tuve que hacer yo). La cosa empezaría con un HTML tal que así:

<!-- Aquí el link a la ventana modal -->
<a class="ejemplo" href="#inline1" title="Lorem ipsum dolor sit amet">Inline</a>
<!-- Aquí lo que queremos que se muestre en la ventana modal -->
<div id="inline1" style="display: none;">
   <h3>Etiam quis mi eu elit</h3>
   <p>
   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. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc.
   </p>
</div>

Y con un javascript tal que

$(document).ready(function(){			
	$(".ejemplo").fancybox({
		maxWidth	: 400,
		maxHeight	: 300,
		fitToView	: false,
		width		: '70%',
		height		: '70%',
		autoSize	: false,
		closeClick	: true,
		openEffect	: 'none',
		closeEffect	: 'none'
	});		
})

En este caso definimos varios efectos. Las opciones son múltiples y variadas, por lo que si quieres sacar el 100% del jugo de este plugin lo que te recomiendo es que le pegues un ojo a la documentación del proyecto en su página oficinal.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s