...

View Full Version : Resolved Simple Random Slideshow



Abbster22
12-07-2010, 09:10 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.

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

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

I wanted to know if I have to create a variable like in the updated version of this slideshow so I can the apply a random shuffle to it? If not, how would I randomly shuffle the pictures?
http://www.devcurry.com/2010/03/simple-image-slideshow-using-jquery.html

SB65
12-08-2010, 10:52 AM
Here's a slightly different approach:

HTML:


<div id="cycler">
<img class="active" src="/images/1.jpg" alt="" />
<img src="/images/2.jpg" alt="" />
<img src="/images/3.jpg" alt="" />
etc etc
</div>


CSS:


#cycler{position:relative}
#cycler img{position:absolute;display:none}
#cycler img.active{display:block}


jQuery:


function cycleImages(){
var $active = $('#cycler .active');
var $numimgs = $('#cycler img').length;//count the number of images
var $randomindex=Math.floor(Math.random()*$numimgs);//generate a random number based on the number of images
var $next = $('#cycler img').eq($randomindex);//select the image corresponding to the random number as the next image
$active.fadeOut('slow',function(){//fade out the visible image and then...
$active.removeClass('active');//...remove the active class and...
$next.fadeIn('slow').addClass('active');//...fade in the next image
});
}

$(document).ready(function(){
// run every 7s
setInterval('cycleImages()', 7000);
})

Abbster22
12-08-2010, 12:57 PM
It seems to be giving me only a ? mark in a box instead of the actual image when I put all of the code in. Also, I wanted to know if there was a way to randomly pick the images, guaranteeing the same image won't be picked twice?

SB65
12-08-2010, 01:49 PM
It seems to be giving me only a ? mark in a box instead of the actual image when I put all of the code in.

That must be your local path to the images - the path doesn't matter at all.


Also, I wanted to know if there was a way to randomly pick the images, guaranteeing the same image won't be picked twice?

So just that the same image isn't picked twice in succession, or that the images are shuffled and then displayed in the (shuffled) order?

Abbster22
12-08-2010, 01:59 PM
I actually have the local path to the images that I wanted, naming them correctly as well within my div.

My question is the first should be the <img class="active" ...>
then the rest should be <img src="imagelink" ..> within the div?

I would like it so that every time the user refreshes the website, the slideshow randomly shuffles the image array, then showing them in that order.

SB65
12-08-2010, 02:39 PM
The image with class="active" would be the one displayed when the page loads - add it to any image you want, or to none if you don't want any image displayed on load, and see below as well.

Probably easier to shuffle the images server side, but failing this...try this:


function cycleImages(){
var $active = $('#cycler .active');
var $next = ($('#cycler .active').next().length > 0) ? $('#cycler .active').next() : $('#cycler img:first');//find the next image from the active image
$active.fadeOut('slow',function(){//fade out the visible image
$active.removeClass('active');//remove the active class
$next.fadeIn('slow').addClass('active');//fade in the next image
});
}

$(document).ready(function(){
var $numimgs = $('#cycler img').length;//count the number of images
var $randomindex=Math.floor(Math.random()*$numimgs);//generate a random number based on the number of images
var $active = $('#cycler img').eq($randomindex).fadeIn('slow').addClass('active');//select the image corresponding to the random number as the next image and make it active
// run every 3s
setInterval('cycleImages()', 3000);
})



So here we assume no image with class active on load, and randomly pick one, fade it in, then cycle round the images.

Abbster22
12-08-2010, 03:17 PM
I changed the HTML code to look like this and I'm still having issues:



<div id="cycler">
<img class="active" src="/images/slideshow/001.jpg" alt="" />
<img src="/images/slideshow/002.jpg" alt="" />
<img src="/images/slideshow/003.jpg" alt="" />
<img src="/images/slideshow/004.jpg" alt="" />
<img src="/images/slideshow/005.jpg" alt="" />
<img src="/images/slideshow/006.jpg" alt="" />
</div>


If instead I wanted to have the images shuffle so the same image isn't picked twice in succession, what would I do in order to accomplish this?

SB65
12-08-2010, 03:44 PM
What are the issues you're having?

Abbster22
12-08-2010, 03:50 PM
Actually, I tinkered with the code and I shouldn't have had the slash in front of the link and now the pictures show up! :)

