Javascript: how do I change scrolling image start point?

Discussion in 'Web Design and Development' started by fearless3955, Sep 22, 2008.

  1. fearless3955 macrumors newbie

    Joined:
    Sep 12, 2008
    #1
    I've struggled to implement some cool script for a self-scrolling image gallery but the start point of the scroll is outside the cell so it takes time to fill the area completely, and then, at the end of all the images, it takes a while for the sequence to recommence because of the same gap.
    1. Most important - can anyone see how to amend the code so it will start with the cell full (instead of coming on from the side ) and then will loop forever WITHOUT a recurring gap?
    2. Although the script seems to work (in Safari) Dreamweaver doesn't like where I've positioned Step 3:
    <body onload="startw();">
    so does it need to be bundled with other existing code somewhere, or where is it supposed to go?
    Here's my experimental page:
    http://www.suemo.com/aboutus_test2.html
    I'm sure there's a simple answer?!
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    I posted a similar solution a couple days go for someone else in this thread. That script scrolls based on if a person mouses over a 'button' area, but could easily be tweaked to be a continuous scroll if you know some JavaScript. If you need help I can give you a hand as I have time, but don't have a ton of it as I'm still recovering from hurricane Ike and only have internet at work.
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    OK, I worked out a different Image Carousel that should work for what you're doing. I haven't thoroughly tested in many browsers, but we'll see.

    Place this JavaScript block inside the head tag:
    PHP:
    <script type="text/javascript">
    //<![CDATA[
    ImageCarousel = function()
    {
      var 
    images = [
        
    'image01.jpg',
        
    'image02.jpg',
        
    'image03.jpg'
      
    ];
      var 
    offsets = new Array(images.length);
      var 
    = {
        
    //**** User Preferences ****
        
    id'carousel',  // tag where carousel should be placed
        
    step4,         // speed, 1-25
        //**** End user preferences ****
        
    timernull,
        
    widthAll0,
        
    count0
      
    };
      
    Init = function() {
        
    // total width
        
    v['wAll'] = 0;
        
    // preload images and gather widths
        
    for (var x=0i=new Array(); images.lengthx++) {
          
    i[x] = new Image(); i[x].src images[x];
          
    offsets[x] = 0;
          
    i[x].onload = function(){ Totaler(this); };
        }
        
    // Place images onto page
        
    var txt '';
        for (var 
    x=0y=images.lengthx<yx++) {
          
    txt += "<img src='"images[x] +"' style='position:absolute; top:0;' "+
            
    "alt='' />";
        }
        
    document.getElementById('carousel').innerHTML txt;
        
    v['imgs'] = document.getElementById('carousel').getElementsByTagName('img');
      };
      
    Totaler = function(i) {
        
    v['wAll'] += i.width;
        if (++
    v['count'] >= images.length) {
          var 
    max 0;
          for (var 
    x=0y=v['imgs'].lengthx<yx++) {
            
    max = (v['imgs'][x].height max) ? v['imgs'][x].height max;
          }
          
    document.getElementById('carousel').style.height max +'px';
          
    Start();
        }
      };
      
    Start = function() {
        
    // set initial spots
        
    var 0;
        for (var 
    x=0y=v['imgs'].lengthx<yx++) {
          if (
    0) {
            
    offsets[x] = t;
            
    v['imgs'][x].style.left = (+'px');
            
    += v['imgs'][x].width;
          }
          else {
            
    v['imgs'][x].style.left = (+'px');
            
    += v['imgs'][x].width;
          }
        }
        
    Left();
      };
      
    Left = function() {
        for (var 
    x=0y=images.lengthx<yx++) {
          if ((
    offsets[x] - v['step']) < (v['imgs'][x].width)) {
            
    offsets[x] = v['wAll'] - v['imgs'][x].width v['step'];
          }
          else { 
    offsets[x] -= v['step']; }
        }
        
    Redraw();
        
    v['timer'] = setTimeout(function(){Left()}, 70);
      };
      
    Redraw = function() {
        for (var 
    x=0y=v['imgs'].lengthx<yx++) {
          
    v['imgs'][x].style.left offsets[x] +'px';
        }
      };
      
    window.onload Init;
    }();
    //]]>
    </script>
    Change the image locations for the images variable near the top, same as you did for your current script. You can also adjust scroll speed by adjusting the step variable also near the top (between 1 and 25).

    Place this with your CSS (you'll need to adjust the width for your layout and probably can get rid of the margin):
    Code:
    #carousel {
     position: relative;
     margin: 0 auto;
     width: 800px;
     overflow: hidden;
    }
    Lastly, place this HTML where you want the carousel:
    HTML:
    <div id="carousel"></div>
    If you have trouble getting this in place let me know.
     
  4. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #4
    I have to say, you are without a doubt the most helpful person I've ever had the pleasure to read the posts of!
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    Thanks, I appreciate that. I help where I can and pass on the knowledge the internet has taught me, and to lead by example. Mac Rumors is one of the friendliest forums I've seen on the internet. There's rarely any name calling or bullying, just Mac people helping Mac people (and the occasional Windows person who needs our help) and I try to encourage that continuation by providing helpful guidance (and the occasional not-so-helpful comments).

    On a note about my code above. If anyone gives it a try, post your thoughts on it (code-wise or presentation-wise). I'm likely to turn it into a more formal script that people can implement on their own site more easily than what I have posted here, which will of course be available for free on my site whenever I get to that.
     
  6. fearless3955 thread starter macrumors newbie

    Joined:
    Sep 12, 2008
    #6
    Thanks

    Many thanks for that. I will work with it shortly (though in the meantime I had to go the Flash route, which makes for a 100k file and would be a pain to edit) but I can't tell you how grateful I am that you've now set me on the right track.
     
  7. tnriverfish macrumors newbie

    Joined:
    Sep 29, 2008
    #7
    Reverse Direction?

    Angelwatt,
    Thanks for the script. We're a mix of Windows folk and Mac folk and I actually dropped your script into a site running on .net and tied with with an array built in C# code. Everything is working great!

    I put it on its own page and then referenced that in an iframe so I could display the scrolling images continually in the banner area. Returns a very nice effect.

    I was wondering if there was a way to redirect the script to scroll to the right. Understandably reading left to right lends it self to adding images with position absolute, but I thought I'd ask. Rolling in the other direction really lends itself better to the overall design of the site.

    Thanks!
    tnriverfish
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    This crossed my mind when I wrote it, but wasn't needed at the time so let it go. I thought it was a simple matter of reversing some signs, but it took a touch more than that. Mainly doing a little spatial reorientation in my head to make sense of what needed to be done. Below is the missing Right function that you need. Just add the below code (like after the Left function) and at the end of the Init function, change the line to call Right instead of Left.

    Glad to hear the script worked for you too. I haven't thrown it in any real world web sites to see how it behaves. I'm still surprised this code wasn't out there somewhere, or at least I never ran across any code like this, but it guess there were some who were looking for it.

    PHP:
      Right = function() {
        for (var 
    x=0y=images.lengthx<yx++) {
          if ((
    offsets[x] + v['step']) > (v['wAll'] - v['imgs'][x].width)) {
            
    offsets[x] = v['imgs'][x].width v['step'];
          }
          else { 
    offsets[x] += v['step']; }
        }
        
    Redraw();
        
    v['timer'] = setTimeout(function(){Right()}, 70);
      };
     
  9. tnriverfish macrumors newbie

    Joined:
    Sep 29, 2008
    #9
    Thanks! The first version is running well on my machine.
    I'll let you know when I put a beta up on the web.

    Perhaps I'll see if they are up for one left and one right ;-)
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    Thanks to tnriverfish's trying out of the script it became apparent that the script does not work in IE. I'm sure we're all shocked. Thankfully I've run into this specific problem IE has with acknowledging a img.onload event for images already existing in the cache. Below is the script updated to work on IE5+ (oh yes, it works that far back) as well as all of the other browsers I tested (Firefox, Safari, Opera, Chrome) though only checked the more recent versions of those browsers. The CSS and HTML provided earlier has not changed.

    PHP:
    <script type="text/javascript">
    //<![CDATA[
    ImageCarousel = function()
    {
      var 
    images = [
        
    'image01.jpg',
        
    'image02.jpg',
        
    'image03.jpg'
      
    ];
      var 
    offsets = new Array(images.length);
      var 
    = {
        
    //**** User Preferences ****
        
    id'carousel',  // tag where carousel should be placed
        
    step4,         // speed, 1-25
        //**** End user preferences ****
        
    timernull,
        
    widthAll0,
        
    count0
      
    };
      
    Init = function() {
        
    // total width
        
    v['wAll'] = 0;
        
    // Place images onto page
        
    var txt '';
        for (var 
    x=0y=images.lengthx<yx++) {
          
    txt += "<img src='"images[x] +"' style='position:absolute; top:0;' "+
            
    "alt='' />";
        }
        
    document.getElementById('carousel').innerHTML txt;
        
    v['imgs'] = document.getElementById('carousel').getElementsByTagName('img');
        
    // preload images and gather widths
        
    for (var x=0images.lengthx++) {
          var 
    img = new Image();
          
    offsets[x] = 0;
          
    img.onload = function(){ Totaler(this); };
          
    img.src images[x];
        }
      };
      
    Totaler = function(i) {
        
    v['wAll'] += i.width;
        if (++
    v['count'] >= images.length) {
          var 
    max 0;
          for (var 
    x=0y=v['imgs'].lengthx<yx++) {
            
    max = (v['imgs'][x].height max) ? v['imgs'][x].height max;
          }
          
    document.getElementById('carousel').style.height max +'px';
          
    Start();
        }
      };
      
    Start = function() {
        
    // set initial spots
        
    var 0;
        for (var 
    x=0y=v['imgs'].lengthx<yx++) {
          if (
    0) {
            
    offsets[x] = t;
            
    v['imgs'][x].style.left = (+'px');
            
    += v['imgs'][x].width;
          }
          else {
            
    v['imgs'][x].style.left = (+'px');
            
    += v['imgs'][x].width;
          }
        }
        
    Right();
      };
      
    Left = function() {
        for (var 
    x=0y=images.lengthx<yx++) {
          if ((
    offsets[x] - v['step']) < (v['imgs'][x].width)) {
            
    offsets[x] = v['wAll'] - v['imgs'][x].width v['step'];
          }
          else { 
    offsets[x] -= v['step']; }
        }
        
    Redraw();
        
    v['timer'] = setTimeout(function(){Left()}, 70);
      };
      
    Right = function() {
        for (var 
    x=0y=images.lengthx<yx++) {
          if ((
    offsets[x] + v['step']) > (v['wAll'] - v['imgs'][x].width)) {
            
    offsets[x] = v['imgs'][x].width v['step'];
          }
          else { 
    offsets[x] += v['step']; }
        }
        
    Redraw();
        
    v['timer'] = setTimeout(function(){Right()}, 70);
      };
      
    Redraw = function() {
        for (var 
    x=0y=v['imgs'].lengthx<yx++) {
          
    v['imgs'][x].style.left offsets[x] +'px';
        }
      };
      
    window.onload Init;
      return { 
    Left:LeftRight:Right };
    }();
    //]]>
    If you look at the code closely you'll see that nothing really changed except the order of the code in the Init function. IE just sucks like that.

    Late Edit: I've given this script some updates and gave it a home on my site.
     
  11. tnriverfish macrumors newbie

    Joined:
    Sep 29, 2008
    #11
    Angelwatt,
    The update worked great. Again, I really appreciate your help.
     

Share This Page