Plugin ThickBox-Press

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.

thickbox-press.gif

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

unijimpe
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.

aNieto2k
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.

unijimpe
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.

aNieto2k
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

San Bernardo
Publicado: 11/08/2006 2:26 pm

Por fin chavo veo cosas útiles por aqui

Daniel Burns
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)

gutielua
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

ecentinela
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.

Jota
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…

unijimpe
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.

Jota
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.

unijimpe
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

gutielua
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í?

gutielua
Publicado: 13/09/2006 3:13 pm

Perdon quise decir que NO me funciona en Firefox. Sorry! :-(

Limtrack
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…

gutielua
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!!

unijimpe
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

alex
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!

alex
Publicado: 02/11/2006 1:59 pm

ok..
spoke too soon.
conflicts with ajax..
but still very good.


[…]   ThickBox-Press,超级炫目的链接弹出效果,支持图片和链接页面。   上传激活,实际效果可以去ThickBox查看,在文章中使用如下格式插入: [TBOXI] 链接名字, 图片地址, 图片注释[/TBOXI] [TBOX] 链接名字, 页面地址, 链接注释, 宽度, 高度[/TBOX] Tags: image, link, ThickBox […]

Antonio
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?

unijimpe
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.

Antonio
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.

WordPress插件: ThickBox-Press! | One Studio.
Publicado: 07/01/2007 9:15 am

[…] ThickBox-Press,超级炫目的链接弹出效果,支持图片和链接页面。 上传激活,实际效果可以去ThickBox查看,在文章中使用如下格式插入: [TBOXI] 链接名字, 图片地址, 图片注释[/TBOXI] [TBOX] 链接名字, 页面地址, 链接注释, 宽度, 高度[/TBOX] […]

gutielua
Publicado: 28/01/2007 1:15 am

Hola unijimpe!!
Tienes proyectada una nueva versión de este plugin?
SalU2!!
@ndrés

Luis
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

unijimpe
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

Luis Caldevilla
Publicado: 22/02/2007 8:23 pm

Aqui http://bollazos.com/?p=22
en el ejemplo 8 deberia de haber una imagen…

Luis Caldevilla
Publicado: 23/02/2007 8:09 am

Ya esta solucionado, donde me decias img scr deberia ser img src

Gracias Jim

Luis Caldevilla
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?
:)

Luis
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….

Digo
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

claudia
Publicado: 14/04/2007 1:25 pm

necesito un ejemplo de logicas descriptivas
un enunciado con su respectivo Tbox y Abox
GRACIAS

WP Plugins DB » Blog Archive » ThickBox-Press
Publicado: 20/05/2007 3:54 am

[…] Visit […]

Jose
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!

unijimpe
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.

Expresion-x
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

ali
Publicado: 18/09/2007 11:48 pm

donde agrego el var
var imgLoader = “loader.gif”;
ya que ami me saleu tambienn el object error

Fabio
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?

Samuel
Publicado: 21/11/2007 12:34 pm

Que niiiiiiiiiiice el plugin, me ha gustado mucho! jejeje
Felicitaciones

agustin
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

Brian
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

Nestor
Publicado: 10/02/2010 7:11 am

Muy interesante el plugin, espero que saques nuevas versiones de este plugin..

mark33sv
Publicado: 23/06/2011 12:25 pm

Me gustaria saber si el codigo es compatible con blogger de google.
Gracias.

Excelente colaboración.

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)