ThickBox 3: a plugin for WordPress

Pubblicato: 28 maggio 2007 in Tecnico, WordPress
Tag:, ,

ThickBox 3 WordPress plugin. Get the latest release here (last updated 2007/09/29).
A plugin based on the awesome ThickBox 3 library useful to diplay anything (a single picture, a photo gallery, an iframed external web page) in a “web 2.0” stylish popup embedded in your WordPress post or page.
The code is based on the similar stimuli.ca Lightbox plugin.

To install: Unzip the package and put the entire miki-thickbox3 folder in your WordPress plugins folder, then activate it in WordPress.
To implement in a post or page:

Single image with thumbnail:
Add class=”thickbox” to the a tag of your thumbnail image.

Image gallery with tumbnails:
Add class=”thickbox” to the a tag of your thumbnail image. Give each link element the same rel element and value (example: rel=”myfirstgallery”).

Iframed external pages:
Add class=”thickbox” to the a tag of your link. In the href attibute, after the URL add the following parameters:
?KeepThis=true&TB_iframe=true&height=400&width=600
Demo: Open Yahoo.com in a ThickBox

Features (from the main ThickBox page):

* ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 20k, uncompressed it’s 58k.
* The ThickBox JavaScript code and CSS file only add an additional 15k (only 10k by using the thickbox-compressed.js) on top of the jQuery code. The CSS file could additionally be compressed if need be.
* ThickBox will resize images that are bigger than the browser window.
* ThickBox offers versatility (images, iframed content, inline content, and AJAX content).
* ThickBox will hide form elements in Windows IE 6.
* ThickBox will remain centered in the window even when the user scrolls the page or changes the size of the browser window. Clicking an image, the overlay, or close link will remove ThickBox.
* Due to the ThickBox creator’s view that transitions should be tailored by individual authors, ThickBox windows do not implement fancy transitions. Feel free to add them as you see fit. Is this a feature? Well, some might say it is.
* ThickBox can be invoked from a link element, input element (typically a button), and the area element (image maps).

Have fun.

UPDATES:

2007/09/29: Fixed the path to the loading image (thaks to Justin) and updated the thickbox library to the latest version (3.1).

2008/12/11: Tested with WordPress 2.7: ok!

Annunci
commenti
  1. […] appena pubblicato ThickBox 3 plugin, il mio primo plugin per […]

  2. Justin ha detto:

    This is handy – thanks for putting it together. The only thing I had to do besides dropping it in and turning it on was to adjust the path of the loading animation image, which wasn’t showing up. I just changed line 8 of thickbox-compress.js to reflect the actual path of the image. So, that line might look something like:

    var tb_pathToImage = "/wp-content/plugins/miki-thickbox3/thickbox/images/loadingAnimation.gif";

  3. miki ha detto:

    Thank you for addressing this issue. I’ve just published the correct version.

  4. Lin ha detto:

    hi mikki! thanks a lot for you awesome work 😉 this plugin is working fine under safari 3.0 mac os x. But with firefox the background doesn’t turns dark! do you already know this issue?

    cheers,
    lin

  5. miki ha detto:

    That’s because in FF the opacity is working. Search for the keyword ‘opacity’ in the file thickbox.css and make some tests.

  6. victor ha detto:

    Hi. Installed your plugin, great work! One question: how can i remove “or Esc key” ?

  7. miki ha detto:

    Download here the uncompressed version of thickbox 3 and place it under the thickbox subfolder, in thickbox3.php on line 20 change ‘thickbox-compressed.js’ with ‘thickbox.js’ and finally in thickbox.js look at lines 128, 196 and 204.

  8. jefbak ha detto:

    Being new to jquery but good at css, I am struggling with adding transitions. Since I am using the iframe version to open html pages in thickbox, I want the box to slide open.

    Simple I know, but any help for a newbie would be great.

  9. jefbak ha detto:

    Being new to jquery but good at css, I am struggling with adding transitions. Since I am using the iframe version to open html pages in thickbox, I want the box to slide open.

    Simple I know, but any help for a newbie would be great.

  10. Edgar ha detto:

    Hi! Since I’ve updated my wordpress to 2.3.2, your plugin doesn’t work, what could it be?

  11. Uffe ha detto:

    Nice plugin, which I installed recently, just prior to the release of WordPress 2.5. Unfortunately, it seems to break under WP 2.5 – formatting is screwed up. E.g. linebreaks and indented unnumbered lists, which is moved left instead of right (outdented?).

    Regards
    /Uffe

  12. Miki ha detto:

    I don’t know any formatting issue (yet) with the plugin. Can you post an example please?
    In fact this page itself is rendered via a 2.5 WordPress version.

  13. Uffe ha detto:

    Please see my blog for screendumps:

    Thickbox 3 formatting errors

    My current the is based on WP Classic, optimized for WPG2 and with Blue Fade style by Alex King. But as the screendumps will show, the errors are present in current Default and Classic themes as well.

    Regards
    /Uffe

  14. jocuri ha detto:

    Keep up the good work! 10q

  15. Jocuri ha detto:

    I don’t know any formatting issue (yet)

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...