68 Classifieds Blog

Features

How To - Add a ThickBox Photo Gallery

Posted on August 13, 2008 by Eric Barnes

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.

Comments

August 14th, 2008 at 4:38 am

This is excellent! I’ll try this tonight.

Thanks!

August 19th, 2008 at 9:49 pm

@kenneth - That is great news. Please let us know if you need any help.

TJ
October 22nd, 2008 at 9:27 am

Is there a way to get rid of the blue “link halo” around the thumbnails, when using the thickbox mod?

October 22nd, 2008 at 11:51 am

@tj - Sure. Just add something like this to the style sheet:

img a { border: 0px;} 
TJ
October 25th, 2008 at 1:49 pm

Eric, that didn’t appear to work.

I added it to the thickbox.css file and the main style.css file for the site. Still have a thick blue “link halo” box around the thumbnails.

I even directly set the border=”0″ in the code for the mod and they still appear.

Any thoughts?

Thanks for your help!

TJ
October 25th, 2008 at 1:59 pm

Ahh.. I Fixed it.
I went back and looked at the viewlisting2.tpl file and noticed I forgot to add the = sign to border=”0″.

That fixed it.

Thanks again for your help!

October 25th, 2008 at 2:02 pm

Good find. Didn’t think of that one. :(

October 25th, 2008 at 2:03 pm

Just to give you a heads up this is also going to come with the core in v4.1.

TJ
October 25th, 2008 at 2:06 pm

Built in support for Thickbox?

October 25th, 2008 at 2:12 pm

Yes. It is requested so much I think it is a good idea to include it by default.

TJ
October 25th, 2008 at 2:20 pm

Sounds Great!
68 Classifieds is such an awesome program!

My only fear when it comes to the new releases is reconfiguring all my little tweaks.

October 25th, 2008 at 2:23 pm

Funny you mention that. Monday I have a post scheduled to go over some ways of keeping track of custom changes. Hopefully it will help you out in the future.

PussycatPrincess
November 5th, 2008 at 10:45 am

What happens when a visitor doesnt have javascript on their browser or computer…are they still able to see the pictures?

November 5th, 2008 at 11:40 am

Yes with JavaScript disabled it just links to the full size picture. Everything still works but looses the fancy animations.

Comments