Ampliar imagen utilizando Shadowbox
Shadowbox es un clon de Lightbox, pero a diferencia de éste no sólo sirve para visualizar imágenes en ventanas modales, sino también páginas web, archivos en flash, galerías, mapas, y videos en varios formatos de distintos servicios.
En este artículo vamos a ver como hacer zoom o ampliar imágenes con Shadowbox.
Implementarlo es bastante sencillo, lo primero que tendremos que hacer es ir a la página oficial y descargar el script.
Una vez tengamos el script subido a nuestro servidor, deberemos crear un archivo html para mostrar los resultados.
En nuestra cabecera o <head> deberemos incluir los estilos y scripts necesarios:
<link rel="stylesheet" type="text/css" href="shadowbox.css"> <script type="text/javascript" src="shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init(); </script>
Y luego dentro de nuestro <body> añadiremos el link con la image a ampliar añadiendo en la etiqueta «href» del link la imagen original con unas dimensiones grandes y la imagen reducida dentro del link.
<a href="images/tiger.jpg" rel="shadowbox"><img src="images/tiger.jpg" width="100px" height="70px"></a>
En el siguiente link nos debemos fijar principalmente en la llamada al atributo rel=”shadowbox” que será la que se encargará de ejecutar los scripts para ampliar la imagen. En el link, estamos visualizando la imagen que se quiere ampliar pero en unas dimensiones menores a las originales.
Puedes ver más documentación y descargar el script de la página oficial de Shadowbox.
Autor
¿Buscas trabajo de programador?
60 artículos que te podrían interesar
Deja una respuesta