WordPress.org

Auto ThickBox Plus does not work

First, check if any messages are output in error console.

• Internet Explorer: Double-click the warning icon in status bar, or click [Tools] menu - [Developer Tools], or press [F12] key
• Mozilla Firefox: Click [Firefox/Tools] menu - [Web Developer] - [Error Console], or press [Ctrl+Shift+J] key
• Google Chrome: Click [Tools] menu - [JavaScript console], or press [Ctrl+Shift+J] key
• Opera: Click [Opera] menu - [Page] - [Developer Tools] - [Error Console], or press [Ctrl+Shift+O] key
• Safari (Mac): Click [Develop] menu - [Show Error Console], or press [Option-Command-C] key
  • Safari (Windows): Click Page Menu Button - [Developer] - [Show Error Console], or press [Ctrl+Alt+C] key
  • Note: To enable the developer tools, click Advanced in Safari preferences and check [Show Develop menu in menu bar]

Next, check the followings.

1. Modified ThickBox in the plugin is loaded properly
2. Built-in ThickBox in WordPress conflicts with modified ThickBox
3. "thickbox" class is added to links

Then, perform the troubleshooting below.

• Deactivate current theme because some themes output invalid header/footer, or load built-in ThickBox directly
• Deactivate plugins that load built-in ThickBox directly, such as Events Calendar
• Deactivate plugins that optimizes JS/CSS files, such as W3 Total Cache, WP Minify, CloudFlare, Head Cleaner and Head JS
• Output JS/CSS files to footer, by selecting [General - ThickBox Resources - Footer] option in Settings screen
• Use built-in ThickBox in WordPress instead, by selecting [General - ThickBox Resources - Built-in ThickBox] option in Settings screen

If the problem still persists, please send me your site URL via support forum or contact form.

1. Modified ThickBox in the plugin is loaded properly

The following <script> and <style> tags should be output in your site.

<script type='text/javascript' src='http://example.com/wp-content/plugins/auto-thickbox-plus/thickbox.min.js?ver=1.x'></script>
<link rel='stylesheet' id='thickbox-css' href='http://example.com/wp-content/plugins/auto-thickbox-plus/thickbox.min.css?ver=1.x' type='text/css' media='all' />

2. Built-in ThickBox in WordPress conflicts with modified ThickBox

The following <script> and <style> tags should NOT be output in your site.

<script type='text/javascript' src='http://example.com/wp-includes/js/thickbox/thickbox.js?ver=3.1-20111117'></script>
<link rel='stylesheet' id='thickbox-css' href='http://example.com/wp-includes/js/thickbox/thickbox.css?ver=3.x.x' type='text/css' media='all' />

3. "thickbox" class is added to links

The plugin adds "thickbox" class to links to images automatically. Thereby <a> tags like below should have class="thickbox" attribute.

<a href="image" class="thickbox"><img src="thumbnail" alt="caption" /></a>
<a href="image" class="thickbox" title="caption">Text</a>

Where is Auto ThickBox Plus Settings screen?

1. Access Dashboard screen in WordPress
2. Click [Settings] - [Auto ThickBox Plus] in sidebar

How to localize the plugin into your language

You can localize the plugin with Poedit and "languages/auto-thickbox.pot" file. See Localization for details.

Differences between Auto Thickbox and Auto ThickBox Plus

At first, Auto ThickBox Plus was created besed on Auto Thickbox v.2.0.3 (Jul 20th, 2011). Then I added many functions and fixed many bugs, so now Auto ThickBox Plus has few code of Auto Thickbox. See also Changelog for more information.

How to use modified ThickBox from other plugins

Modified ThickBox in the plugin is also available in other plugins that use built-in ThickBox in WordPress, such as NextGEN Gallery. Auto ThickBox Plus replaces built-in ThickBox with modified ThickBox dynamically.

1. Install NextGEN Gallery, and activate it
2. Access [Dashboard] - [Gallery] - [Options] - [Effects] tab
3. Select [JavaScript Thumbnail effect] - [Thickbox] option
4. Write NextGEN Gallery tags (e.g. [nggallery id=1])

About [General - Display Style] setting

When [Gallery Images] option is selected, the plugin displays all images on the page as one gallery. You can switch current image by clicking "Prev/Next" links without closing ThickBox window.

When [Single Image] option is selected, the plugin displays each images on the page one by one. You cannot switch current image without closing ThickBox window. To display some images as a gallery, you need to set rel="gallery-id" attribute to <a> tag manually as below.

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

About [General - Auto ThickBox] setting

When [Text links to images] option is checked, the plugin applies ThickBox to text links to images automatically.

When [Text links to images] option is not checked, the plugin does not apply ThickBox to text links. To apply ThickBox to text links, you need to set class="thickbox" attribute to <a> tag manually as below.

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

How to display only an image

When "View" setting is as follows, only an image will be displayed without margin, padding, border, caption and button.

• Position - Caption - None
• Margin - Image - 0 [px]
• Border - Window / Image (Top left / Bottom right) - None

How to upload images via Media Uploader

1. Click [Select a File] button at "Image" setting
2. Drag an image file from your computer and drop to "Drop files here"
   • or Click [Select Files] button and choose an image file from your computer
3. Click [Insert Image] button

How to use built-in ThickBox instead

1. Access [Dashboard] - [Settings] - [Auto ThickBox Plus] screen
2. Select [General] - [ThickBox Resources] - [Built-in ThickBox] option

* Note: Functions only in modified ThickBox will be disabled, such as enhanced Auto Resize, most mouse/keyboard actions, animation effects, high compatibility with themes and plugins. Moreover, many improvements and bug fixes won't be applied.

How to insert line feeds in title/caption

Modified ThickBox supports multiline (line breaks) in title/caption. The following codes in caption/title are replaced with <br />.

• LE: 
 (dec), 
 (hex)
• CR: 
 (dec), 
 (hex)
• CRLF: 
 (dec), 
 (hex)

<a href="image.png" title="line1&#10;line2&#10;line3">Text</a>