Auto ThickBox Plus WP Plugin

Auto Install

1. Access Dashboard screen in WordPress
2. Select [Plugins] – [Add New]
3. Input “thickbox” into text field, and click [Search Plugins]
4. Click ‘Install Now’ at ‘Auto ThickBox Plus’
5. Click ‘Activate Plugin’
6. Upload images to WordPress Gallery or write links to images, inline, iFrame or AJAX contents

Manual Install

1. Download auto-thickbox-plus.zip
2. Access Dashboard screen in WordPress
3. Select [Plugins] – [Add New] – ‘Upload’ tab
4. Upload the plugin zip file, and click [Install Now]
5. Click ‘Activate Plugin’
6. Upload images to WordPress Gallery or write links to images, inline, iFrame or AJAX contents

Manual Install via FTP

1. Download auto-thickbox-plus.zip, and unzip it
2. Upload the plugin folder to the /wp-content/plugins/ directory
3. Activate the plugin through the ‘Plugins’ menu in WordPress
4. Upload images to WordPress Gallery or write links to images, inline, iFrame or AJAX contents

* Note: If Auto Thickbox (not Plus) plugin is installed, you need to deactivate or uninstall it before activating Auto ThickBox Plus plugin. You cannot activate both this plugin and the original plugin at the same time.

Customization

This is available options at Auto ThickBox Plus Options in ‘Settings’ menu. You can customize the behavior & design of the plugin through these options. See also Screenshots.

• General
  • Default Display Style (Single Image or Gallery Images)
  • ThickBox on Text Links (Auto or Manual)
  • Auto Resize
  • ThickBox Resources (original thickbox.js/css)
• Action
  • Mouse Click
  • Mouse Wheel (Scroll)
  • Drag & Drop
  • Keyboard Shortcuts
• View
  • Position
  • Font Family & Weight
  • Font Size
  • Text Color
  • Background Color
  • Margin
  • Border
  • Border Raidus
  • Opacity
  • Box Shadow
  • Text Shadow
• Text
  • Title, Caption
• Image
  • Prev/Next, Close, Loading image, etc.
• Effect (beta)
  • Open, Close, Transition effects and Speed

1. Pop-up image in “Single Image” style
2. Pop-up image in “Gallery Images” style (with “Prev/Next” links)
3. Auto ThickBox Plus Options page
4. Customization example (pink background, transparent window, rounded corners, no borders, specified images, bold font, etc.)

Usage

WordPress Gallery

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

NextGEN Gallery

Upload images to NextGEN Gallery through [Dashboard] – [Gallery] – [Add Gallery / Images] page, then write NextGEN Gallery tags like below.

[nggallery id=x] 

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> 

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

<a href="image.png"> 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>)
   • 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" 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">Anchor</a> 

iFramed Content

Write links to internal/external URLs and add “thickbox” to a@class (<a>). URLs are opened inside <iframe>. Window title is specified by a@title (<a title="foo">).

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

Here is sample codes to open static/dynamic page, text file and Adobe Flash.

<a href="http://example.com/file.html">Static page</a> <a href="http://example.com/file.php?bar=baz">Dynamic page</a> <a href="http://example.com/file.txt">Text file</a> <a href="http://example.com/file.swf">Adobe Flash</a> 

Here is sample codes to open Google Maps, YouTube, Vimeo and Dailymotion. You need to use embedded URL.

<a href="http://maps.google.com/maps?ll=51.477222,0&output=embed">Google Maps</a> <a href="http://youtube.com/embed/K-Rs6YEZAt8">YouTube</a> <a href="http://player.vimeo.com/video/12297655">Vimeo</a> <a href="http://dailymotion.com/embed/video/xninjh">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=true&width=600&height=400&modal=true">Web page</a> <a href="http://example.com/?bar=baz&TB_iframe=true&width=600&height=400&modal=true">Web page</a> 

AJAX Content

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

<a href="file.html" title="foo">Static page</a> <a href="file.php?bar=baz" 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">Static page</a> <a href="file.php?bar=baz&width=600&height=400&modal=true">Dynamic page</a> 

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

<a href="file.html?TB_iframe=true">Static page</a> <a href="file.php?bar=baz&TB_iframe=true&modal=true">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=true&modal=true” is removed and “bar=baz” is kept as query.