How to get the WPG2 plugin to work with Thickbox

If you have a Gallery2 installation intergrated with Wordpress 2.3 - using the WPG2 plugin - then you are probably aware that the G2Image chooser includes a choice for inserting images into posts using the LightBox effect and pointing to a full-sized image.

Well, i needed a choice/option that worked in a similar way but for Thickbox. Since both Lightbox and Thickbox are triggered by including special attributes on each anchor (a link) and pointing to a full-sized image - i figured it could not be that hard to find and edit the code that inserts the LightBox bit and swap it out for some Thickbox code.

LightBox format is: < a href="fullsized.jpg" rel="lightbox" >< img src="thumb.jpg" />< /a >
ThickBox format is: < a href="fullsized.jpg" class="thickbox" >< img src="thumb.jpg" />< /a >

All i ended up doing was adding the thickbox class=”thickbox” in addition to the lightbox rel=”lightbox”.

So the final result inserts the combined code into your WordPress posts:

< a href="fullsized.jpg" class="thickbox" rel="lightbox" >< img src="thumb.jpg" />< /a >

Now it works with either Lightbox or Thickbox scripts (i wouldn’t use both at the same time).
Note: you still need to provide the appropriate javascript (Thickbox or Lightbox) and link to it in your header file for this to work.

Tested with:
WordPress v2.3.1
Gallery2 v2.2.3 core 1.2.0.5
WPG2 v3.0.2

Anyway, here are the 3 WPG2 plugin files i edited to get this going:

wp-content/plugins/wpg2/g2image/g2image.php - [download the changed file here]
wp-content/plugins/wpg2/g2image/jscripts/functions.js - [download the changed file here]
wp-content/plugins/wpg2/wpg2embed.inc - [download the changed file here]

These are the exact edits i made (but watch out! because copy/pasting seems to change the single quote marks):

g2image.php - modify option to give choice (in dropdown menu of W2Image chooser) for specifically inserting Thickbox

$message[‘thumbnail_lightbox’] = T_(‘Thumbnail with LightBox link to Fullsized Image’);
$message[‘thumbnail_lightbox’] = T_(‘Thumbnail with ThickBox link to Fullsized Image’);

functions.js - modify javascript to do the actual inserting of code with Thickbox

htmlCode += ‘<a href="’ + fullsize_img[i] + ‘" rel="lightbox’;
htmlCode += ‘<a href="’ + fullsize_img[i] + ‘" class="thickbox" rel="lightbox’;

wpg2embed.inc - modify wpg2tag so option (in dropdown menu of W2Image chooser) will work with Thickbox [optional]
Note: for this to work you also need to have “Should WPG2 Tags have Lightbox Support?” set to “Yes” in your backend: WPG2 > Lightbox Options.

$img = str_replace(‘><img ‘, ‘ rel="lightbox[’.$post-/>ID.‘]"><img ‘, $img);
$img = str_replace(‘/><img ‘, ‘ class="thickbox" rel="lightbox[’.$post-/>ID.‘]"><img ‘, $img);

Comments 1

  1. grosbouff wrote:

    This will be useful if you want to display php generated images :
    http://www.arlt.tv/blog/2007/12/19/patching-thickbox-to-support-dynamically-php-generated-images/

    Posted 09 May 2008 at 4:56 am

Post a Comment

Your email is never published nor shared. Required fields are marked *