Back to index

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

<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>
<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>
   

Additional tweaks

View demo