Contenido

Popups no intrusivos con ThickBox

25 Abr

+ 29

Via Ajaxian, descubro esta increible utilidad para mostrar contenidos mediante popupos no intrusivos al puro estilo Lightbox, con la diferencia de que la información a mostrar puede ser una página en vez de una imagen. Muy parecido al funcionamiendo de GreyBox.

ThickBox, es una utilidad fácil, muy facil de implementar y que consigue su misión, mostrar más información al usuario. Lo consigue con un peso realmente interesante (20kb) muy alejado de los 100kb de script.aculo.us.

[Demo][Descargar]

Modo de empleo

Añadimos las lineas de código que nos vincularán los fichero javascript que realizan dicha función.

  <script src=“js/jquery.js” type=“text/javascript”></script>
    <script src=“js/thickbox.js” type=“text/javascript”></script

Luego simplemente tendremos que indicar que es el enlace que queremos hacer popup, de forma realmente facil. 

   <a href=linkToHtmlFile?height=size&width=size title=“Add a caption” class=“thickbox”>Link Text or Image</a>

linkToHtmlFile = enlace a la imagen/URL.

height = Altura del marco a mostrar

width = Anchura del marco a mostrar

Y voalá, ya tenemos nuestro ThickBox funcionando ;).

El link “DEMO” está equivocado, debería ser éste:

[ Demo ]

Saludos

Nice! Works very well. If you are running WP2.0 and you use the built-in picture upload feature just below the post contents, upload an image, then on the browse tab click on it. Then click on “not linked”. It will change to “linked to image”. Then click “send to editor”. Now its a very quick change of the class (which is preset to “imagelink” for some reason) to “thickbox” and voila!

I think a cool feature of the plugin would be to change the behavior of the send to editor code so that changing the class isn’t even necessary.

I would ask, if there is some one to translate the isntructions in English, please. I have never expected my language (Bulgarian) to be understood by everybody.

I can see that the work is perfect, for which I Thank the developer :)
Beautiful work!

BTHW, why do you have that flags on top if they do not translate the page!?

En donde tengo que añadir esto :

y esto? :
Link Text or Image

????

saludos

Buenas cristian.

Lo has de poner en texto, cambiando linktoHTMLfile por el enlace y size por los tamaños que queramos.

muy dificil de configurar para los que no tienen muchos conocimientos de programación.

En nuestro apartado de weblog de esta web http://www.r4esviva.es/wordpress/index.php hemos puesto este plugin thickbox que funciona a la perfección , como podemos linkar las imagenes como en el original y no tener que clicar una a una. Gracias

Gracias por el artículo, me ha servido bastante ;-)

Bueno amigos… muy bonito y lo configuré xaxi guay de la ostia xD…. pero .. pero.. tengo un problema … y es que torres más altas han caido… la cosa es que me da problemas con la primera linea:

y bien amigos… como lo soluciono? … es vital dejarlo pues estoy haciendo una aplicación para webs ya creadas… y cambiaria las plantillas y la vdd no voy a quitarlo xD.. se que no es vital.. pero hay se queda… hay alguna solución viable???

porfavor sabeis como solucionarlo contestad a: jocker_69@msn.com

—!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”—

Perdon.. antes no salia.. el problema me lo da con la etiqueta DOCTYPE … cuando esta me sale el fondo mal.. no se pq … si sabeis solucionarlo seria de agrado recibir una respuesta en mi mail ;) .. un saludo

#16 ¿Tienes alguna URL donde pueda verlo?

Saludos

si … http://www.yedraflores.es … es una empresa de flores xD… es el primer sitio donde lo he aplicado (en plan de prueba) y bueno… si lo miras con IE dara un pequeño error… y porfavor.. contestame a jocker_69@msn.com … (porfavor)

buenos días, tengo una duda sobre el thickbox.

Necesito algun otro software para crear la galería de imagenes, o tengo que indicar mediante “id” cual es la imagen primera, segunda, tercera….última.

gracias y muy buen artículo.

oskar calvo.

Puedo llamar a thickbox desde codigo? es decir en una peticion ajax a una pagina php que realiza un proceso, visualizar una ventana de espera en un thickbox.

Es posible? alguien me puede ayudar con un ejemplo?

Gracias!

Como hago para llamar al ThickBox desde flash?. Busque en todos lados pero no encuentro la manera de hacerlo!

llamar a thickbox desde flash

ayuda!!!

Hola, he probado jquery con thickbox (varias versiones de ambos) y en todas tengo el mismo problema:
Cuando abro una ventana y me encuentro al final de la página (es decir que he utilizado el scroll del navegador) la ventana no aparece… en realidad aparece pero lo hace centrada arriba de todo (como si no hubiese tocado el scroll del navegador).
Esto ocurre en XP SP2 con IE6, cualquier ayuda estaré infinitamente agradecido, saludos.

Tengo que abrir un div en thickbox al coger el foco un campo de texto o textarea pero no hay manera…

Alguien sabria como hacerlo??? :(

hola
pueden explicarme paso a paso como introducir el codigo de thick box… porq lo he intentado y simplemente no corre… quisiera saber en que carpeta debe de estar el jquery.js, thickbox.css, y el thickbox.js…etc.
necesito su ayuda!!!!!!!, muchas gracias.
adios

les pongo el codigo de mi ejercicio….

Untitled Document

<a href=”Imagen 1.png” rel=”nofollow”>imagen</a>

@Vero: te falta indicar que se trata de un class="thickbox".
Saludos

Hola, tengo un problema.. cuando hago click sobre una imagen que debe aparecer en thickbox se despliega bien, pero tengo un margen inferior super grueso… se puede modificar???
mil grax….

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.


Cerrar
Enviar por Correo