var _gaq = _gaq || []; _gaq.push([\'_setAccount\', \'UA-13211647-1\']); _gaq.push([\'_trackPageview\']); (function() { var ga = document.createElement(\'script\'); ga.type = \'text/javascript\'; ga.async = true; ga.src = (\'https:\' == document.location.protocol ? \'https://ssl\' : \'http://www\') + \'.google-analytics.com/ga.js\'; var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(ga, s); })();

Auto ThickBox Plus

Auto ThickBox Plus plugin

* Click on the image above to see ThickBox behavior.

Index

Introduction

Auto ThickBox Plus is WordPress plugin that applies [ThickBox script](http://thickbox.net/) to your site automatically. ThickBox is commonly-used Lightbox-like plugin, and can overlay linked image, inline, iFramed and AJAX content on the page in simple effect. All you have to do is write links like below, and the linked contents will be overlaid by clicking themselves.

<a href="image"><img src="thumbnail" /></a>
<a href="image">Image Content</a>
<a href="#TB_inline?inlineId=id">Inline Content</a>
<a href="url?TB_iframe">iFramed Content</a>
<a href="url" class="thickbox">AJAX Content</a>

Features

See “Auto ThickBox Plus Features” in WordPress.org.

Download

auto-thickbox-plus.zip
  • v1.9, 2012-10-11, 925 KB
  • Free license (for personal & non-commercial, donate to support)
auto-thickbox-plus.zip
  • v1.9, 2012-10-11, 925 KB
  • Commercial license ($5.00)
  • Paid support (technical questions, customization, etc.)

Supported Browsers

  • Internet Explorer
  • Mozilla Firefox
  • Google Chrome
  • Opera
  • Safari

Past Releases

Install

See “Installation” in WordPress.org.

Demo

Single Image

Image1 - World Map made of Leaves
Image2 - Blue Planet on Green Leaf
Image3 - KEEP THIS PLANET CLEAN
Image4 - The Transparent Globe

Gallery Images

Image1 - World Map made of Leaves
Image2 - Blue Planet on Green Leaf
Image3 - KEEP THIS PLANET CLEAN
Image4 - The Transparent Globe

No ThickBox Images

Image1 - World Map made of Leaves
Image2 - Blue Planet on Green Leaf
Image3 - KEEP THIS PLANET CLEAN
Image4 - The Transparent Globe

Text Links to Image

Single Image
Image1,
Image2,
Image3,
Image4
Gallery Images
Image1,
Image2,
Image3,
Image4
No ThickBox Images
Image1,
Image2,
Image3,
Image4

Usage

See “Usage” in WordPress.org.

FAQ

See “FAQ” in WordPress.org.

Support Me

Any comments will be very helpful and appreciated. Thank you for your support!

Special Thanks

31 Responses so far.

  1. […] Auto Thickbox Plus Plugin Official Site [Japanese] […]

  2. Sippu says:

    “Auto Thickbox Plus”利用させていただきました。
    いろいろあって悩んだのですがテキストリンク対応が便利そうだったのでこれを選びました。
    ありがとう。

    • attosoft says:

      コメントありがとうございます。
      ほかのポップアップ系のプラグインと比べると多機能ではありませんが、シンプルに使うには十分便利な機能が小さくまとまっていると思います。

  3. Jhorman says:

    Can I customize width and height ?

    • attosoft says:

      ThickBox script will calculate the size of popup window based on image size.
      So if you want to customize image size, I think you need to modify thickbox.js.

      If you want to resize image size to half, for example, write the following code at about line 133 in thickbox.js (thickbox_uncompressed.js).

      imageWidth = imageWidth / 2;
      imageHeight = imageHeight / 2;
      
  4. […] WordPress: シンプルな効果で画像をポップアップ表示する Auto ThickBox Plus プラグイン | attosoft.info Blog […]

  5. murat says:

    Can I iframe customize width and height ?

    • attosoft says:

      Yes, you can. Here are the sample URLs to specify iframe parameters.

      • iframe.html?TB_iframe=true&width=600&height=400
      • http://example.com/?foo=bar&TB_iframe=true
      • modal.html?TB_iframe=true&modal=true
  6. […] you like this plugin, please consider making a donation to support plugin […]

  7. Guan Gui says:

    Hey,

    It seems the following bug still persists in jQuery 1.7.1. From your code thickbox.js line 896-902:

    // XXX: On display:none, width/innerWidth/outerWidth() returns 0, outerWidth(true) returns only margin in v1.4.4 or earlier
    // XXX: On display:none, innerWidth/outerWidth() returns width(), outerWidth(true) returns only margin in v1.6.2 or earlier
    if (jQuery("#TB_window").css("display") == "none" &&
    	(tb_versionCompare('1.4.4') > 0 || (tb_versionCompare('1.6.2') > 0 && include)))
    	jQuery.swap(jQuery("#TB_window")[0], {position: "absolute", visibility: "hidden", display: "block"}, setter);
    else
    	setter();
    

    Have to make it satisfy the first condition in order to make your plugin work.

    Please have a look. Thanks!

    -Guan

    • attosoft says:

      Hi Guan, Thanks for your comment.

      Generally it is no need to call jQuery.swap() in getting width/height. But jQuery has width/height bugs in v1.4.3 (or earlier) and v1.6.1 (or earlier). So the code above calls jQuery.swap() for a workaround. For details, see release notes below.

      I checked your site. Your site loads jQuery v1.4.2 and v1.7.1. I’m not sure for now but I think this is the cause.

  8. kami says:

    Hello ^^
    can u change the border color of the pictures?
    Coz i have been look but i cannot find the setting od this? :/

    photo
    http://i304.photobucket.com/albums/nn179/princessgirlbunny/Captura-de-pantalla-2012-05-18-a-las-0912.jpg

    • attosoft says:

      Hi kami,

      You can customize image/window borders by using Border option. Border option syntax is “border-width border-style border-color”. So #666 and #ccc is border-color. For details, see border description in MDN (Spanish).

    • kami says:

      I am sorry for my ignorance, i dont understand this ^^;
      I have to check that in my theme layout or in ur plugin where says EDIT and i can see the php and CSS ??.
      Thank u :)

    • attosoft says:

      Sorry for my bad English. You can change the border color through Options page.

      1. Access Dashboard screen in WordPress
      2. Click [Settings] – [Auto ThickBox Plus] in sidebar
      3. Replace “#666″/”#ccc” with “#CFCFCF” in [View] – [Border] – [Image (Top left/Bottom right)] option
    • kami says:

      So sorry, i though was from ur plugin thats why i asked to you, i found the reply, i had to go to my worpress/content – media php…
      thank u so much for ur time anyway :)

    • attosoft says:

      media.php!? Oh I understand what you say finally. I’m talking about Auto ThickBox Plugin but you are talking about just WordPress Gallery. You seem to try to change the border color of thumbnails in WordPress Gallery. So you need to overwrite the following CSS rule written in media.php.

      #gallery-1 img {
          border: 2px solid #CFCFCF;
      }
      
  9. Mohammadi says:

    Hello
    please help me
    Buttons prev & next On images not work
    What do I need?
    Thanks

    • attosoft says:

      Hi Mohammadi,

      Thank you for using Auto ThickBox Plus.

      I found the following style in nggallery.css at your site.

      #TB_window {
      	z-index: 9999 !important;
      }
      

      By this code Background area has been in front of ThickBox window because background z-index is 10100. As a result, all you can do is click background to click ThickBox window, and prev/next images and links don’t work. I guess you edited nggallery.css through “Dashboard – Gallery – Style” option of NextGEN Gallery. you need to remove the code.

      Additionally, I recommend you set more than 5% value at “Action – Mouse Click – Clickable Range” option, and set the following style because you use larger custom images.

      #TB_closeWindow {
          margin-top: -2px;
          padding-top: 0;
      }
      
    • Mohammadi says:

      Thank you very much
      My problem was solved.
      I am very interested by payment money in developing this plugin can help you. But Unfortunately, global banks are banned in Iran.
      I have one more question.
      when open the site not completed When click on the images not load Auto ThickBox Plus and go to link image
      give me a Solution how can I open the images by Auto ThickBox Plus before uncompleted load site?
      Thanks

    • attosoft says:

      Thanks for your concern about donation. I wish you could but it’s OK. I’d be grateful if you support me by the followings instead.

      when open the site not completed When click on the images not load Auto ThickBox Plus and go to link image

      It’s a difficult issue and may be said as one of HTML/JavaScript specifications. You can improve the situation by optimizing Web site – reducing site size, changing order of loading JavaScript, and so on.

  10. Ivan says:

    Hi attosoft,
    i have a strange problem. Go to lnx.egosoundfactory.it, i have in homepage, a multi-image portfolio. I downloaded Auto ThickBox Plus, and istalled it. When i active the plugin, the multi-image portfolio on the homepage, doesn’t work!!! If i deactive the plugin, back to works!!!
    Could you help me?
    Thanks

  11. iwobz says:

    hey,i am using your plugin and it works well,i love it deeply.But i found that when i click on a image which has a large size, i cannot see it clearly. so i want to know can you add a function that can show a picture in it’s actual size mode, you can reference this page:http://www.linuxdeepin.com/forum/18/7302

    • attosoft says:

      Hi iwobz,

      Thank you for using Auto ThickBox Plus. If you are using the latest version, you’ll see the following options for image size.

      • General – Auto Resize
      • Action – Mouse Click – Image – Expand/Shrink
      • Action – Mouse Wheel – Image – Scale
      • Action – Drag & Drop – Window (Image) – Resize

      In addition, I intend to add “Expand/Shrink button” option to the plugin in next release.

    • iwobz says:

      yes, my blog runs version 1.7 currenly, i do see those settings except Expant/Shrink, expect your new vertion!

    • attosoft says:

      You can see “Expand/Shrink” option by reinstalling the plugin. See Changelog for details.

  12. richard says:

    Does this work with an image map?

    • attosoft says:

      Hi richard, I’m sorry for the late reply.

      Does this work with an image map?

      Yes, ThickBox supports image maps.

      <img src="image" usemap="#map" />
      <map id="map">
        <area href="URL" class="thickbox" />
      </map>
      

Leave a Reply to Sippu Cancel reply

Your email address will not be published.