Simple image slideshow using jQuery and native TXP tags

This is a very easy image slideshow using jQuery, the Cycle plugin and native TXP tags.

<txp:if_individual_article>
<txp:article><txp:if_custom_field name="images_category">
<div class="slideshow">
<txp:images category='<txp:custom_field name="images_category" />' break="">
<txp:image />
</txp:images>
</div>
</txp:if_custom_field>
</txp:article>
</txp:if_individual_article>

First

Create a custom field named images_category.

The code

In the <head> part of your templates add

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $('.slideshow').cycle({
		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	});
});
</script>

In the <body> part of your templates add:

<txp:if_individual_article>
<txp:article><txp:if_custom_field name="images_category">
<div class="slideshow">
<txp:images category='<txp:custom_field name="images_category" />' break="">
<txp:image />
</txp:images>
</div>
</txp:if_custom_field>
</txp:article>
</txp:if_individual_article>

Images

Upload some images and allocate a category for them.

In your write tab add the category name in the custom field. Save and enjoy the slide show.

If you wish to have more control over the slideshow visit the cycle plugin website and read through the Options Reference.

comments powered by Disqus