by
KK » Wed Nov 30, 2011 6:57 pm
Hi Dawn,
As cheesypoof rightly pointed out - you can use any JQuery/Mootools script for this.
Almost all the slideshow scripts simply expect a list of images (with a particular CSS class or container ID) and the JavaScript code does the rest of the magic.
For example, this could be a sample markup used by
http://jquery.malsup.com/cycle/ that cheesypoof suggested -
- Code: Select all
<div class="slideshow">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
</div>
To integrate Couch into it, if the number of slides is fixed you could create, for example, five editable regions of type 'image' and then use them as follows -
- Code: Select all
<div class="slideshow">
<img src="<cms:show slide_image_1 />" width="200" height="200" />
<img src="<cms:show slide_image_2 />" width="200" height="200" />
<img src="<cms:show slide_image_3 />" width="200" height="200" />
<img src="<cms:show slide_image_4 />" width="200" height="200" />
<img src="<cms:show slide_image_5 />" width="200" height="200" />
</div>
If, however, the number of images is variable you could use a separate template, named for example 'slides.php' and define a single editable region of type 'image' within it.
The user than can simply create add as many slides as desired by creating a cloned page for each image.
The modified code will now become -
- Code: Select all
<div class="slideshow">
<cms:pages masterpage='slides.php' limit='10'>
<img src="<cms:show slide_image />" width="200" height="200" />
</cms:pages>
</div>
Hope this help.