This tutorial is a follow up to the Galleriffic image gallery tutorial which required a couple of plugins to make it work. This is no longer required thanks to the new TXP image tags introduced in Textpattern 4.3.0.

First things first

Let’s go through the process of adding the required files from Galleriffic and jQuery to your site.

1. Download and install Galleriffic
2. Link to the files as below

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="<txp:site_url />js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="<txp:site_url />js/jquery.history.js"></script>
<script type="text/javascript" src="<txp:site_url />js/jquery.opacityrollover.js"></script>
<script type="text/javascript" src="<txp:site_url />js/portfolio.js"></script>

First we load jQuery from the Google CDN and then the JS files for Galleriffic. You may not need jquery.history.js or jquery.opacityrollover.js for your project. Make sure to change any paths to reflect your own. The last file is where we initialize the Galleriffic script, but you can also place it at the end of your page template if you wish.

Initialize Galleriffic

// Galleriffic initialisation
    jQuery(document).ready(function($) {
                // We only want these styles applied when javascript is enabled
                $('div.navigation').css({'width' : '800px', 'float' : 'left'});
                $('div.content').css('display', 'block');

                // Initially set opacity on thumbs and add
                // additional styling for hover effect on thumbs
                var onMouseOutOpacity = 0.25;
                $('#thumbs ul.thumbs li').opacityrollover({
                    mouseOutOpacity:   onMouseOutOpacity,
                    mouseOverOpacity:  1.0,
                    fadeSpeed:         'fast',
                    exemptionSelector: '.selected'
                });            
                // Initialize Advanced Galleriffic Gallery
                var gallery = $('#thumbs').galleriffic({
                    delay:                     2500,
                    numThumbs:                 8,
                    preloadAhead:              10,
                    enableTopPager:            true,
                    enableBottomPager:         false,
                    maxPagesToShow:            7,
                    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:             false,
                    autoStart:                 false,
                    syncTransitions:           true,
                    defaultTransitionDuration: 900,
                    onSlideChange:             function(prevIndex, nextIndex) {
                        // 'this' refers to the gallery, which is an extension of $('#thumbs')
                        this.find('ul.thumbs').children()
                            .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                            .eq(nextIndex).fadeTo('fast', 1.0);
                    },
                    onPageTransitionOut:       function(callback) {
                        this.fadeTo('fast', 0.0, callback);
                    },
                    onPageTransitionIn:        function() {
                        this.fadeTo('fast', 1.0);
                    }
                });            
                /**** Functions to support integration of galleriffic with the jquery.history plugin ****/
                // PageLoad function
                // This function is called when:
                // 1. after calling $.historyInit();
                // 2. after calling $.historyLoad();
                // 3. after pushing "Go Back" button of a browser
                function pageload(hash) {
                    // alert("pageload: " + hash);
                    // hash doesn't contain the first # character.
                    if(hash) {
                        $.galleriffic.gotoImage(hash);
                    } else {
                        gallery.gotoIndex(0);
                    }
                }
                // Initialize history plugin.
                // The callback is called at once by present location.hash. 
                $.historyInit(pageload, "advanced.html");
                // set onlick event for buttons using the jQuery 1.3 live method
                $("a[rel='history']").live('click', function(e) {
                    if (e.button != 0) return true;                
                    var hash = this.href;
                    hash = hash.replace(/^.*#/, '');
                    // moves to a new page. 
                    // pageload is called at once. 
                    // hash don't contain "#", "?"
                    $.historyLoad(hash);
                    return false;
                });             
            });

That’s what I used for the particular project – portfolio.js – but your own initialization script may vary, please check the Galleriffic examples for more.

The fun part!

Here below is the code I used for this project:

<txp:article limit="100">
<txp:if_individual_article>
	<txp:output_form form="portfolio_gallery" />
<txp:else />
	<div class="portfolio">
		<txp:permlink class="portfolio_item">
			<txp:if_article_image>
				<txp:images break="" sort='field(`ID`,<txp:custom_field name="article_image" />)'>
					<txp:smd_if_thumbnail type="large">
						<txp:smd_thumbnail type="large" add_stamp="1" />
					</txp:smd_if_thumbnail>
				</txp:images>
			</txp:if_article_image>
		</txp:permlink>	
		<p><txp:title /></p>
	</div>
</txp:if_individual_article>
</txp:article>

The code above might look familiar to avid readers who remember a recent TXP Tip.

I did say earlier that no plugins were used and you may notice the reference to smd_thumbnail above. However its not necessary to use the plugin, I just used it because the client needed automatic thumbnail generation. You could replace <txp:smd_thumbnail ... /> with <txp:thumbnail ... /> instead.

If on an article list page the above code will execute. If on an individual page we want to display the individual image gallery using Galleriffic.

portfolio_gallery form contents

<div id="gallery" class="content">
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container"></div>
</div>

<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<txp:if_article_image>	
	<txp:images break="" sort='field(`ID`,<txp:custom_field
name="article_image" />)'>
    	<li><a class="thumb" name="<txp:image_info type="name" />" href="<txp:image_url />" title="<txp:image_info type="name" />"><img src="<txp:image_url thumbnail="1" />" alt="<txp:image_info type="alt" />" /></a>
			<div class="caption">
				<div class="image-desc"><txp:image_info type="caption" /></div>
			</div>

		</li>   
</txp:images>
</txp:if_article_image>	
</ul>
</div>

The above executes if on an individual article page – where we are displaying the individual image galleries.

The first part of the code creates the necessary HTML containers which will be used by Galleriffic on page load.

The second part creates the thumbnails in accordance with the parameters required by Galleriffic. Here is where the new TXP tags come in handy – we don’t need upm_image or wet_for_each_image anymore!

How to make it all work

The best part of this method is how easy it is for you or your client. Simply add the image #ids to the article image field of your article then save to the relevant section and you have an automatic image gallery!

To see the example in action, see the recently finished Paola de Grenet website.