Simple Random Slideshow

[Abbster22]

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/fall...sed/index.html

I had gotten the initial script from here:
http://www.devcurry.com/2009/07/crea...how-using.html

[Nile]

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]

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]

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]

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]

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]

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!

[Nile]

No problem, I'm glad to help .

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"