TXP Jquery Gallery

In this tutorial, you will learn how to create an image gallery using jQuery and upm_image, a TXP plugin. The gallery features a slideshow of thumbnails and the larger image on the same page. See an example of the image gallery.

Download the following:

Note that jQuery is by default included with Textpattern, so you can skip the jQuery download and use /textpattern/jquery.js instead.

In the <head> of your page:

<script src="/includes/jquery-1.2.6.js" type="text/javascript"></script>
<script src="/includes/jquery.cycle.all.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
// redefine Cycle's updateActivePagerLink function 
$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
$(pager).find('li').removeClass('activeLI') 
.filter('li:eq('+currSlideIndex+')').addClass('activeLI');
};
$('.article-image').cycle({ 
fx:     'fade', 
speed:  'slow', 
timeout: 8000, 
pager:  '.thumbs', 
pagerAnchorBuilder: function(idx, slide) { 
// return selector string for existing anchor 
return '.thumbs li:eq(' + idx + ') a';
return false; 
} 
});
});
//]]>
</script>

Place this in your page where you want the full image:

<div class="article-image"> <txp:upm_article_image limit="9" form="article-images" /> </div>

Place this in your page where you want the thumbs:

<ul class="thumbs"> <txp:upm_article_image limit="9" form="article-thumbs" /> </ul>

article-images form:

<div><img src="<txp:upm_img_full_url />" alt="<txp:upm_img_alt />" /></div>

article-thumbs form:

<li><a href="#"><img src="<txp:upm_img_thumb_url />" alt="<txp:upm_img_alt />"></a></li>

Additional resources:

Original Textpattern forum thread
Jquery.cycle documentation

comments powered by Disqus