En el post anterior comentábamos acerca de ThickBox, una librería de javascript que permite mostrar ventanas flotantes de forma transparente. Bueno como me pareció muy interesante esta forma de crear ventanas, decidí crear un plugin para insertar automaticamente ThickBox en tu WordPress y lo llamé ThickBox-Press.
Para hacer uso de este plugin, los puedes descargar, descomprimes el archivo y subes la carpeta thickbox-press y el archivo thickbox-press.php a la carpeta wp-content/plugins/ de tu wordpress, vas al panel de administración de tu blog y activas el plugin.
Ahora veamos como podemos insertar ThickBox en nuestros posts. Hay dos opciones, una de ellas es insertar una imagen para ello se utilizará el tag TBOXI:
[TBOXI] texto, url, titulo[/TBOXI]
Para la inserción de una página externa el tag utilizado es TBOX, además tiene dos parámetros adicionales.
[TBOX] texto, url, titulo, ancho, alto[/TBOX]
Donde tenemos los siguientes parámetros:
- texto: es el texto que se utilizará como enlace.
- url: es el url de la imagen o web que se cargará en la ventana flotante.
- titulo: el titulo de la ventana que se abrirá.
- ancho: ancho de la ventana emergente
- alto: ancho de la ventana emergente
Bueno vemos un ejemplo de uso para este plugin, [TBOXI]resultado, /wp-content/uploads/2006/08/thickbox.gif, Ejemplo de ThickBox[/TBOXI] del siguiente código:
[TBOXI]resultado, thickbox.gif, Ejemplo de ThickBox[/TBOXI]
El siguiente código abre una ventana y carga [TBOX]Google, http://www.google.com, Google, 600, 420[/TBOX].
[TBOX]Google, http://www.google.com, Google, 600, 420[/TBOX]
Sencillo de usar y fácil de implementar. Espero les sirva y si hay preguntas o comentarios les responderé con mucho gusto.
Comentarios Total 44 comentarios
Publicado: 11/08/2006 7:21 am
Buscando en internet encontré un plugin para WordPress que hace lo mismo, se trata de ThickBox Plugin creado por anieto2k. La diferencia?, bueno que actualmente su plugin utiliza la versión anterior de ThickBox, que hay que insertar el código en el tag a.
Publicado: 11/08/2006 9:30 am
Buenas,si que usa la versión anterior y tenía pensado actualizarlo este fin de semana. Pero me ha gustado mucho tu versión, y creo que es bastante cómoda. Quizas cambiaría algunas cosas, pero eso es cada uno :D
Muy buen plugin. Un saludo.
Publicado: 11/08/2006 1:08 pm
Hola, que bueno que te haya gustado, y si cambiarias algunas cosas, te agradecería me lo comentes pues eso ayudará a que el plugin sea mas util. Gracias.
Publicado: 11/08/2006 1:54 pm
Bueno, a ver:
1) No me parece muy cómodo para los usuarios (noveles) la estructura, te obliga a conocer la estructura que has de meter.
[TBOX]Google, http://www.google.com, Google, 600, 420[/TBOX]
Quizas la cambiaría por algo asi:
[TBOX]texto=aqui el texto&url=esto es una URL&ancho=600[/TBOX]
De esta forma quizas solo con meter el texto y la URL ya les basta.
2) No tener que decidir si usar [TBOX] o [TBOXI], que sea el plugin el que se encargue de saber de que se trata.
Quizas no me haya explicado bien, si quieres que te explique mejor lo que quiero decir ponte en contacto conmigo.
Un saludo
Publicado: 11/08/2006 2:26 pm
Por fin chavo veo cosas útiles por aqui
Publicado: 19/08/2006 4:47 pm
Hola, Gracias, su plugin es muy bueno, pero no puedo conseguirlo para trabajar con mi tema. Aqui: http://5thirtyone.com/foliagemod/
Pienso que puede haber un conflicto del Javascript en alguna parte. ¿Usted tiene consejo para mí? ¡Apreciaría mucho, gracias!
Daniel Burns, Los Estados Unidos
(Estoy apesadumbrado, no escribo ni hablo a español muy bien. Utilicé Babelfish para traducir mi inglés a español. http://babelfish.altavista.com/tr)
Publicado: 19/08/2006 6:49 pm
Esste plugin solo funciona bajo Internet Explorer, con Firefox no funciona como debería. Al hacer click en la imagen o url, te manda directamente a ella.
SalU2!
P.D. Lo instale en WP 2.0.4
Publicado: 01/09/2006 4:28 pm
Es un plugin muy bueno. Lastima que esté hecho con jquery. No puedo activarlo con mi theme, ya que jquery entra en conflicto con prototype.
¿Alguien tiene una version para prototype?
Gracias.
Publicado: 02/09/2006 11:15 pm
Debo estar dormido, porque no me entero de nada. ¿Dónde se pone [TBOXI]resultado, miimagen.gif, Ejemplo de ThickBox[/TBOXI]? ¿Editando el post con tinyMCE?
¿Funcionará con Firefox?
Saludos…
Publicado: 03/09/2006 12:07 am
Lo que pasa que es que para insertar el ThickBox en un post, es decir cuando estas redactando un post y quieres insertar contenido en ventanas flotantes debes escribir ese código.
Saludos.
Publicado: 03/09/2006 7:47 am
Sigue sin funcionarme (lo he probado con IE y Firefox). Además… Si quiero ver una imagen ampliado de una miniatura… ¿Cómo tendría que hacerlo?
Gracias.
Publicado: 03/09/2006 8:11 am
Hola, una posibilidad es que estes utilizando alguna otra librería de javacript que este interfiriendo con thickbox, por lo demas si pudiera ver donde estas probando es posible que te pueda ayudar mas.
Saludos
Publicado: 13/09/2006 3:12 pm
Pues yo lo he probado con las versiones mas reciente de FF e IE bajo Windows XP y Windows 2000; y simlemente no me funciona solo en Firefox.
Las imagenes se muestran directamente no bajo una ventana. Y las URL’s se abren directas tambien.
Se algun problema del FF en sí?
Publicado: 13/09/2006 3:13 pm
Perdon quise decir que NO me funciona en Firefox. Sorry! :-(
Publicado: 23/09/2006 12:31 pm
Pues la cosa es que si … el efecto no funciona bajo firefox pero … lo mas gracioso es que la primera vea que lo hice funcionar… si rulo bien… es decir al enlazar lo hacia tanto en firefox como en IE ahora toy intentando ponerlo de nuevo pero no me funciona…
Para que veais que no miento…
http://www.escuelachiquitin.com/zona_inversores/noticias_chiqui_tin.php
si pinxais en leermas… si hace el efecto correctamente en firefox pero ahora no tengo narices de hacerlo…
Publicado: 01/11/2006 5:14 pm
Buen plugin, pero al tratar de usar en los temas «Hemmed» y «Crimson Sunrise» simplemnte este plugin no permite que funcionen adecuadamente. Lo desactivo y el tema funciona de maravilla.
Muy a mi pesar lo voy a desechar :-(
SalU2!!
Publicado: 01/11/2006 7:36 pm
Lamento mucho esta decisión pero creo que era de esperar, lo que sucede es que este plugin utiliza la librería JQuery la cual es muy bueno pero es incompatible con otras librerías javascript por lo cual es muy difícil buscar compatibilidad.
Saludos
Publicado: 02/11/2006 1:13 pm
Excellent plugin!!
it seems to work very well!
no conflicts with AJAX.
also..
if you put class=»thickbox» it also works too!
Publicado: 02/11/2006 1:59 pm
ok..
spoke too soon.
conflicts with ajax..
but still very good.
Publicado: 17/11/2006 7:07 am
[…] ThickBox-Press,超级炫目的链接弹出效果,支持图片和链接页面。 上传激活,实际效果可以去ThickBox查看,在文章中使用如下格式插入: [TBOXI] 链接名字, 图片地址, 图片注释[/TBOXI] [TBOX] 链接名字, 页面地址, 链接注释, 宽度, 高度[/TBOX] Tags: image, link, ThickBox […]
Publicado: 19/11/2006 10:04 am
Hola…me funciona ok si lo implemento en las entradas, pero en los comentarios de dichas entradas no funciona, ¿cual puede ser el motivo?
Publicado: 19/11/2006 1:10 pm
Hola, es cierto que funciona solo para las entradas y no para los comentarios, generalmente los visitantes no saben la sintaxis y por ello no se le permite a los visitantes usar los plugins.
Publicado: 22/11/2006 11:58 pm
También me sale una mensaje debajo de cada foto diciendo preview y 8 de 8 como puedo quitar eso.
Publicado: 07/01/2007 9:15 am
[…] ThickBox-Press,超级炫目的链接弹出效果,支持图片和链接页面。 上传激活,实际效果可以去ThickBox查看,在文章中使用如下格式插入: [TBOXI] 链接名字, 图片地址, 图片注释[/TBOXI] [TBOX] 链接名字, 页面地址, 链接注释, 宽度, 高度[/TBOX] […]
Publicado: 28/01/2007 1:15 am
Hola unijimpe!!
Tienes proyectada una nueva versión de este plugin?
SalU2!!
@ndrés
Publicado: 21/02/2007 7:51 pm
Hola Jim. Estoy utilizando el thickbox y todo OK. ¿Se podria usar para una galería de fotos? y en lugar de enlazar mediante un texto, ¿se podria enlazar con un thumbnail? Muchas gracias
Publicado: 22/02/2007 12:25 am
Si claro, en lugar de poner: [TBOXI] texto, url, titulo[/TBOXI]
Debes colocar: [TBOXI] <img scr=»img.jpg»>, url, titulo[/TBOXI]
Saludos
Publicado: 22/02/2007 8:23 pm
Aqui http://bollazos.com/?p=22
en el ejemplo 8 deberia de haber una imagen…
Publicado: 23/02/2007 8:09 am
Ya esta solucionado, donde me decias img scr deberia ser img src
Gracias Jim
Publicado: 23/02/2007 8:22 am
Una vuelta de tuerca más:
¿podria meter ahi uno de mis vídeos flv, o un swf?
:)
Publicado: 23/02/2007 4:39 pm
Si quieres usar el plugin con dos enlaces en la misma linea se hace un lio. Tiene que haber siempre un en medio, creo….
Publicado: 06/04/2007 12:29 pm
Hi!
Thanks for your great PlugIn – works fine.
Some questions:
Is there a way to close a TBOX without the user clicking the close-link?
How can I add a close-link and/or close-button within the TBOX-window?
Ciao
digo
Publicado: 14/04/2007 1:25 pm
necesito un ejemplo de logicas descriptivas
un enunciado con su respectivo Tbox y Abox
GRACIAS
Publicado: 20/05/2007 3:54 am
[…] Visit […]
Publicado: 04/07/2007 1:47 am
Hola, me ha interesado mucho esto del Thickbox, pero lamentablemente no he entendido muy bien, soy novato en esto del wordpress, comprendo lo de descomprimir, subir y activar el plugin, pero no logro hacerlo funcionar, es decir, no se donde poner esas lineas de codigo que dicen… esto no funciona con el Upload q WP trae por defecto? Espero de su ayuda :) y felicitaciones!
Publicado: 04/07/2007 9:08 am
El problema es que has subido los archivos con toda y carpeta thickbox-press, solo debes subir lo que hay dentro de esa carpeta al directorio donde están los plugins.
Publicado: 01/09/2007 3:25 am
Que raro, aqui funciona muy bien, sin problemas. Talvez sea porque la página no tiene muchas referencias a otros scripts (o eso creo), pero funciona perfecto en firefox; no he probado en internet explorer.
Les sugiero a los que han tenido problemas que intenten con un theme mas liviano, uno que no abuse de scripts, para que vean si el problema es conflicto de js o simplemente está mal algo en la activacion del plugin.
Felicidades, la verdad es que funciona bien, rapido y en una sola linea se puede personalizar practicamente todo; excepto por los colores, que bueno, los edité en el css del plugin, para verse todo negro.
Gracias por tu trabajo en este plugin:D
Saludos
Publicado: 18/09/2007 11:48 pm
donde agrego el var
var imgLoader = “loader.gif”;
ya que ami me saleu tambienn el object error
Publicado: 16/11/2007 9:32 am
El contenido de las paginas que se abren en la ventana: es indexado por Google? de que manera?
Publicado: 21/11/2007 12:34 pm
Que niiiiiiiiiiice el plugin, me ha gustado mucho! jejeje
Felicitaciones
Publicado: 04/06/2008 12:36 pm
ya inplemente tu plugin y si me funciona implemente una funcion y ya lo puedo mover por la pantalla pero el problema es que quisiera abrir un archivo thml dentro de esa ventana ya vi el codigo
[TBOX]Google, http://www.google.com, Google, 600, 420[/TBOX]
pero donde lo coloco para que esto funcione
Publicado: 08/02/2010 10:30 pm
Hola, hay alguna manera de que la ventana se abra sola cuando entro a mi web?
Muchas gracias
Publicado: 10/02/2010 7:11 am
Muy interesante el plugin, espero que saques nuevas versiones de este plugin..
Publicado: 23/06/2011 12:25 pm
Me gustaria saber si el codigo es compatible con blogger de google.
Gracias.
Excelente colaboración.