Usando Thickbox en WordPress
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,
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.
28 marzo 2012
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.
29 marzo 2012
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
13 junio 2012
No entendi cual es la variable que me permite decidir la pagina que quiero que carge en el iframe modal :/
14 junio 2012
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
24 agosto 2012
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
28 agosto 2012
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
5 octubre 2012
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
6 octubre 2012
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
27 mayo 2013
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
27 mayo 2013
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
28 mayo 2013
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
28 mayo 2013
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
28 mayo 2013
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
28 mayo 2013
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
29 mayo 2013
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
29 mayo 2013
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
20 junio 2013
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!!
21 junio 2013
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
10 agosto 2013
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.
24 septiembre 2013
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
24 septiembre 2013
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
30 septiembre 2013
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
1 octubre 2013
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.
1 octubre 2013
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
1 octubre 2013
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
16 diciembre 2013
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.
17 diciembre 2013
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
20 diciembre 2013
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.
21 diciembre 2013
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
21 junio 2014
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.
21 junio 2014
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