SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multi instance image fade

    I have a multiple image fade on a page. Below is the code. There are three images on the page, and they fade one-by-one in a random order.

    This is my question:
    How would I need to change the JavaScript so that the image change doesn't happen on the same image in a row. Currently an image might be randomly selected to fade again.

    And another one:
    And how would it work if I wanted the images to fade in order one after the other?(I still want the image selection to happen randomly)

    Many thanks for any help. Unfortunately I'm good at HTML/CSS but haven't got to grips with JS yet.


    HTML
    Code:
    <div class="rotator-wrapper">
      <ul id="rotator">
    
        <li>
    <img class="rotator-image img1" src="http://localhost/~T1/quartet/img/header/31.jpg">
    <img class="rotator-image img2" src="http://localhost/~T1/quartet/img/header/32.jpg">
    <img  class="rotator-image img3" src="http://localhost/~T1/quartet/img/header/33.jpg">
    <img class="rotator-image img4" src="http://localhost/~T1/quartet/img/header/34.jpg">
    <img  class="rotator-image img5" src="http://localhost/~T1/quartet/img/header/35.jpg">
        </li>
    
            <li>
    <img class="rotator-image img1" src="http://localhost/~T1/quartet/img/header/21.jpg">
    <img class="rotator-image img2" src="http://localhost/~T1/quartet/img/header/22.jpg">
    <img  class="rotator-image img3" src="http://localhost/~T1/quartet/img/header/23.jpg">
    <img class="rotator-image img4" src="http://localhost/~T1/quartet/img/header/24.jpg">
    <img  class="rotator-image img5" src="http://localhost/~T1/quartet/img/header/25.jpg">
        </li>
    
            <li>
    <img class="rotator-image img1" src="http://localhost/~T1/quartet/img/header/11.jpg">
    <img class="rotator-image img2" src="http://localhost/~T1/quartet/img/header/12.jpg">
    <img  class="rotator-image img3" src="http://localhost/~T1/quartet/img/header/13.jpg">
    <img class="rotator-image img4" src="http://localhost/~T1/quartet/img/header/14.jpg">
    <img  class="rotator-image img5" src="http://localhost/~T1/quartet/img/header/15.jpg">
    <img class="rotator-image img6" src="http://localhost/~T1/quartet/img/header/16.jpg">
    <img class="rotator-image img7" src="http://localhost/~T1/quartet/img/header/17.jpg">
              <img class="rotator-image img8" src="http://localhost/~T1/quartet/img/header/18.jpg">
        </li>
     
      </ul>
    </div>
    JS
    Code:
     $(function(){
      // time between image rotate
      var delay = 2500;
      
      // for each list item in 
      // the rotator ul, generate
      // show a random list item
      $('#rotator > li').each(function(){
        // save images in an array
        var $imgArr = $(this).children();
        // show a random image
        $imgArr.eq(Math.floor(Math.random()*$imgArr.length)).show();
      });
      // run the changeImage function after every (delay) miliseconds
      setInterval(function(){
        changeImage();
      },delay);
      
      function changeImage(){
        // save list items in an array
        var $liArr = $('#rotator > li');
        // select a random list item
        var $currLi = $liArr.eq(Math.floor(Math.random()*$liArr.length));
        // get the currently visible image
        var $currImg = $('.rotator-image:visible', $currLi);
        if ($currImg.next().length == 1) {
          var $next = $currImg.next();
        } else {
          var $next = $('.rotator-image:first', $currLi);
        }
        $currImg.fadeOut(1500);
          $next.fadeIn(1500);
      }  
    });

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by spirelli View Post
    How would I need to change the JavaScript so that the image change doesn't happen on the same image in a row. Currently an image might be randomly selected to fade again.
    You can use a random bag. so that each item is referenced in an array, which you then shuffle, and then remove the first item from that array whenever you want the next random item from it. For example, see: http://jsperf.com/random-grab-bags

    Quote Originally Posted by spirelli View Post
    And how would it work if I wanted the images to fade in order one after the other? (I still want the image selection to happen randomly)
    The standard way of doing that is to give the code that's doing the fading a callback function, so that once the fading is complete, that fading code can then call the callback function to trigger the next stage of things.
    An example of how to do callbacks can be found at http://www.impressivewebs.com/callba...ns-javascript/
    Last edited by paul_wilkins; Sep 27, 2012 at 15:00.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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