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.
I’m having problems with this. The images are not staying constrained to the box. I specified the dimensions of the box in the CSS, should I specify it elsewhere instead or in addition?
@Dylan, its hard to help you without an example of what you are currently working with in terms of HTML/CSS…
Sure, sorry.
CSS—
.slideshow { height: 310px; width: 410px; padding: 0; margin: 0;
}
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; width: 400px; height: 300px; top: 0; left:0;
}
HTML
<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>
Thank you. Help is very much appreciated.
Dylan, it would be good to see an example URL if you have one to test couple things out, but from what I can see in the above, your padding of 15px and the border of 1px would be wider than the containing div.
You could try and change the padding to 2px for example and see what happens.
Hi Jonathan,
I have addressed the issue you mentioned,— thank you. However, the problem is still happening— namely when the page is re-accessed by the same person (for example, if you were to visit the page, then click the logo to go “back” to the same page). I am seeing this in Mozilla, but have also seen it in Chrome.
This is the link: http://www.bournedesigns.info/textpatterntemp/
No one reports seeing this on the FIRST time the page is accessed— only on subsequent viewings, such as by clicking the logo or the “Home” link on the right hand side, or refreshing. It may not happen every time.
When the images are loading in the correct size, each image displays a size of nearly 300 × 400 in the html; when they display incorrectly, each disparate size is present in the code.
Your image #47 seems to break the layout. On first page load, the slideshow div has this style attached by Cycle:
<div class="slideshow" style="position: relative; ">Sometimes (not all the time), on page reload after clicking the home logo, the layout breaks with image #47 and this is what Cycle produces:
<div class="slideshow" style="position: relative; width: 640px; height: 480px; ">From what I can see, your image #47 is in fact 640×480 px, so this should break the layout as far as I remember from using cycle.
As Uli indicated on your forum post, please check first for errors in the loading of scripts, and I would start with the basic Cycle example first, make sure there are no errors with that and then add your own images.
But, I’m not 100% sure about the images being larger than their containers, I don’t remember how Cycle handles that (or not) so you may need to address that.