¿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();