The only issues I'm having is when the slideshow begins, it seems to show several faded images at a time, eventually then randomly going through the slideshow. After awhile, the slideshow stops randomly picking the images and goes through the usual order.

Thank you for all of your help so far! :D I appreciate all the time you've put into helping me.

SB65
12-08-2010, 04:14 PM
I don't see that in my test code. Can you give a link to your page?

Abbster22
12-08-2010, 06:31 PM
Of course! I should've posted this in the first place. That was my fault.

http://gds.parkland.edu/student/fall10/gds220/ashipley/p4/final_revised/index.html

UPDATE: I wanted to let you know that for some reason, when I check this in Firefox, all of the images first show up, one below the other, then randomly disappear. Is it something in the way I set up the classes?

SB65
12-08-2010, 08:57 PM
Looks like you're just missing the css as earlier:


#cycler{position:relative}
#cycler img{position:absolute;display:none}
#cycler img.active{display:block}

That code is going to cycle through the images starting from a random image as per post #6.

To pick a random image, excluding the last image, try this version:


function cycleImages(){
var $active = $('#cycler .active');
var $numimgs = $('#cycler img').length;//count the number of images
var $proceed = false;
while (!$proceed){
$randomindex=Math.floor(Math.random()*$numimgs);//generate a random number based on the number of images
if ($('#cycler img').index($active) != $randomindex) $proceed = true;//if the index of the currently active image is not the same as the randomindex, we're OK to go, otherwise loop again
}
var $next = $('#cycler img').eq($randomindex);//select the image corresponding to the random number as the next image
$active.fadeOut('slow',function(){//fade out the visible image and then...
$active.removeClass('active');//...remove the active class and...
$next.fadeIn('slow').addClass('active');//...fade in the next image
});
}

$(document).ready(function(){
// run every 3s
setInterval('cycleImages()', 3000);
})

Abbster22
12-08-2010, 09:22 PM
I had the CSS in the one of my external CSS files linked with the website, but I moved it and I got rid of a preloadImages function I added earlier and now it works fantastically! :D

The only glitch it seems to have yet is with the first two transitions, it seems to have two images that are fading out together, but then it seems to function like a normal slideshow. Maybe there is a way to get it so it can capture not only the active image, but the next random image or the random number being picked to store so more pictures can be viewed in the slideshow?

Ex.


$next = $random number; //create variable for next image
if ($('#cycler img').index($next) != $randomindex) $proceed = true; //to not only have the active image not show twice, but the image that comes after the active image not be picked again until the third transition


Other than that, thank you ever so much! And to tell you, this will be featured on the client's website and I give you much credit for helping me get this problem solved!

SB65
12-08-2010, 09:37 PM
Remove the active class from your img html, that should sort out the first transition.

However, that does mean no image at all would be displayed if there's no javascript. If this is a concern, try leaving the active class in the html and add this line:


$(document).ready(function(){
$('#cycler .active').removeClass('active');
var $numimgs = $('#cycler img').length;//count the number of images
var $randomindex=Math.floor(Math.random()*$numimgs);//generate a random number based on the number of images
var $active = $('#cycler img').eq($randomindex).fadeIn('slow').addClass('active');//select the image corresponding to the random number as the next image and make it active
// run every 3s
setInterval('cycleImages()', 3000);
})

So here, if there's no javascript, the image with class active is displayed, but if javascript is loaded, it'll remove the active class and select a random image instead.

Abbster22
12-08-2010, 09:50 PM
Felicimo! :D That took care of the problem.

As you can see, I'm pretty new into learning JQuery, learning as I go with the languages.

I can't thank you enough for all of the help, and if you would like, we can collaborate on something together. Just let me know!

bob schrader
06-14-2012, 11:17 PM
I've been looking for hours to add a random function to jquery slide show. Thanks. If you are still monitoring this thread did have a question. Is there a way to keep it from repeating random number twice - something saying maybe random++, or no repeat?

I did with test of only 4 images, so very noticable,will have 6-10 eventually for each show so that may make it less noticable but any suggestions welcome since I am just learning jquery and java, and php.

THank you again in advance for any advice or suggestions you may have. It's also possible I am may not be searching/using the right terms in trying to find a fix.

bob schrader
06-14-2012, 11:36 PM
SB65, Sorry, I just re-read post and had missed that you already addressed this issue, I did not notice it first go around. Sorry for the disturbance.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum