| Suscribir mediante RSS

Usando Thickbox en WordPress

26 marzo 2012 Diseño web

Lightbox es uno de los plugins más populares de WordPress. Permite mostrar imágenes en una ventana emergente que se superpone al contenido de la página. Existen muchos plugins para crear el efecto Lightbox.

Quizás no sepas que WordPress incorpora su propio Lightbox, no hace falta instalar ningún plugin para conseguir este bonito efecto.

WordPress incluye una librería jQuery (javascript) llamada Thickbox que utiliza para las ventanas emergentes de varios menús del Escritorio. Se usa sobre todo en el visor de themes, cuando subes archivos e imágenes al servidor, en la galería de imágenes, editor de imágenes, etc.

Por lo que habrás imaginado que Thickbox no sólo permite ventanas emergentes con imágenes, sino además, textos, páginas web, botones, formularios, ventanas modales, etc.

Podemos hacer uso de Thickbox cuando lo necesitemos en un post sin necesidad de plugins adicionales. Para ello hay que decirle a WordPress que cargue los scripts jQuery, Thickbox y la hoja de estilos para el cuadro del efecto emergente. Tan sencillo como añadir al archivo functions.php del theme la siguiente línea:

<?php add_thickbox(); ?>

Con esto tu theme ya estará en disposición de usar Thickbox, WordPress se encarga de insertar los scripts necesarios para su funcionamiento.

Para el caso de una imagen, en el enlace que quieras incluir la imagen para Thickbox añades class=”thickbox”. El uso sería,

<a href="segunda_imagen.jpg" class="thickbox">
<img src="primera_imagen.jpg" /></a>

De manera que al pinchar sobre primera_imagen.jpg actuará Thickbox con segunda_imagen.jpg.

Este es un ejemplo,

Golf

Más ejemplos,

Enlace a cuadro de diálogo iframe

Código:
<a href="http://url_al_formulario/iframe.html?keepThis=true
&TB_iframe=true&height=500&width=640" title="Página Web o Formulario" 
class="thickbox">iframe</a>

Enlace a ventana modal iframe Modal

Código:
<a href="http:/url_a_ventana/iframemodal.html?TB_iframe=true
&height=360&width=400&modal=true" title="Ventana modal" 
class="thickbox">iframe Modal</a>

Por supuesto, iframemodal.html debe contener un botón para poder cerrar la ventana. El código es el siguiente:

<input id="Login" value="- Ok -" onclick="self.parent.tb_remove();" 
type="submit">

Añadir que es posible cargar los scripts para Thickbox sólo desde un post. De esta manera evitas que se carguen scripts innecesarios que no vas a usar en otras páginas o posts. La solución pasa por crear un shortcode que añadirás al final del post dónde quieras utilizar Thickbox.

Por ejemplo:

<?php

function carga_thickbox() {
   add_thickbox();  
}

add_shortcode('thickbox', 'carga_thickbox');
?>

Esto lo añades al archivo functions.php de tu theme. Cuando quieras usarlo en un post llamas al shortcode thickbox (entre corchetes []) que cargará los scripts sólo para ese post, tal como he hecho yo en este post.


Otros artículos de Diseño web

Mostrar extracto en post con contraseña
WordPress como la vida misma
Por qué no se ven las imágenes en el Feed
Menús personalizados en WordPress

