How can I change order of images in slideshow when user refreshes website?
Right now on my current website, I have it going through the pictures in the order of the array, but I would like it so whenever the user refreshes the website, the slideshow randomly shuffles the pictures in a different order.
<script type="text/javascript">
var imgs = [
'images/slideshow/001.jpg',
'images/slideshow/002.jpg',
'images/slideshow/003.jpg',
'images/slideshow/004.jpg',
'images/slideshow/005.jpg',
'images/slideshow/006.jpg'];
var cnt = imgs.length;
$(function() {
setInterval(Slider, 3000);
});
function Slider() {
$('#imageSlide').fadeOut("slow", function() {
// the source of the problem
$(this).attr('src', imgs[Math.floor (Math.random( ) * imgs.length) % cnt]).fadeIn("slow");
});
}
</script>
Any help is appreciated! =]
Answers & Comments
Verified answer
This doesn't guarantee you won't get the same set twice, since it relies on JavaScript's pseudo-random number generation and has no memory for previous generations. You could serialize the last set in some fashion, e.g., cookie, and avoid repeats, but that was out of scope for your question.
<html>
<head>
<script>
// get a random integer in the range [min, max]
// note: min is optional with default of 0
function getRandomInt(max, min) {
if ('undefined' == typeof min) min = 0;
var range = max - min + 1;
var r = Math.floor( range*Math.random( ));
return min + r;
};
// simulate the random draw of integers without replacement
// of cnt values from the range [min, max]
// this is like drawing cards from a deck without replacing
// the cards until the entire number of desired cards is
// drawn, i.e., there will be no duplicates
function drawRandomInts(cnt, max, min) {
if ('undefined' == typeof min) min = 0;
if (-1 == cnt) cnt = max - min + 1;
var hash = new Array();
var drawn = 0;
while (cnt > drawn) {
var r = '' + getRandomInt(max, min);
if ('undefined' == typeof hash[r]) {
hash[r] = drawn++;
}
}
var ints = new Array();
var i = 0;
for (key in hash) {
ints[i] = parseInt(hash[key]);
i++;
}
return ints;
};
// your original set of sources
var imgSrcs = [
'images/slideshow/001.jpg',
'images/slideshow/002.jpg',
'images/slideshow/003.jpg',
'images/slideshow/004.jpg',
'images/slideshow/005.jpg',
'images/slideshow/006.jpg'
];
var cnt = imgSrcs.length;
// the new set of sources
var imgs = new Array();
function shuffleImgSrcs() {
// how many images
var last = imgSrcs.length;
// get a random indexes into the image source array
var imgSrcIdxs = drawRandomInts(-1, last - 1 );
// shuffle original sources into new order
for (var i = 0; i < last; i++) {
imgs.push(imgSrcs[imgSrcIdxs[i]]);
}
};
window.onload = function() {
shuffleImgSrcs();
alert('original:' + '\n' + imgSrcs +
'\n\nnew:' + '\n' + imgs
);
};
</script>
<body></body>
</html>
using JavaScript may be exceptionally difficulty-unfastened. Jquery additionally yet it fairly is extra stable. you're waiting to do with with HTML & CSS. in spite of the certainty that it fairly is prob extra venture than its truly properly worth ( using the #myDiv:hover concept :)