In Programación, Wordpress

Muchas veces a la hora de mostrar imágenes de una manera elegante en wordpress, tendemos a instalar algún plugin. Ya hemos hablado muchas veces de plugins que hacen este tipo de efecto. Hay muchísimos. Pero lo que no sabrá mucha gente ( o si, depende de quien lea este post) es que WordPress dispone de un “lightbox” nativo, Thickbox, que hace perfectamente esta funciones. Donde podemos mostrar de una manera muy fácil, imágenes, galerías de imágenes, contenido de un div, contenido externo, etc… sin la necesidad de instalar ni configurar ningún otro plugin externo, con lo que ganamos en tiempos de carga y soltura en nuestra página web.

Vamos a explicar como funciona.

Lo primero que debemos hacer, es “activarlo”. No lo podemos activar como si tratase de un plugin, sino que debemos decirle a nuestro Theme que cargue los archivos necesarios para hacer funcionar ThickBox. Esto lo podemos hacer de una manera muy sencilla con la siguiente instrucción: <?php add_thickbox(); ?>

Lo que demos hacer es, copiar add_thickbox(); en el “header” de nuestro theme. Con esto, ya tenemos cargados todos los archivos necesarios para que ThickBox funcione.

¿Cómo utilizarlo?. Vamos a ver unos cuantos ejemplos.

En Imágenes: 

<a href=“url_de_imagen” title=“TITULO” class=“thickbox”>HTML_mostar_imagen</a>

Una galería de fotos:

<a href=“url_de_imagen_1” title=“TITULO1” class=“thickbox” rel=“gallery”>HTML_mostar_imagen_1</a>
<a href=“url_de_imagen_2” title=“TITULO2” class=“thickbox” rel=“gallery”>HTML_mostar_imagen_2</a>
<a href=“url_de_imagen_2” title=“TITULO3” class=“thickbox” rel=“gallery”>HTML_mostar_imagen_3</a>

Contenido externo (url externa):

<a href=“archivo.html?keepThis=true&TB_iframe=true&height=350&width=450″ title=“titulo del enlace” class=“thickbox”>Enlace 1</a>

Contenido inline:

<div id="mi_contenido" style="display:none;">
 <p>
 Contenido a mostrar con ThickBox.
 </p>
</div>
<a href="#TB_inline?width=600&height=550&inlineId=mi_contenido" class="thickbox">Mostrar Contenido</a>

ThickBox_wordpress

 

Contacta con Nosotros

Puedes contactar con nosotros sin compromiso. Atenderemos tus dudas gustosamente!!

Widget Lodic Wordpress