WordPress.org

Usage

WordPress Gallery

Upload images to WordPress Gallery through the 'Post/Page' screen, then write Gallery Shortcode with link="file" option.

[gallery link="file"]

NextGEN Gallery

Upload images to NextGEN Gallery through [Dashboard] - [Gallery] - [Add Gallery / Images] page, then select "Thickbox" item in [Options] - [Effects] option and write NextGEN Gallery tags like below.

[nggallery id=1]

Single Image

Write image links to images. Image caption is specified by img@alt (<img alt="foo" />).

<a href="image.png">
    <img src="image_s.png" alt="foo" />
</a>

Or write text links to images. Image caption is specified by a@title (<a title="foo">).

<a href="image.png" title="foo">Text</a>

* You can set width, height and modal parameters like below.

<a href="image.png?width=100&height=100&modal=true">Text</a>

Gallery Images

To display images in "Gallery Images" style, add arbitrary value to a@rel (<a rel="foo">).

<a href="image1.png" rel="foo">
    <img src="image1_s.png" alt="image1" />
</a>
<a href="image2.png" rel="foo">
    <img src="image2_s.png" alt="image2" />
</a>

No ThickBox

To disable ThickBox on specific images, add "nothickbox" to a@class (<a class="nothickbox">).

<a href="image.png" class="nothickbox">
    Anchor (image or text)
</a>

Inline Content

1. Write inline content with @id (e.g. <div id="foo">...</div>)
   • Inline content can be set to hide (e.g. <div style="display: none"> or <div style="visibility: hidden">)
2. Write links and add "thickbox" to a@class (<a class="thickbox">)
   • Window title is specified by a@title (<a title="bar">)
3. Set #TB_inline to a@href (<a href="#TB_inline">)
4. Add inlineId parameter to a@href (<a href="#TB_inline?inlineId=foo">)

<div id="foo" style="display: none">
    <div>Here is inline content.</div>
</div>
<a href="#TB_inline?inlineId=foo" class="thickbox" title="bar">Anchor</a>

* You can set width, height and modal parameters like below. For details, see Inline Content Examples.

<a href="#TB_inline?inlineId=foo&width=600&height=400&modal=true" class="thickbox">Anchor</a>

iFramed Content

Write links to internal/external URLs, add "thickbox" to a@class (<a class="thickbox">) and add TB_iframe parameter to a@href (<a href="URL?TB_iframe">). URLs are opened inside <iframe>. Window title is specified by a@title (<a title="foo">).

<a href="http://example.com/?TB_iframe" class="thickbox" title="foo">Web page</a>

Here are sample codes to open static/dynamic page, PDF, plain text, QuickTime, MPEG, Adobe Flash and Shockwave.

<a href="file.html?TB_iframe" class="thickbox">Static page</a>
<a href="file.php?bar=baz&TB_iframe" class="thickbox">Dynamic page</a>
<a href="file.pdf?TB_iframe" class="thickbox">Adobe PDF</a>
<a href="file.txt?TB_iframe" class="thickbox">Plain Text</a>
<a href="file.mov?TB_iframe" class="thickbox">QuickTime Movie</a>
<a href="file.mpg?TB_iframe" class="thickbox">MPEG</a>
<a href="file.swf?TB_iframe" class="thickbox">Adobe Flash</a>
<a href="file.dcr?TB_iframe" class="thickbox">Adobe Shockwave</a>

Here are sample codes to open Google Maps, Google Docs, Evernote, Flickr, Picasa Web Albums, SkyDrive, YouTube, Vimeo and Dailymotion. You need to use embedded URL.

