Como usar Lightbox de Widgetkit Yootheme

Escrito por Jose M Ramirez en . Publicado en Tutoríal

Como usar Lightbox de Widgetkit Yootheme

Hace poco estuve hablando del maravilloso plugin de muchas funciones de Yootheme Widgetkit para WordPress, la vez pasada desglose un poco todas sus características, sin embargo algunos de sus complementos requieren algo más que activar el plugin para usarlo y la documentación oficial del mismo, además de estar en inglés, fue hecha para desarrolladores acostumbrados al código, por ende tratando de echar una mano a los webmaster no tan expertos voy mostrar cómo usar la función de Lightbox para objetos que es una por las que más me preguntan y sin duda una de las más complicadas. Además no cae nada mal leer una guía sobre el plugin en español.

El Lightbox de Widgetkit no es muy diferente a otros, este permite que una imagen, video, iframe o texto salte a la pantalla del visitante al hacerle clic sobre. Pero a diferencia de la galería y el slideset del mismo plugin esta no se configura mediante un panel, solo se activa y luego hay que implementar código para lograr el efecto, creo que esto se debe a lo flexible que es la herramienta y la gran cantidad de usos que le podemos dar. Para usarla debemos ir a nuestro panel de administración en WordPress y entrar en las funciones del plugin, luego vamos a Lightbox y lo habilitamos.

Texto en Lightbox

Podemos crear una caja de texto plano con enlaces incluso, definiendo el tamaño deseado y esta saltara a la pantalla presionando un vínculo, algo muy similar a los botones de ayuda de algunos sitios como Wikipedia que te muestran información sin sacarte del sitio. Este es el código para hacerlo.

<a data-lightbox="on" href="#inline" title="Titulo">Texto de enlace</a>  
<div style="display: none;">
<div id="inline" style="width:400px;height:100px;overflow:auto;">
Aqui colocamos el texto a mostrar dentro de la caja
</div></div>    
Demostración

Estas viendo un Lightbox mostrado con texto, puedes hacer clic arriba para cerrarlo.

iFrame en Lightbox

Con esta función podemos mostrar una página interna o externa en Lightbox, podemos definir el tamaño del ancho y largo con width:1000;height:600 en el código, agregando la url del sitio a mostrar. Veamos el código.

<a data-lightbox="width:1000;height:600;" href="url del sitio">Nombre del vinculo</a>

Mostrar una imagen en Lightbox

Una de las más sencillas pero igual de atractivas para nuestros visitantes, la imagen se muestra del tamaño que definimos y se muestra tanto desde un enlace como desde el thumb de la imagen.

<a data-lightbox="width:600;height:300;" href="enlace de imagen">Texto</a>

Lightox con miniatura

Youtube y Vimeo en Lightbox

También podemos mostrar videos de las dos más populares redes de videos como Youtube y Vimeo, solo debemos colocar el enlace del video y el plugin lo mostrara dentro de la caja listo para reproducir.

<a data-lightbox="on" href="URL DEL ENLACE DE YOUTUBE O VIMEO" title="Titulo del Video">TEXTO DEL ENLACE</a>

Galería en Lightbox

Esta función es para mostrar una galería haciendo clic desde un enlace, ya que la propia galería tiene su propia función de Lightbox, además es compatible solo con la galería de Widgetkit y no la que viene por defecto con WordPress. Para hacerlo debemos colocar el ID de la galería que se asigna cuando la creamos de esta forma ‘#wk-460’ en vez de colocar enlaces

<a data-lightbox="width:600;height:300;" href="#wk-10">texto de enlace</a>

Etiquetas:

Trackback desde tu sitio.

Dejar un Comentario

Sígueme en twitter

Twitter

Suscríbete al Feed

RSS-Feed

Red de Blogs

Red de Blogs iBlogLabs