Galería de Imágenes con Shadowbox
Mostrar una Imagen con Shadowbox
La forma más sencilla de mostrar imágenes con Shadowbox es de una en una, es decir, con un enlace en la miniatura de la imagen en la página web. Cuando el usuario hace clic sobre la miniatura de la imagen, Shadowbox se abrirá para mostrar una versión más grande de la imagen.
<a rel="shadowbox" href="http://www.ideasfrescas.es/includes/img/shadowbox-ejemplos-20091230153446.jpg" mce_href="http://www.ideasfrescas.es/includes/img/shadowbox-ejemplos-20091230153446.jpg" > <img src="http://www.ideasfrescas.es/includes/img/shadowbox-ejemplos-20091230153446.jpg" mce_src="http://www.ideasfrescas.es/includes/img/shadowbox-ejemplos-20091230153446.jpg" alt="ejemplo de una imagen con Shadowbox" width="100" height="69"> </a>
Ejemplo de una imagen en Shadowbox
Galería de Imágenes con Shadowbox
Cuando lo que queremos es que todas la imágenes estén agrupadas formando una galería, se utiliza el shadowbox con el nombre de la galería entre corchetes dentro del atributo ′rel′ de la etiqueta html ′a′ :
rel=shadowbox[nbGaleria]
Vemos un ejemplo de código html con Shadowbox de la galería de imágenes:
<a rel="shadowbox[ejemplos];options={counterType:skip}" href="http://www.ideasfrescas.es/includes/img/shadowbox-ejemplos-20091230153446.jpg" mce_href="http://www.ideasfrescas.es/includes/img/shadowbox-ejemplos-20091230153446.jpg" >
<img src="http://www.ideasfrescas.es/includes/img/shadowbox-ejemplos-20091230153446.jpg" mce_src="http://www.ideasfrescas.es/includes/img/shadowbox-ejemplos-20091230153446.jpg" alt="ejemplo de una imagen con Shadowbox" width="100" height="69" />
</a>
<a rel="shadowbox[ejemplos];options={counterType:skip}" href="http://www.ideasfrescas.es/includes/img/shadowbox-videos-20091230153515.jpg" mce_href="http://www.ideasfrescas.es/includes/img/shadowbox-videos-20091230153515.jpg">
<img src="http://www.ideasfrescas.es/includes/img/shadowbox-videos-20091230153515.jpg" mce_src="http://www.ideasfrescas.es/includes/img/shadowbox-videos-20091230153515.jpg" alt="ejemplo de una imagen con Shadowbox" width="100" height="69" />
</a>
<a rel="shadowbox[ejemplos];options={counterType:skip}" href="http://www.ideasfrescas.es/includes/img/shadowbox-google-maps-20091230153547.jpg" mce_href="http://www.ideasfrescas.es/includes/img/shadowbox-google-maps-20091230153547.jpg">
<img src="http://www.ideasfrescas.es/includes/img/shadowbox-google-maps-20091230153547.jpg" mce_src="http://www.ideasfrescas.es/includes/img/shadowbox-google-maps-20091230153547.jpg" alt="ejemplo de una imagen con Shadowbox" width="100" height="69" />
</a>Ejemplo de galería de imágenes con Shadowbox
En este ejemplo de galería de imágenes, utilizamos la propiedad de Shadowbox counterType. Esta opción de Shadowbox se utiliza para mostrar un contador con las fotos de la galería. Valores que toma: " default" o " skip". Si lo dejamos por defecto muestra la galería de imágenes de esta forma: " 1 de 5". Cuando le damos el valor Skip muestra las imágenes con un numero (imagen inferior), permitiendo la navegación rápida entre las fotos de la galería de imágenes. El valor que toma por defecto es " default".:
rel="shadowbox[mustang];options={counterType:′skip′}"
Propiedades para imágenes de Shadowbox
content - El contenido real del objeto (por ejemplo, dirección, código HTML, etc.)
player - El tipo de archivo o contenido que va a contener el objeto (opcional, la mayoría de los casos lo detecta automáticamente). (* ver opciones)
title - El título que del objeto (opcional)
gallery - Nombre de la galería a la que va a pertenecer el objeto (opcional)
height - La altura del objeto (en píxeles, sólo se requiere para las películas y Flash)
width - El ancho del objeto (en píxeles, sólo se requiere para las películas y Flash)
* options - Conjunto de opciones que se pueden aplicar al objeto shadowbox.
Otros Artículos relacionados con Shadowbox: Shadowbox - Shadowbox y Google Maps - Shadowbox problemas con IE6 - Flash y Shadowbox
