páginas web valladolid
  • paginas web
  • publicidad valladolid
  • localizacion agencia de publicidad valladolid

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

ejemplo de una imagen con 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

ejemplo de una imagen con Shadowboxejemplo de una imagen con Shadowboxejemplo de una imagen 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′}"

 

Ejemplo galería de imágenes con shadowbox

 

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

« volver a Artículos Web

Comentar

En este blog los comentarios están moderados. Por favor, evita los comentarios ofensivos u obscenos por que serán borrados.

  • Imagen de seguridadRefrescar imágen

  • * Campos obligatorios