Galleriffic image gallery

Editor note: There is an updated article for this – see Galleriffic image gallery without any plugins

Finding a nice image gallery is not that difficult – there are plenty of choices out there using a variety of JS libraries. There are also various Textpattern plugins that do an excellent job of outputting the images, with or without a JS library.

In a recent project, I decided to use Galleriffic – a jQuery based project. Although the gallery is really good the instructions are a little difficult to follow.

Additionally, I wanted to create a category-based image gallery using Textpattern’s in-built image categories. Here is what you need to get started:

  1. Download, install and activate the upm_image plugin
  2. Download, install and activate the wet_for_each_image plugin
  3. Download the Galleriffic files. I used the minified version for this project

Upload the Galleriffic files to your install

Once the Galleriffic package has been downloaded, upload the jquery.galleriffic.min.js file to your Textpattern install. In this project, the file was uploaded to the /javascript folder in the root folder.

Create a file containing the gallery controls

The Galleriffic demo page has two demos – an advanced demo and a minimal demo. I used the advanced demo. Here is the code:

			// Initially set opacity on thumbs and add
			// additional styling for hover effect on thumbs
			var onMouseOutOpacity = 0.67;
			$('#thumbs ul.thumbs li').css('opacity', onMouseOutOpacity)
					function () {
						$(this).not('.selected').fadeTo('fast', 1.0);
					function () {
						$(this).not('.selected').fadeTo('fast', onMouseOutOpacity);
			$(document).ready(function() {
				// Initialize Advanced Galleriffic Gallery
				var galleryAdv = $('#gallery').galleriffic('#thumbs', {
					delay:                  2000,
					numThumbs:              12,
					preloadAhead:           10,
					enableTopPager:         false,
					enableBottomPager:      true,
					imageContainerSel:      '#slideshow',
					controlsContainerSel:   '#controls',
					captionContainerSel:    '#caption',
					loadingContainerSel:    '#loading',
					renderSSControls:       true,
					renderNavControls:      true,
					playLinkText:           'Play Slideshow',
					pauseLinkText:          'Pause Slideshow',
					prevLinkText:           '‹ Previous Photo',
					nextLinkText:           'Next Photo ›',
					nextPageLinkText:       'Next ›',
					prevPageLinkText:       '‹ Prev',
					enableHistory:          true,
					autoStart:              false,
					onChange:               function(prevIndex, nextIndex) {
						$('#thumbs ul.thumbs').children()
							.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
							.eq(nextIndex).fadeTo('fast', 1.0);
					onTransitionOut:        function(callback) {
						$('#slideshow, #caption').fadeOut('fast', callback);
					onTransitionIn:         function() {
						$('#slideshow, #caption').fadeIn('fast');
					onPageTransitionOut:    function(callback) {
						$('#thumbs ul.thumbs').fadeOut('fast', callback);
					onPageTransitionIn:     function() {
						$('#thumbs ul.thumbs').fadeIn('fast');

Save the code in a file called galleriffic.js and upload to the /javascript folder.

Link to the JS files

In your page template or in a form, you need to link to the JS files. In my project, I have the following in my header form which is outputted on all page templates:

<!-- JS -->
<script type="text/javascript" src="<txp:site_url/>javascript/jquery.ui-1.5.3/jquery-1.2.6.js"></script>

Then in your photos page template, place the following either just before the closing <head> tag or just before the closing <body> tag:

<!-- galleriffic -->
<script type="text/javascript" src="<txp:site_url/>javascript/jquery.galleriffic.min.js"></script>
<script type="text/javascript" src="<txp:site_url/>javascript/galleriffic.js"></script>

Create some images and categorise them

Assuming you already have some images, assign them to the image categories of your choice.

And now for the gallery..

<txp:article limit="1" />
<!-- Start Gallery Html Containers -->
<div id="gallery" class="content"></div>
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
<div id="controls" class="controls"></div>
<div id="caption" class="embox"></div>

Place the above code where you want the gallery to appear. The Galleriffic JS takes care of the rest.

Category navigation controls

<txp:category_list section="photos" wraptag="ul" class="category_list" break="" exclude="article-images,site-design" type="image">
<li <txp:if_category name='<txp:category />'>class="active"</txp:if_category>>
<txp:category link="1" title="1" /></li>
<div id="thumbs" class="navigation clearfix">
<ul class="thumbs noscript">
<txp:wet_for_each_image sort="id desc">
<txp:upm_image form="galleriffic_thumbs" image_id="{id}" type="image" />
<txp:else />
<txp:wet_for_each_image category="players" sort="id desc">
<txp:upm_image form="galleriffic_thumbs" image_id="{id}" type="image" />

The first part of the code outputs a category_list which calls all images in the various image categories except article-images and site-design. The if_category tag provides a navigation aid for the user.

The second part of the code outputs the image thumbnails. This code can be placed anywhere on your page.

The interesting part is the use of the upm_image and wet_for_each plugins, which retrieve all the images in each category for display. In order to process the images, upm_image uses the galleriffic_thumbs form:

<a class="thumb" title="<txp:upm_img_name />" href="<txp:upm_img_full_url />"><img src="<txp:upm_img_thumb_url />" alt="<txp:upm_img_alt />"></a>
<div class="caption">
<div class="image-title"><txp:upm_img_name /></div>
<div class="image-desc"><txp:upm_img_caption /></div>

Save the form as type misc and save.

comments powered by Disqus