Ampliar una imagen utilizando Fancybox 1.3.4

Name: Ampliar una imagen utilizando Fancybox 1.3.4
Brand: Jose Aguilar
SKU: joseaguilarblog-2918
Availability: InStock
Rating: 5 (2 reviews)

FancyBox es una herramienta para la visualización de imágenes, contenido HTML y multimedia al estilo “lightbox” flotante sobre la página web.

En este artículo vamos a ver como ampliar imágenes utilizando Fancybox.

Lo primero que tendremos que hacer es ir a la página oficial de Fancybox para descargar el script y ver más información.

Una vez tenemos los archivos necesarios en nuestro servidor podemos empezar a añadir a nuestra página HTML el efecto Fancybox.

En nuestra cabecera o <head> deberemos añadir los estilos y scripts necesarios:

<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("a#example1").fancybox();
});
</script>

Hará falta la librería jQuery y los scritps y estilos de Fancybox, además de la llamada a la función fancybox() tras pulsar en el link o elemento con id=”example1”.

En nuestro <body> deberemos añadir el link con la imagen reducida que tras pulsarlo abrirá ampliada esta misma imagen.

<a id="example1" href="./example/1_b.jpg"><img alt="example1" src="./example/1_s.jpg" /></a>

En este caso estamos utilizando 2 imágenes; una reducida de tamaño para depositar en el link y otra imagen más grande para mostrar como zoom en la ventana modal.

También cabe la posibilidad de utilizar una única imagen reduciéndola con los atributos de imagen «width» y «height» en el contenido del link y en el atributo href del link añadir la imagen original.

También podemos añadir diferentes efectos o animaciones al efecto de ampliación que podrás ver en los ejemplos y añadir un title para detallar información pudiéndolo posicionar en distintas posiciones.

Ver el ejemplo en funcionamiento