Tutorial: switch image gallery to "fancybox"

The latest project I have been working on uses "Fancybox" for displaying photo and video galleries. I am also using 68C in this project ... so ... I thought it would be nice to change-up the listing galleries in 68C to use the same. Luckily, this is quite easy to accomplish.

1. Get Fancybox Files

Download from: http://fancybox.net/

In this example, I am using Version 1.3.4 which appears to be more stable (IMO) at this time.

Upload your files to wherever you want store them on your website.


2. Update your JS and CSS

Reminder: When updating a core file, always make sure to comment the changes in the file or make update notes ... or both ... it makes doing future updates so much easier

In the viewlisting.php file at approx line: 112.

Find:

Code:

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

Change to:

Code:

'<link rel="stylesheet" href="path-to/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />'

In your layout.tpl template file (right before the closing </body> tag), insert the following:

Code:

{if $body=='viewlisting.tpl'}
<script type="text/javascript" src="path-to/jquery.fancybox-1.3.4.pack.js"></script>
{/if}

Note: Replace viewlisting.tpl with viewlisting2.tpl if that is the template of choice.


3. Update your image gallery "class" and add the final JS to make it work.

In your viewlisting.tpl, you will need to change the class from "thickbox" to "fancybox" and add a little javascript code below it to make it all work.

The following is how my image call in viewlisting.tpl looks after I've made the changes. Yours may look slightly different, but should work in a similar manner.

Code:

{if $viewphotos=="Y" && $data <> ''}
<div id="listingimages">     
    <ul class="gallery">
    {foreach from=$data item=image}
        <li><a href="photos/{$image.image}" title="{$image.title}" class="fancybox" rel="gallery"><img src="thumbs/small_{$image.image}" alt="{$image.title}" /></a></li>
    {/foreach}
    </ul>
{literal}
<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox();
});
</script>
{/literal}
</div>
{/if}

You can now enjoy a very cool new look to your listing images!

You can also play with the Fancybox features all you want, visit http://fancybox.net/ for all kinds of tips and tricks on their script.