31 Respuestas a “Usando Thickbox en WordPress”

  1. David dice:

    Hola, muchas gracias por tu aporte.
    Fue mue sencillo y comprensible.
    Quisiera consultarte algo, sabes como hacer para cargar una ventana como el ejemplo “iframe Modal” pero automáticamente al cargar una pagina o entrar al sitio? Es decir, sin necesidad de presionar un boton.

    Muchas gracias de antemano.


  2. admin dice:

    Si usas el shortcode del ejemplo anterior (en un post, una página, etc), puedes poner en el footer el código:

    <script type="text/javascript">
    //<![CDATA[
    window.onload = function() { return tb_show('Ventana Modal', 
    'http://url-al-archivo-a-mostrar/frameModal.html?TB_iframe=true
    &height=320&width=400&modal=true'); }
    //]]>
    </script>

    y obtienes una ventana modal con Thickbox automáticamente.

    Un saludo


  3. John Alexander Ronsard dice:

    No entendi cual es la variable que me permite decidir la pagina que quiero que carge en el iframe modal :/


  4. admin dice:

    John Alexander, en el artículo explico el código que hay que poner para una ventana modal.
    Sería algo como:
    url/mi_iframe_modal.html?TB_iframe=true&height=320&width=400&modal=true

    Siendo:
    mi_iframe_modal.html la página o código HTML que deseas mostrar
    TB_iframe, true
    height, el alto de la ventana modal
    width, el ancho de la ventana modal
    modal, true

    Saludos


  5. jafet Pacheco dice:

    Hola muy buen aporte amigo, tengo una duda u si quiero que en lugar de una ventana modal cargue una imagen nada mas al abrir el wordpress como lo haria??? muchas gracias por tu tiempo


  6. admin dice:

    Al igual que le dije a David, el código javascript de mi primer comentario te puede servir.
    Los pasos serían los siguientes:
    1 – Crear el shortcode en el archivo functions.php del theme
    2 – Crear una plantilla de página
    3 – Poner el código javascript en la plantilla de página
    4 – Crear una página y asignarle la plantilla de página anterior
    5 – Llamar al shortcode desde la nueva página creada, por ejemplo [thickbox]
    6 – Asigna esa página como página estática de inicio

    Lógicamente sustituye la ruta por la de tu ventana modal o imagen.

    Un saludo


  7. Daniel dice:

    Hola, gracias por tu ayuda! muy claro y comprensible.
    Hay algo más que deba tener en cuenta para cerrar la ventana modal? este código no la cierra:

    gracias otra vez por tu tiempo


  8. admin dice:

    Que extraño, ¿Puedes cerrar la ventana modal del ejemplo que he puesto con tu navegador? El código ha sido probado en varios navegadores.

    Recuerda que el código para cerrar la ventana modal debe ir en el archivo que abres con dicha ventana, tal como comento en el artículo.

    Saludos



  9. Hola y gracias por este post. por favor, ¿cómo poner dentro del Thickbox un formulario de contact form?
    pongo esto pero no me funciona:

    Recibir más información de este producto

    no sé mucho de php (o casi nada)
    ¿me ayuda alguien?
    gracias anticipadas.
    Curro


  10. admin dice:

    Pues mira así de entrada se me ocurre que crees una página en tu blog en la que pongas el formulario de Contact Form. Esa página la mantienes oculta, a no ser que te interese para otras historias. Después en el código de Thickbox le pones la URL de la página donde está el Contact Form.

    Te recuerdo que las páginas en WordPress se pueden personalizar, de manera que puedes eliminar cabecera, sidebar y/o footer. Pero eso ya es otra cuestión…

    Un saludo



  11. muchas gracias pero no es lo que busco, ya que el formulario lleva campos ocultos con el nombre de la entrada y la url. si hago lo que tu dices, no me lo cargaría.
    por favor, ¿se te ocurre otra forma?
    gracias
    Curro


  12. admin dice:

    En principio es la solución más sencilla que se me ocurre.

    Ten en cuenta que Thickbox es lo que ha usado WordPress toda la vida para mostrar una vista previa del theme, da igual si la página es un formulario o no.

    Compruebalo y vemos si hay algo extraño.

    Saludos



  13. gracias pero no. el formulario tiene que estar en la misma entrada para coger los datos del nombre del post y url. al ponerlos en “otra” página, coge los datos de la nueva página y no los de la entrada original.
    por favor, ¿alguna otra idea?
    gracias de todas formas.
    Curro



  14. pues gracias, al final lo he solucionado con esta otra forma: http://hibbard.eu/display-your-wordpress-contact-form-in-a-lightbox/

    gracias por tu atención. te debo una buena cerveza.
    Curro


  15. admin dice:

    Gracias a ti por compartir el enlace. Si te fijas la idea es la misma aunque se usan dos plugins, cosa que pretendía evitar cuando escribí el artículo.

    Un saludo



  16. y a mí me gustaba más tu idea…. pero no he sido capaz de insertar el contact form 7 dentro de tu solución. lástima.
    y hasta otra.
    Curro


  17. NTLGNZALEZ dice:

    Buenas, está genial el post, porque yo me he vuelto loca intentando encontrar esto, pero tengo un problema. Estoy probando esto, pues necesito que al pinchar en una imagen me abra una ventna como el iframe, o incluso el modal. Pero no sé si hago algo mal porque me sigue abriendo el html en una nueva.

    Te copio mi código, esto está colocado en un custom post type, y enlaza a otro post de un custom post type distinto. No sé si esto influye…

    [grid4]
    [/grid4]

    En mi archivo functions.php del tema he copiado:

    //ADD THICKBOX
    add_thickbox();

    muchas gracias!!


  18. admin dice:

    NTLGNZALEZ, la verdad es que no entiendo muy bien lo que quieres hacer. Primero debes asegurarte de que funciona Thickbox, si te sale en una nueva ventana está claro que algo no va bien. Ten en cuenta que algunos plugins interfieren con Thickbox.

    Te aconsejo hagas las pruebas con posts o páginas normales, cuando logres que funcione continuas con los Custom Post Types puesto que tienen un tratamento especial.

    Un saludo


  19. Martha R. dice:

    Genial esta publicación, me sacó de un lío que tenía al rehacer mi página con wordpress e intentar llamar unos links que tenía antes con ventanas emergentes. Mil gracias.

    Ahora, tengo una duda, es posible ajustar el tamaño de la ventana que abre thickbox? Lo digo puesto que yo estoy llamando más que todo otras páginas con código html, pero estas tienen un estandar específico y me gustaría ajustarlo. El problema no es el scroll sino el tamaño de ancho que lo quiero más pequeño.


  20. Gaspar dice:

    Hola disculpa en
    Código:

    url_a_ventana a que se refiere??

    iframemodal.html se que es el archivo pero dentro de wordpress donde posiciono ese archivo html… o puedo poner una pagina creada en wp por ejemplo así “http://localhost/Academia/?page_id=15” …gracias


  21. admin dice:

    Puedes poner una página de WordPress, pero será demasiado grande para la ventana.

    El archivo html lo pones en el raiz de tu dominio o en una carpeta, eso lo decides tú.
    Ej.: tudominio.com/ventana_modal.html

    Un saludo


  22. Gaspar dice:

    buen dia.. disculpa una preunta mas… como lo puedo manejar en una tabla:

    Aquí Van las fechas de inicio
    Aquí van los horaiors de los cursos
    Observaciones del curso
    En este apartado va el costo del curso

    pero quiero que los datos de esa fila se abra en otra ventana con thickbox por favor y gracias


  23. Jesus Sanchez dice:

    Hola,
    una pregunta sobre el tema mapa de imagenes. Un mapa de imagenes son coordenadas, muy bien, pero en diseño responsive, como se pueden adaptar esas coordenadas?. La imagen dentro de WP o html y ccs3 ya se adapta, pero y esas coordenadas?.

    Muchas gracias.


  24. admin dice:

    Gaspar, debes tratar todo lo que quieras que aparezca en la ventana como de una página web más, con su código HTML correspondiente. El único detalle a tener en cuenta es las dimensiones de esa ventana para que te quepa el contenido en ella.

    En la red puedes encontrar multitud de tutoriales para la creación de tablas en HTML.

    Un saludo


  25. admin dice:

    Jesús ese tema no se trata en este artículo, pero te respondo rápido. Lo podrías hacer con CSS sin coordenadas, aquí tienes un ejemplo: Responsive image map

    Un saludo


  26. Marcelo Mika dice:

    Aprendiendo un poco mas.. muchas gracias.

    Te hago una pregunta, quiero modificar el theme para usar class=”thickbox” para que las fotos cargadas en mi wordpress se abran automaticamente con el Tickbox al hacer clic en ellas.

    Me refiero a cual es la parte del codigo que tengo que tocar para hacer esto;

    La consulta seria ¿ como agregar target=”_blank” ? por defecto para todas las fotos.

    Saludos.


  27. admin dice:

    Marcelo, lo pone claramente en el post.

    1 – Añadir lo siguiente al archivo functions.php del theme:

    <?php add_thickbox(); ?>

    2 – En cada post o página dónde quieras usar thickbox añadir la clase thickbox al enlace a la imagen. Ejemplo:

    <a href=”segunda_imagen.jpg” class=”thickbox”>
    <img src=”primera_imagen.jpg” /></a>

    Lo que si debes tener cuidado de no instalar plugins para lo mismo, tipo Lightbox, puesto que se pueden interferir entre ellos y no funcionar correctamente.

    Un saludo


  28. Marcelo Mika dice:

    Gracias por la respuesta, lo del post lo entendi perfectamente hasta aqui

    1 – Añadir lo siguiente al archivo functions.php del theme:

    He agregado la linea directamente en el funciones php.

    Segui los pasos del punto 2, use chrome en modo desarrolador

    Inspeccionar, muestra el codigo html, agregue a etiqueta

    class=”thickbox” dentro del link probe y funciona.

    Ahora bien, quizas no me enendiste o no supe ser claro, me refiero a lo siguiente.

    Subo una imagen en un nuevo post usando el metodo tradicional de wordpress, esa imagen se carga y el post se muestra perfectamente, pero no se abre en thickbox.
    Supongo que en alguno de los archivos del template o de wordpress hay que agregar “class=”thickbox”” para que cuando se muestren las fotos cargadas en cada post, se active el tickbox sin tener que agregar nada en la pagina del post.

    Entendi que si cargas las fotos en modo manual podes hacerlo, pero si lo haces automaticamente WP no las mostrara asi, me explico, si no logras entenderme te hago un par de capturas de pantalla para graficar, avisame.

    FUERA DE TEMA… si se puede…

    Otra cosa que te queria consultar es sobre la funcionalidad que da JQuery / Ajax, se que no es el lugar pero indicame vos cualquier cosa si podes, donde consultarlo, pues me gustaria saber como hacer que un Menu desplegable comun se convierta en DropDown con sub categorias anidadas a medida que seleccionas, ej, si seleccionas Autos, se active un segundo desplegable que muestre las marcas, y no que en un infinito menu unico se muestre por ej Autos motos respuestos y debajo de cada item una interminable sub lista, se que Wordprss incluye la libreria para ejecutarlo, pero no se como hacerlo. Saludos y gracias de nuevo.


  29. admin dice:

    Si quieres hacerlo de forma automática tendrás que olvidarte de lo anterior y buscar algún plugin, como por ejemplo:
    http://wordpress.org/plugins/thickbox/

    Sobre los menús dependerá del theme que se muestren con subniveles o no. Se hace con CSS no es necesario jQuery. De todas formas si quieres menús más complejos puedes echarle un vistazo a este enlace:
    http://www.designrazzi.com/2013/wordpress-dropdown-menu-plugins/

    Un saludo


  30. Alvin dice:

    amigo, el señor que publico este post, como puedo poner varias imagenes, dentro de una sola, como el priemr ejemplo que pusiste, que al hacer clic sobre la imagen se abre otra, pero pueden abrirse mas de una, que aparesca como si fuera una galeria,.
    por ejemplo una images, del sol, le doy clic, y me salga 5 images mas del diferente a que engo vinculada.


  31. admin dice:

    Buena pregunta, no lo he probado pero prueba ponerle a las imágenes pertenecientes a la galería rel=”gallery”

    Ejemplo:
    <a href=”segunda_imagen.jpg” class=”thickbox” rel=”gallery”>
    <img src=”primera_imagen.jpg” /></a>

    y así con todas las que quieres que sean de la galería.

    De esta forma saldrán todas en la misma ventana de Thickbox.

    Un saludo