FancyBox

Por Bernardo
7 junio, 2012 - 17:02

Categoría : CSS
Etiquetas : ,

Comentarios : No hay comentarios

Artículos Relacionados


¿Qué es FacnyBox?

FancyBox es una herramienta para la visualización de imágenes que flota sobre una página web. Está construido con la librería jQuery bajo licencia MIT y GPL. Que podemos utilizarlos

Características

  • Puede mostrar imágenes, elementos HTML, vídeos SWF, iframes y las solicitudes también se Ajax
  • Personalizable a través de la configuración y CSS
  • Grupos relacionados con los elementos y añade navegación.
  • También es posible utilizar eventos para la rueda del ratón
  • Transiciones
  • Añade una gota de sombra agradable con el tema del zoom

Como utilizar

1. Primero, asegurarse que utilizas un  DOCTYPE válido

El obligatorio para que FancyBox funcione correctamente

2. Incluir los ficheros JS necesarios

Descarga jQuery desde CDN (Content Delivery Network), recomendado para disponer de la última versión revisada.

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

El primer fichero se descarga directamente del api de google y el segundo fichero tienes que copiarlo a la carpeta fancybox de tu directorio raíz

Opcional: añadir transiciones con jQuery, por defecto solamente soporta ”swing” and “linear”

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

Opcional:añadir eventos para la rueda del ratón y navegar al girar la rueda

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

3. Añadir el fichero CSS de FancyBox

Comprobar las rutas de las imágenes sino se mantiene la misma estructura de directorios, edita la hoja de estilos y comprueba

4. Crear enlaces (a href)

Images

<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt="" /></a>

Inline content: para contenido en otras url

<a id="inline" href="#data">This shows content of element who has id="data"</a></pre>
<div style="display: none;">
<div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<pre>

Iframe

<a href="http://www.example?iframe">This goes to iframe</a>
 o
<a href="http://www.example">This goes to iframe</a>

Ajax

<a href="http://www.example/data.php">This takes content using ajax</a>

Opcional – Utiliza el atributo de título para los anclas, para mostrar una leyenda

5. Modificar jQuery, si te atreves

En este caso, para los que ya conocen jQuery pueden modificar los parámetros, por ejemplo

$(document).ready(function() {
 /* This is basic - uses default settings */
 $("a#single_image").fancybox();
 /* Using custom settings */
 $("a#inline").fancybox({ 'hideOnContentClick': true });
 /* Apply fancybox to multiple items */
 $("a.group").fancybox({
 'transitionIn' : 'elastic',
 'transitionOut' : 'elastic',
 'speedIn' : 600,
 'speedOut' : 200,
 'overlayShow' : false
 });
 });

Nota: Las galerías creadas a partir de un mismo elemento tienen que tener el mismo “rel” como etiqueta, por ejemplo:

</pre>
/* HTML */
<a href="image_big_1.jpg" rel="group1"><img src="image_small_1.jpg" alt="" /></a>
<a href="image_big_2.jpg" rel="group1"><img src="image_small_2.jpg" alt="" /></a>
<a href="image_big_3.jpg" rel="group2"><img src="image_small_3.jpg" alt="" /></a>
<a href="image_big_4.jpg" rel="group2"><img src="image_small_4.jpg" alt="" /></a>
/* Con esto crearás dos galerías */
$("a.grouped_elements").fancybox();

Descarga y Manuales

Deja tu comentario