PDA

View Full Version : Resolved Simple Random Slideshow



Abbster22
12-07-2010, 07:55 PM
Right now, I have a simple JQuery slideshow which is working great, fading in and out as I would like so it shows the viewfinder background. The only thing I would like is to have the images in the slideshow shuffle as it goes through the slideshow (but doesn't repeat the same image two times in a row). Or, another possibility would be randomly sorting the array of images as the user refreshed the website.

Here is what I have so far:
http://gds.parkland.edu/student/fall10/gds220/ashipley/p4/final_revised/index.html

I had gotten the initial script from here:
http://www.devcurry.com/2009/07/create-simple-image-slide-show-using.html

Nile
12-09-2010, 12:28 AM
Here it is, just random order:


var imgNew = "";
var imgOld = "";
var imgs = [
'http://gds.parkland.edu/student/fall10/gds220/ashipley/p4/final_revised/images/slideshow/001.jpg',
'http://gds.parkland.edu/student/fall10/gds220/ashipley/p4/final_revised/images/slideshow/004.jpg',
'http://gds.parkland.edu/student/fall10/gds220/ashipley/p4/final_revised/images/slideshow/002.jpg'];
var cnt = imgs.length;

$(function() {
setInterval(Slider, 3000);
});

function Slider() {
$('#imageSlide').fadeOut("slow", function() {
var imgNew = Math.floor(Math.random()*(imgs.length));
if(imgNew == imgOld && imgNew == imgs.length){ imgNew = 0; } else if(imgNew == imgOld){ imgNew += 1; }
$(this).attr('src', imgs[imgNew]).fadeIn("slow");
imgOld = imgNew;
});
}

Now - if you wanted it to me in a random order while only choosing from ones that havent been chosen until all of them are chosen and starting over again, that's another thing. For example:

Img 1
Img 2
Img 3
Img 4
Img 3 is randomly chosen, so now the only options are 1, 2, and 4, then keep subtracting until none are left - then restart with 1, 2, 3, and 4.

Abbster22
12-09-2010, 12:33 AM
Now - if you wanted it to me in a random order while only choosing from ones that havent been chosen until all of them are chosen and starting over again, that's another thing. For example:

Img 1
Img 2
Img 3
Img 4
Img 3 is randomly chosen, so now the only options are 1, 2, and 4, then keep subtracting until none are left - then restart with 1, 2, 3, and 4.

I understand that and I should've made the purpose clearer and my apologies to you or anyone else reading this. I would actually like to figure a way how to do as you stated above.

Nile
12-09-2010, 01:38 AM
Do you know javascript? I've been playing around a while and came to this (which doesn't work):


<script type="text/javascript">
var original = [
'http://gds.parkland.edu/student/fall10/gds220/ashipley/p4/final_revised/images/slideshow/001.jpg',
'http://gds.parkland.edu/student/fall10/gds220/ashipley/p4/final_revised/images/slideshow/004.jpg',
'http://gds.parkland.edu/student/fall10/gds220/ashipley/p4/final_revised/images/slideshow/002.jpg'];
var imgs = original.slice(0);
$(function() {
setInterval(Slider, 3000);
});

function Slider() {
$('#imageSlide').fadeOut("slow", function() {
if(imgs.length < 1) { imgs = original.slice(0); }
var imgNew = Math.floor(Math.random()*(imgs.length));
imgs.splice(imgNew, 1);
$(this).attr('src', imgs[imgNew]).fadeIn("slow");
});
}
</script>

It has the right idea but needs to be played around with a little till the errors are gone, I can't work on it now anymore so I thought I'd just post my progress - but I'll try later.

Abbster22
12-09-2010, 02:42 AM
I know a little bit about JavaScript, but not very much since I'm beginning to learn some of it myself. I will play around with it as well in a little bit and hopefully make progress on it as well.

Nile
12-09-2010, 03:33 AM
Done, try this


var roundImg = ["", false]; //[when the round of pictures is over, set this variable to the last displaye image so it's not repeated, new round?]
var original = [
'http://gds.parkland.edu/student/fall10/gds220/ashipley/p4/final_revised/images/slideshow/001.jpg',
'http://gds.parkland.edu/student/fall10/gds220/ashipley/p4/final_revised/images/slideshow/004.jpg',
'http://gds.parkland.edu/student/fall10/gds220/ashipley/p4/final_revised/images/slideshow/002.jpg'];
imgs = original.slice(0); // duplicate the original array
var imgNew;
$(function () {
setInterval(Slider, 3000);
});

function Slider() {
if (imgs.length == 0) { //if the round is finished
roundImg[0] = imgNew;
roundImg[1] = true;
imgs = original.slice(0); //replace imgs with original again so we start over at a new round
}
var imgNew = Math.floor(Math.random() * (imgs.length)); //random array
if (roundImg[1]) { //if its a new round
roundImg[1] = false;
if (imgNew == roundImg && imgNew == imgs.length) { //make sure that the last image from the last round isnt repeated as the first image in the new round
imgNew = 0;
} else if (imgNew == roundImg) {
imgNew += 1;
}
}
$('#imageSlide').fadeOut("slow", function () {
$(this).attr('src', imgs[imgNew]).fadeIn("slow");
imgs.splice(imgNew, 1); //get rid of the randomly selected image from the imgs array
})
}

Abbster22
12-09-2010, 03:48 AM
Wow that was very quick! I was about to begin work on it and I must say this is exactly what I was looking for. Thank you so much! :D

Nile
12-09-2010, 03:51 AM
No problem, I'm glad to help :D.

BTW- If you look above, I commented out some things in the script.

Here on DD, we like to keep things organized. In an effort to do so, you have the option to set a thread to resolved when an issue is fixed. To make the status of the thread resolved:
1. Go to your first post
2. Edit your first post
3. Click "Go Advanced"
4. In the dropdown next to the title, select "RESOLVED"