Hi all,
I'm using the HOT Joomla Carousel AJAX Image Rotator and need the images to be rotated in sequence.
So, all images are names 10.jpg, 11.jpg, 12.jpg, 13.jpg, 14.jpg, etc. But, they are displayed in random sequence, and not in order, as can be seen here:
Code:
<script type="text/javascript" src="http://als.org.za/modules/mod_hot_joomla_carousel/js/jquery.carousel.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery("div.foo").carousel({
direction: "horizontal",
loop: 1,
dispItems: 1,
pagination: false,
paginationPosition: "inside",
autoSlide: 1,
autoSlideInterval: 3000,
delayAutoSlide: false,
combinedClasses: false,
effect: "slide",
slideEasing: "swing",
animSpeed: "slow",
equalWidths: "true"
});
});
</script>
<div class="hotcarousel">
<div class="foo">
<ul style="margin:0; padding:0">
<li><img src="/images/stories/stasies/19a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/14b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/15b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/17b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/23a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/24a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/17a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/19b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/12b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/14a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/16b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/11b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/11a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/20a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/16a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/21a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/24b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/22b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/13a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/23b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/22a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/12a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/13b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/18a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/18b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/20b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/15a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/21b.jpg" alt="" width="340" height="400" /></li>
</ul>
</div>
</div>
Does anyone know how to "hack the code" in order to make it load the images as follows:
Code:
<li><img src="/images/stories/stasies/11a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/11b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/12a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/12b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/13a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/13b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/14a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/14b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/15a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/15b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/16a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/16b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/17a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/17b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/18a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/18b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/19a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/19b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/20a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/20b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/21a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/21b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/22a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/22b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/23a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/23b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/24a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/24b.jpg" alt="" width="340" height="400" /></li>
Topic Author
