Shadowbox – Imagen y Video en Galería PopUp

Comúnmente en nuestros proyectos webs tenemos que integrar fotografías, imágenes y vídeos con el objetivo de brindarle al visitante una representación gráfica del contenido de la página web, muchas de estas veces las imágenes no son apreciables al 100% y tenemos la necesidad de brindarle al usuario la capacidad de poder ver la imagen en un tamaño menor pero sin salir de la página.

La manera más rápida de resolver este problema es mostrando la imagen en una ventana nueva, ya sea por un target=”_blank” o con javascript con el ya conocido popup o ventana emergente. El problema de estos métodos es que son muy poco estéticos y dependiendo del navegador responden de diferente manera y en el caso del popup puede que no sea mostrado correctamente.

Lo mejor en estos casos es el uso de javascript y css para mostrar la imagen o el vídeo en alguna ventana conocida comúnmente como modal que consiste en un fondo en color negro transparente y la imagen centrada en la pantalla. Para realizar todo esto de manera correcta y compatible con todos los navegadores se necesitan conocimientos avanzados en CSS y JavaScript.

Libreria, ShadowBox

Imagenes y Videos en Galeria con Ventana Emergente

Pero no hay porque complicarnos la vida escribiendo código, cuando estemos desarrollando lo mejor es aplicar tecnologías que ya estén echas y probadas, para este caso les mostrare como integrar una librería llamada SHADOWBOX, que brinda la posibilidad de poder mostrar imágenes en una ventana modal, esta librería incluso tiene soporte para mostrar video (html5, qtime, flash, youtube, vmeo). Esta librería es totalmente Gratuita y ofrece compatibilidad con todos los navegadores.

Integrando Shadowbox al Proyecto WEB

A continuación les muestro un ejemplo de cómo integrar shadowbox a un proyecto.

  1. Debes descargar la librerí­a de shadowbox desde su pá¡gina original.
  2. Copiar la carpeta con el contenido de la librería y re-nombrarla a tu gusto. (En la parte de abajo dejo el link completo del proyecto, en el que solo se utilizan los archivos bá¡sicos)
Shadowbox-files-gumonet

Integrar ShadowBox al proyecto WEB

En nuestro archivo html ingresamos las referencias hacia la hoja de estilo, el archivo JavaScript de Shadowbox y el código que prepara el shadowbox. (Esto se hace dentro del head de nuestra página, antes de </head> )

Si se observa integramos un método Shadowbox.ini, dentro de este código incluimos 2 Parámetros estos parámetros especifican la manera en que se mostrara la ventana que contendrá la imagen en la pantalla, para poder observar una descripción completa de este método por favor leer la documentación de la librería en:  aquí.

Implementación de Shadowbox

Una vez hecho todo lo anterior ya podemos comenzar a utilizar la librería y lo hacemos de la siguiente manera.
<a href=”url ” rel=”relacion” title=”titulo“>link </a>

  • Url: Aquí se especifica la url de la imagen a mostrar.
  • Relación: se coloca la palabra shadowbox, esto indica que esta imagen será abierta con la librería, en caso de ser una Galería se muestra el nombre de esta en forma de arreglo shadowbox[nombre].
  • Tí­tulo: Se le asigna un tí­tulo a la imagen.
  • Link: link que se mostrara en la pantalla para abrir la imagen, ya sea este una imagen en miniatura, un botón, un texto, etc.

Mostrando una Imagen

Si queremos mostrar solamente una imagen, podemos utilizar cualquiera de los siguientes codigos.

Ver ejemplo

Mostrando un Ví­deo de Youtube

Para utilizar un Ví­deo de Youtube, Solo cambiamos los pará¡metros de la etiqueta <a>, primero colocamos el link del vídeo de youtube, este dato lo obtenemos copiando el id del ví­deo en  la pestaña compartir->Insertar Vinculo, del vídeo que queramos, tal como lo muestra la imagen.

embed-youtube-shadowbox-gumonet

Obtener el id de un video en youtube.

 

De la misma manera modificamos la propiedad rel, agregando los parámetros siguientes:

  • Un nombre para identificar el objeto en este caso es shadowbox
  • Width y Height. Representan el tamaño del reproductor en ancho y alto correspondientemente.
  • Player: Es el reproductor que el navegador utilizara para mostrar el objeto, en esta ocasión es swf, por tratarse de un video en flashplayer de youtube, esto cambiara dependiendo del origen del video a mostrar, puede ver mas opciones en la documentación de la librerí­a.

Ver Ejemplo

Mostrando una Galería

Para mostrar una galerí­a de objetos solo se le tiene que relacionar todos los objetos mediante
rel=”shadowbox[identificador]”

Ver ejemplo

Descarga El Proyecto Completo

 

Angel Gutierrez Monola

Developer Boy Amante de la tecnología. Apasionado del Béisbol⚾ Fundador de http://Gumonet.com Emprendedor por Pasión Y Lector por distracción.

You may also like...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *