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
:) nice tips…
Wow, thanks for this tutorial. I’ve been meaning to look more into using jQuery for making slideshows with TXP as the CMS.
anyone have tutorial creating galleriffic jquery gallery and embed it to TxP using smd_query ?
@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.
sorry my bad, I mean smd_gallery , Well I will using flickr as my gallery image resources.
Thanks for tutorial, cant wait :)