Usar FancyBox en Blogger (Plugin ventanas modales)

Hace poco hablamos sobre cómo crear una ventana modal para el blog mediante CSS y Javascript, si bien era una alternativa bastante útil, estaba muy limitada.

Por suerte hay plugins que se encargan de añadir llamativas ventanas modales mediante jQuery, uno de estos plugins es Shadowbox, pero para los que desean probar una buena alternativa pueden probar con FancyBox, un sistema de ventanas modales un poco distinto y a su vez mas llamativo que el anterior.

Puedes ver los siguientes ejemplos para comprobar la funcionalidad del plugin presionando en las siguientes imágenes:

Para imágenes únicas:




Para galería de imágenes (Incluye botones de navegación):





Recuerda que es posible variar siempre que quieras la apariencia y las animaciones de FancyBox.

El tutorial:

Es importante que sepas que puedes configurar el script a tu antojo, yo usé los valores por defecto que venían en la documentación de FancyBox para mostrarles las distintas configuraciones que son aplicables al plugin.

Paso 1: Instalando jQuery, los scripts y CSS en la plantilla:


En "Diseño | Edición HTML" deberás buscar la siguiente línea:

</head>

Arriba de esta pega el siguiente código:

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

<script src='http://dl.dropbox.com/u/28164309/AyudaBloggers/jquery/Fancybox/jquery.mousewheel-3.0.4.pack.js' type='text/javascript'></script>
<script src='http://dl.dropbox.com/u/28164309/AyudaBloggers/jquery/Fancybox/jquery.fancybox-1.3.4.js' type='text/javascript'></script>
<link href='http://dl.dropbox.com/u/28164309/AyudaBloggers/jquery/Fancybox/jquery.fancybox-1.3.4.css' media='screen' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
$(document).ready(function() {

 /* Class para imágenes individuales*/

 $("a.singular").fancybox({
                 'titlePosition': 'over'
 });

 /* Class para imágenes en grupo */

 $("a.plural").fancybox({
      'titlePosition' : 'over',
  'transitionIn' : 'fade',
  'transitionOut' : 'fade'
 });

/*Acá pegaremos configuraciones extras*/

});
</script>

Si ya tienes jQuery omite el código destacado con color.

Guarda los cambios y listo.

Paso 2: Usando FancyBox:

Insertar una ventana modal con FancyBox es muy sencillo, basta con crear un enlace que contenga la class que hemos creado para la función (En este caso he creado 2 funciones, una con class "singular" y otra con class "plural"):

<a class="singular" title="Título" href="URL-DE-LA-IMAGEN-O-URL"><img border="0" src="URL-IMAGEN-PREVIA" width="200px" height="auto" /></a>

Para usar varias imágenes en forma de grupo, basta con agregar el valor rel="" a todos los enlaces y a estos le asignaremos el mismo rel:

<a class="plural" rel="grupo1" title="Título" href="URL-DE-LA-IMAGEN-O-URL"><img border="0" src="URL-IMAGEN-PREVIA" width="200px" height="auto" /></a>
<a class="plural" rel="grupo1" title="Título" href="URL-DE-LA-IMAGEN-O-URL"><img border="0" src="URL-IMAGEN-PREVIA" width="200px" height="auto" /></a>

Paso 3: Creando mas configuraciones para FancyBox:

Como dije anteriormente, he creado 2 configuraciones para FancyBox, pero tu puedes añadir más, para ello es necesario elegir una class y aplicarla al script:

$("a.clase-a-elegir").fancybox({
  'transitionIn' : 'elastic',
  'transitionOut' : 'elastic',
  'speedIn'  : 600, 
  'speedOut'  : 200, 
  'overlayShow' : false
 });

Este código deberá ir en el lugar que he señalado en el paso 1 de color verde.

Para usar esta configuración deberás establecer la class de la imagen:

<a class="clase-a-elegir" title="Título" href="URL-DE-LA-IMAGEN-O-URL"><img border="0" src="URL-IMAGEN-PREVIA" width="200px" height="auto" /></a>

Importante:

• Para conocer las distintas configuraciones que puedes hacer mediante FancyBox, puedes visitar la página web (Documentación) y descargar el script el cual viene con un demo con el source code para probar distintas formas de configuración.