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
5 Comments - Comments RSS Feed
Josh Minnich
# 8 November 2008
Wow, thanks for this tutorial. I’ve been meaning to look more into using jQuery for making slideshows with TXP as the CMS.
Jonathan Stubbs
# 30 March 2009
@kus – I just created a Galleriffic gallery over on the Spain Tennis Academy site – will be writing a tutorial on that when I get round to it. Does not require smd_query.
Viking KARWUR
# 1 November 2008
:) nice tips…