Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Jan 2010
    Posts
    35
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Simple Random Slideshow

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

    I had gotten the initial script from here:
    http://www.devcurry.com/2009/07/crea...how-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/simp...ng-jquery.html
    Last edited by Abbster22; 12-09-2010 at 03:51 AM. Reason: The problem has been resolved. Thank you to the effort of SB65. You helped me so much!

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Here's a slightly different approach:

    HTML:

    Code:
    <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:

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

    Code:
    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);
        })

  • #3
    New Coder
    Join Date
    Jan 2010
    Posts
    35
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Quote Originally Posted by Abbster22 View Post
    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.

    Quote Originally Posted by Abbster22 View Post
    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?

  • #5
    New Coder
    Join Date
    Jan 2010
    Posts
    35
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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:

    Code:
    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.

  • #7
    New Coder
    Join Date
    Jan 2010
    Posts
    35
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I changed the HTML code to look like this and I'm still having issues:

    Code:
    <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?

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    What are the issues you're having?

  • #9
    New Coder
    Join Date
    Jan 2010
    Posts
    35
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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! I appreciate all the time you've put into helping me.

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    I don't see that in my test code. Can you give a link to your page?

  • #11
    New Coder
    Join Date
    Jan 2010
    Posts
    35
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Of course! I should've posted this in the first place. That was my fault.

    http://gds.parkland.edu/student/fall...sed/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?
    Last edited by Abbster22; 12-08-2010 at 08:52 PM. Reason: Another issue arose in Mozilla Firefox.

  • #12
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Looks like you're just missing the css as earlier:

    Code:
    #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:

    Code:
    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);
        })

  • Users who have thanked SB65 for this post:

    Abbster22 (12-08-2010)

  • #13
    New Coder
    Join Date
    Jan 2010
    Posts
    35
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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!

    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.
    Code:
    $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!

  • #14
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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:

    Code:
    $(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.

  • Users who have thanked SB65 for this post:

    Abbster22 (12-08-2010)

  • #15
    New Coder
    Join Date
    Jan 2010
    Posts
    35
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Felicimo! 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!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •