How can I set my HTML slideshow to show the images in random order?

K

kylehess10

New member
I have a site I'm designing in Joomla and there is a slideshow on the top of every page. There are 11 images in the slideshow and they go in order each time. Is there a way I can mess with the HTML code to make the images show in random order every time? By that, I mean, instead of the slideshow going 1,2,3,4,5,6,7,8,9,10,11 it may go 1,8,3,6,2,10,5,11,4,9,7 and just go in complete different random orders each time someone visits my site. Here's the HTML code to give an idea of what I'm working with:

<div id="slide">
<div class="joomscontmask1">
<div id="joomscontbox1">
<div class="inner">
<img src="templates/<?php echo $this->template ?>/images/slide1.jpg"/>
</div>
<div class="inner">
<img src="templates/<?php echo $this->template ?>/images/slide2.jpg"/>
</div>
<div class="inner">
<img src="templates/<?php echo $this->template ?>/images/senior_portraits_ad.jpg" alt="Senior Portraits" />
</div>
<div class="inner">
<img src="templates/<?php echo $this->template ?>/images/slide3.jpg"/>
</div>
<div class="inner">
<img src="templates/<?php echo $this->template ?>/images/slide4.jpg"/>
</div>
<div class="inner">
<img src="templates/<?php echo $this->template ?>/images/shooting_locations_ad.jpg"/>
</div>
<div class="inner">
<img src="templates/<?php echo $this->template ?>/images/slide5.jpg"/>
</div>
<div class="inner">
<img src="templates/<?php echo $this->template ?>/images/slide6.jpg"/>
</div>
<div class="inner">
<img src="templates/<?php echo $this->template ?>/images/slide7.jpg"/>
</div>
<div class="inner">
<img src="templates/<?php echo $this->template ?>/images/slide8.jpg"/>
</div>
<div class="inner">
<img src="templates/<?php echo $this->template ?>/images/slide9.jpg"/>
</div>
</div>
</div>
<div id="prev1" class="prev1">
</div>
<div id="next1" class="next1">
</div>
</div>
<script type="text/javascript">
window.addEvent('domready',function(){
var hs1 = new noobSlide({
box: $('joomscontbox1'),
items:[1,2,3,4,5,6,7,8,9,10,11],
size: 896,
autoPlay: true,
interval: 3000,
fxOptions: {
duration: 500,
transition: Fx.Transitions.Sine.easeOut,
wait: false
},
buttons: {
previous: $('prev1'),
next: $('next1')
}
});
});
</script>
 
Back
Top