Simple Slideshow

3 posts by 3 authors in: Forums > CMS Builder
Last Post: August 13, 2009   (RSS)

By Christopherb - August 13, 2009

How can we create a previous and next routine to scroll through a field named "images" along with the "image caption" for items on a "Detail Page"?

For Example:

[img]http://www.mustbeonline.net/DemoSlide.gif[/img]

Thanks,

Chris

Re: [Christopherb] Simple Slideshow

By Chris - August 13, 2009

Hi Christopherb,

I suspect you'd want to do something like that with JavaScript. Although I don't think we typically provide support for JavaScript, I figured I'd whip you up a quick example to get you started.

PLEASE NOTE: Getting this working perfectly in all browsers is left as an exercise for the reader!

<!-- STEP 2a: Display Uploads for field 'upload' (Paste this anywhere inside STEP2 to display uploads) -->
<?php if (sizeof($newsRecord['upload']) > 0): ?>
<a href="#" onclick="currentIndex--; updateDynamicImageAndCaption(); return false;">prev</a>
<a href="#" onclick="currentIndex++; updateDynamicImageAndCaption(); return false;">next</a><br />
<span id="dynamicIndex"></span> of <?php echo sizeof($newsRecord['upload']) ?> images<br />
<img id="dynamicImage" />
<div id="dynamicCaption"></div>
<script>
imageUrls = [];
captions = [];
<?php foreach ($newsRecord['upload'] as $upload): ?>
imageUrls.push("<?php echo addslashes($upload['urlPath']) ?>");
captions.push("<?php echo addslashes($upload['info2']) ?>");
<?php endforeach; ?>
currentIndex = 0;
function updateDynamicImageAndCaption() {
currentIndex = (currentIndex + imageUrls.length) % imageUrls.length;
document.getElementById('dynamicIndex').innerHTML = (currentIndex + 1);
document.getElementById('dynamicImage').src = imageUrls[currentIndex];
document.getElementById('dynamicCaption').innerHTML = captions[currentIndex];
}
updateDynamicImageAndCaption();
</script>
<?php endif ?>
<!-- STEP2a: /Display Uploads -->
All the best,
Chris