<a href="http://maps.google.com/maps?ll=51.477222,0&output=embed" class="thickbox">Google Maps</a>
<a href="https://docs.google.com/document/pub?id=XXX&embedded=true" class="thickbox">Google Docs</a>
<a href="https://docs.google.com/spreadsheet/pub?key=XXX&widget=true" class="thickbox">Google Spreadsheets</a>
<a href="https://www.evernote.com/shard/s23/sh/XXX/YYY" class="thickbox">Evernote</a>
<a href="http://farm5.staticflickr.com/4051/4386822005_c434921844.jpg">Flickr (Image)</a>
<a href="https://picasaweb.google.com/lh/photo/XXX?feat=embedwebsite" class="thickbox">Picasa Web Albums</a>
<a href="https://lh4.googleusercontent.com/XXX/YYY/ZZZ/image.png" class="thickbox">Picasa Web Albums (Image)</a>
<a href="https://skydrive.live.com/embed?resid=XXX" class="thickbox">SkyDrive</a>
<a href="http://youtube.com/embed/K-Rs6YEZAt8" class="thickbox">YouTube</a>
<a href="http://player.vimeo.com/video/12297655" class="thickbox">Vimeo</a>
<a href="http://dailymotion.com/embed/video/xninjh" class="thickbox">DailyMotion</a>

* You can set width, height and modal parameters like below. For details, see iFramed Content Examples.

<a href="http://example.com/?TB_iframe&width=600&height=400&modal=true" class="thickbox">Web page</a>
<a href="http://example.com/?bar=baz&TB_iframe&width=600&height=400&modal=true" class="thickbox">Web page</a>

AJAX Content

Write links to internal files and add "thickbox" to a@class (<a class="thickbox">). The files on the same domain are opened without <iframe>. Window title is specified by a@title (<a title="foo">).

<a href="file.html" class="thickbox" title="foo">Static page</a>
<a href="file.php?bar=baz" class="thickbox" title="foo">Dynamic page</a>

* You can set width, height and modal parameters like below. For details, see AJAX Content Examples.

<a href="file.html?width=600&height=400&modal=true" class="thickbox">Static page</a>
<a href="file.php?bar=baz&width=600&height=400&modal=true" class="thickbox">Dynamic page</a>

To force internal files to open inside <iframe>, Add TB_iframe parameter to a@href (<a href="file?TB_iframe">).

<a href="file.html?TB_iframe" class="thickbox">Static page</a>
<a href="file.php?bar=baz&TB_iframe" class="thickbox">Dynamic page</a>

* Note: Parameters after TB_iframe are removed (i.e. Parameters before TB_iframe are kept as query). In the code above, "&TB_iframe&modal=true" is removed and "bar=baz" is kept as query.

Invocation from Buttons and Image Maps

ThickBox can be invoked from the following elements.

• link elements - URL is specified by href attribute (<a href=""></a>)
• input elements - URL is specified by alt attribute (<input alt="" />)
• area elements - URL is specified by href attribute (<area href="" />)

Here is a sample code to invoke ThickBox from a button.

<input type="button" alt="image.jpg" class="thickbox" title="foo" value="bar" />

Localization

You can localize the plugin with Poedit. Here is how to translate the plugin into your language.

1. Download Poedit and install it
2. Run Poedit and select your language
3. Input your name and mail address (optional)
4. Open "auto-thickbox-plus/languages/auto-thickbox.pot" file
5. Select original string and input its translation
6. Save the file as "auto-thickbox-[LANG].po"

"[LANG]" is a language code. For instance, "de_DE" is for German, "sv_SE" is for Swedish, "pt_BR" is for Portuguese spoken in Brazil. If you want to know your language code, see WordPress in Your Language. If you need more information, see Translating WordPress.

I would be grateful if you would send me any translation files. Here are the available translations included in the latest plugin.

• Dutch (nl_NL) by Michel Bats
• French (fr_FR) by Jean-Bastien Prévots
• Italian (it_IT) by Gianni Diurno
• Japanese (ja) by attosoft
• Persian/Farsi (fa_IR) by Ali Mohammadi
• Spanish (es_ES) by Juan Antonio Peón
• Swedish (sv_SE) by Lukas Häusler

If you have any questions, feel free to contact me.