Thickbox on top of Another Image Gallery module

How to integrate thickbox on top of imagegallery in a few minutes:

(greatly inspired from Bazzz How to integrate Lightbox with the Another Image Gallery script post: many thanks. original lightbox post: http://forum.websitebaker.org/index.php/topic,3855.msg25362.html#msg25362)

= PRELIMINARY WORK =
1. Download and install the Another Image Gallery module (http://addons.websitebaker.org/modules/dlg_by_groups/dlc.php?file=33)

2. Customize the module
3. Upload some test pictures
4. Once it is working download the thickbox files:
a. Jsquery javascript file (compressed version) : http://jquery.com/src/jquery-latest.pack.js
b. Thickbox javascript file (compressed version) : http://jquery.com/demo/thickbox/thickbox-code/thickbox-compressed.js
c. Thickbox css file: http://jquery.com/demo/thickbox/thickbox-code/thickbox.css
d. Thickbox load image file: http://jquery.com/demo/thickbox/images/loadingAnimation.gif

5. In your Website baker installation create two subfolder in the WB_URL/lib directory
a. one called jsquery
b. one called thickbox

= ADAPTING THE JAVASCRIPT TO YOUR ENVIRONMENT =
1. Modification of the javascript files
Once you have included the .js files, open thickbox.js or thickbox-compressed.js and locate the tb_pathToImage variable at the top of the page. Once you have found it, make sure to change the value of tb_pathToImage to the path where the loadingAnimation.gi f file is located on your own server. (if you installed it on the root folder this would be /lib/thickbox/loadingAnimation.gif)

6. Upload the jsquery javascript file to the jsquery folder
7. Upload all the other files to the thickbox folder

= UPGRADING ANOTHER IMAGE GALLERY MODULE =

1. Locate and edit the file in order to modify the generated image links in order to include the thickbox requirement
Objectives:
* Create a link element (<a href>)
* Give the link a class attribute with a value of thickbox (class="thickbox")
* Provide a path in the href attribute to an image file (.jpg .jpeg .png .gif .bmp

How to:
* Find the view.php file you will find on your server in the module/imagegallery folder once you have installed the image galleru module
* Save a copy of the file (just in case)

2. Create a function in the view.php file

Code:

Code:

function stripcomment($filename, $divider)
{
$commentTemp = explode($divider, $filename);
$comment = substr($commentTemp[1], 0, (strlen((string) $commentTemp[1]) - 4));
$comment = str_replace("<-", "</", $comment);
$comment = str_replace("->", "/>", $comment);
return htmlentities($comment);
}

Around line 57 you'll find this:
Code:

Code:

$included = true;
$inline = true;

Set these values to 'false', so change into:
Code:

Code:

$included = false;
$inline = false;

And around line 360 you'll find this:
Code:

Code:

echo('"><img src="' . html("$dirnamehttp/$thumbdir/$filename.thumb.jpg"));
Add ' rel="lightbox[name]" title="'.stripcomment($filename, "--").'', so change into:

Code (make sure you know what to replace from the original code):

Code:

if ($included && $inline) {
echo '<a href="?';
if (array_key_exists('dir'.$section_id, $_GET)) {
echo 'dir'.$section_id.'='.urlencode($_GET['dir'.$section_id]).'&';
}
echo 'pic'.$section_id.'='.$i.html($urlsuffix).'">';
} else {
[color=red]echo '<a href="'.html($dirnamehttp.'/'.$filename).'" rel="thickbox_group1" class="thickbox" title="'.stripcomment($filename, "--").'">';[/color]
}

= UPDATE YOUR TEMPLATE TO REFER TO THE THICKBOX FILES =

Add the following line withing the <head>...</head> tags
<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>

I use
<script type="text/javascript" src="<?php WB_URL; ?>/lib/jquery.js"></script>
<script type="text/javascript" src="<?php WB_URL; ?>/lib//thickbox.js"></script>

= ENJOY =