home > support > solution library > image gallery

Add an image gallery to Tour pages

TourCMS has standard fields for up to six images against each Tour/Hotel, images can be stored with captions in multiple languages to allow for flexible display and distribution.

The following example walks through using a plugin for the excellent JQuery JavaScript library to add an attractive photo gallery displaying these images to a standard Tour template in TourCMS. There are lots of alternative gallery scripts however Galleria is quick to set up and looks great.

Best to start with a demo:

View demo

Loading photographs

To load photographs for a Tour into the standard fields in TourCMS just head to Tours/Hotels then click Marketplace for the Tour you are editing and then upload your photos under the Images tab.

Updating the template

Download the latest JQuery release and the Galleria plugin (JS and CSS files) and save them somewhere on your web server (the code example below presumes the root of your website).
In TourCMS head to Channel Manager > Repeating templates and click Edit for the template you wish to add the gallery to
Add the following code to the <head> section of the template to include JQuery and Galleria

<link href="/galleria.css" rel="stylesheet" type="text/css" media="screen"> 

<script type="text/javascript" src="/jquery.js"></script> 
<script type="text/javascript" src="/jquery.galleria.js"></script> 
<script type="text/javascript"> 
	jQuery(function($) { $('ul.gallery').galleria(); }); 
</script>

The HTML we need to generate for the gallery looks something like this:

<ul class="gallery"> 
   <li class="active"><img src="images/1.jpg" title="A caption" alt="Image01"></li> 
   <li><img src="images/2.jpg" title="A caption" alt="Image02"></li>
   <li><img src="images/3.jpg" title="A caption" alt="Image03"></li>
   <li><img src="images/4.jpg" title="A caption" alt="Image04"></li>
   <li><img src="images/5.jpg" title="A caption" alt="Image05"></li>
   <li><img src="images/6.jpg" title="A caption" alt="Image06"></li> 
</ul>

This HTML can be generated using the following template code, just copy and paste into the <body> section of your template, in the location you'd like the gallery to be shown:

Now save the template and rebuild and you should see the new gallery

Additional tweaks

Galleria is infinitely tweakable via CSS and JQuery Effects, there are more demos on the Galleria website
If you have different numbers of images for your Tours just use a little scripting (PHP/ASP etc) to output the HTML
Discuss this tutorial in the forums

View demo