SummArg | Cursos y recursos para webmasters

25/04/2012

Ventanas modal y efectos lightbox para imágenes con jQuery Fancybox

jQuery Fancybox no es una novedad, pero si resulta una herramienta fantástica para el diseñador web. Tiene dos aplicaciones: Por un lado puede servir como cualquier script del tipo “Lightbox” para imágenes y galerías de imágenes, y por el otro es un excelente script de ventanas modal.

Su sitio web es claro en cuanto a la documentación básica para comenzar a utilizar el plugin, también podemos acceder a un listado completo de funciones y finalmente el autor publica varios trucos que podemos realizar usando su script (abrir una ventana al cargar la página, aplicar estilos diferentes a los títulos, mostrar una caja de login o con un video YouTube, etc).

Para insertar el plugin jQuery en nuestro proyecto primero lo descargamos desde su sitio web y lo colocamos dentro de una carpeta /fancybox/ en nuestro proyecto. Entre etiquetas <head></head> insertamos:

<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>

Luego indicamos al script el id que lo activará y le pasamos los parámetros que querramos.

<script type="text/javascript">
$(document).ready(function() {
 $("a#modal").fancybox({
 'width' : '75%', /* ancho */
 'height' : '75%', /* alto */
 'autoScale' : false, /* escalar automaticamente */
 'type' : 'iframe',
 'overlayOpacity' : 0.7,
 'overlayColor' : '#000'
 });
 });
</script>

Y finalmente entre etiquetas <body> colocamos el link. Nosotros queremos que se abra el home de nuestro sitio web.

<a id="modal" href="http://www.summarg.com">SummArg!</a>

En nuestro caso queremos que la ventana modal se abra al cargar la página y sin necesidad de clickear, así que añadimos lo siguiente:

<script type="text/javascript">
jQuery(document).ready(function() {
 $("a#modal").trigger('click');
});
</script>

Y ocultamos el texto de nuestro anchor, ya que no es mas necesario.

<a id="modal" href="http://www.summarg.com" style="display:none;">SummArg!</a>

Descarga y Demo

Dejar un comentario

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: jQuery Fancybox no es una novedad, pero si resulta una herramienta fantástica para el diseñador web. Tiene dos aplicaciones: Por un lado puede servir como cualquier script del tipo “Lightbox” para imágenes y galerías de imáge…..

  2. Paulo Silva

    que tal tengo una inquited en una misma página tengo que utilizar dos js uno de parallax y el otro de ligthbox pero no me funciona juntos que puedo hacer

Dejar un comentario