How To - Add a ThickBox Photo Gallery

We get a lot of users who want to add JavaScript image galleys to the viewlisting template file and in this post I will step out how to add ThickBox from http://jquery.com/demo/thickbox/.

ThickBox is designed to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Step 1. Download the script

The first step is to download the code. They include all the code from their site but I also have it available here. After downloading it upload all the files to /javascript/thickbox directory in your classifieds site.

Step 2a. Edit the viewlisting.tpl file

see Step 2b. if you’re editing viewlisting2.tpl
Now open the viewlisting.tpl in your preferred editor.

Once the file is open in your text editor add the following three lines to the top:

<script type="text/javascript" src="javascript/thickbox/jquery.js"></script>
<script type="text/javascript" src="javascript/thickbox/thickbox-compressed.js"></script>
<link rel="stylesheet" href="javascript/thickbox/thickbox.css" type="text/css" media="screen" />

Next find the following lines:

{foreach from=$data item=image}
	<a href="#" onmouseover="window.status='View Large Image';return true" onmouseout="window.status='';return true" onclick="window.open('{$smarty.const.URL}/viewimage.php?photo={$image.id}&amp;width={$image.width}&amp;height={$image.height}','_popup','width={$image.width+80},height={$image.height+100},directories=no,location=no,menubar=no,scrollbars=yes,status=no,toolbar=no,resizable=no,left=0,top=0,screenx=50,screeny=50');return false"><img src="thumbs/small_{$image.image}" hspace="5" vspace="5" class="image" border="0" alt="{$image.title}"></a><br>{$image.title}
{foreachelse}
	<img src="templates/{$smarty.const.MAIN_TEMPLATE}/images/nophoto.gif" width="100" hspace="5" vspace="5" border="1">
{/foreach}

Now that we found those lines delete the line between {foreach from=$data item=image} and {foreachelese}. Next add this line in its place:

<a href="photos/{$image.image}" title="{$image.title}" class="thickbox" rel="gallery"><img src="thumbs/small_{$image.image}" alt="{$image.title}" /></a><br />

Step 2b. Edit the viewlisting2.tpl file

see Step 2a. if you’re editing viewlisting.tpl
Now open the viewlisting2.tpl in your preferred editor.

Once the file is open in your text editor add the following three lines to the top:

<script type="text/javascript" src="javascript/thickbox/jquery.js"></script>
<script type="text/javascript" src="javascript/thickbox/thickbox-compressed.js"></script>
<link rel="stylesheet" href="javascript/thickbox/thickbox.css" type="text/css" media="screen" />

Next find the following lines:

{html_table_adv loop=$data cols=$cols table_attr='width="100%"'}
     <a href="#" onMouseOver="window.status='View Large Image';return true" onMouseOut="window.status='';return true" onClick="window.open('{$smarty.const.URL}/viewimage.php?photo=[[id]]&width=[[width]]&height=[[height]]','_popup','width=[[width]],height=[[height]],directories=no,location=no,menubar=no,scrollbars=yes,status=no,toolbar=no,resizable=no,left=0,top=0,screenx=50,screeny=50');return false"><img src="thumbs/small_[[image]]" hspace="5" vspace="5" class="image" border="0" /></a><br />[[title]]
{/html_table_adv}

Now that we found those lines delete the line between {html_table_adv loop=$data cols=$cols table_attr=’width="100%"’} and {/html_table_adv}. Next add this line in its place:

<a href="photos/[[image]]" title="[[title]]" class="thickbox" rel="gallery"><img src="thumbs/small_[[image]]" alt="[[title]]" /></a><br />

Source Code

Here is a link to download the full source code for this tutorial

Help & Support

If you need any help or support integrating this please see this forum thread.