Grow your CSS skills. Land your dream job.

Image scroller not working with XHTML 1.0

  • # July 8, 2009 at 8:23 pm

    Hi there guys.

    I’ve been searching the net hard for some javascript code that allows me to automatically scroll images non-stop horizontally on a webpage. After a long time searching, I finally came across something that was close enough. I then customised it as much as possible to make it do exactly what I wanted it to do.

    This testing was done on a page without a DOCTYPE, so when I moved it over to a page that had a DOCTYPE, the javascript got messed up and refused to scroll. It just showed a single stationary image.

    I’ve uploaded both webpages to my MobileMe site so you guys can have a look.
    The page without a DOCTYPE: web.me.com/zubby
    The page with a DOCTYPE: web.me.com/zubby/2.html

    the javascript is also detailed below. I’ll be extremely thankful if someone can help me out with this. (esp. Apostrophe. He always seems to have an answer to all my questions)

    Code:
    var pic = new Array()

    function banner(name, width, link){
    this.name = name
    this.width = width
    this.link = link
    }

    pic[0] = new banner(‘images/cellarpics/cellarbynightsmall.jpg’,203,’images/cellarpics/cellarbynightsmall.jpg’)
    pic[1] = new banner(‘images/cellarpics/insidecellarnewsmall.jpg’,203,’images/cellarpics/insidecellarnewsmall.jpg’)
    pic[2] = new banner(‘images/cellarpics/mainshotwebsmall.jpg’,203,’images/cellarpics/mainshotwebsmall.jpg’)
    pic[3] = new banner(‘images/cellarpics/MicroCelllar2tileopensmall.jpg’,203,’images/cellarpics/MicroCelllar2tileopensmall.jpg’)
    pic[4] = new banner(‘images/cellarpics/openmicrosmall.jpg’,203,’images/cellarpics/openmicrosmall.jpg’)
    pic[5] = new banner(‘images/cellarpics/topopenweb1small.jpg’,203,’images/cellarpics/topopenweb1small.jpg’)
    pic[6] = new banner(‘images/cellarpics/topweb2small.jpg’,203,’images/cellarpics/topweb2small.jpg’)
    pic[7] = new banner(‘images/cellarpics/topwebclosed1small.jpg’,203,’images/cellarpics/topwebclosed1small.jpg’)
    /*
    pic[8] = new banner(‘http://www.sxc.hu/pic/s/d/da/da9l/290444_yellow_rose.jpg’,102,’http://www.sxc.hu/pic/m/d/da/da9l/290444_yellow_rose.jpg’)
    */

    var speed = 10

    var kk = pic.length
    var ii
    var hhh
    var nnn
    var myInterval
    var myPause
    var mode = 0

    var imgArray = new Array(kk)
    var myLeft = new Array(kk)

    for (ii=0;ii imgArray[ii] = new Image()
    imgArray[ii].src = pic[ii].name
    imgArray[ii].width = pic[ii].width

    hhh=0
    for (nnn=0;nnn hhh=hhh+pic[nnn].width
    }
    myLeft[ii] = hhh
    }

    function ready(){
    for (ii=0;ii if (document.images[ii].complete == false){
    return false
    break
    }
    }
    return true
    }

    function startScrolling(){
    if (ready() == true){
    window.clearInterval(myPause)
    myInterval = setInterval("autoScroll()",speed)
    }
    }

    function autoScroll(){
    for (ii=0;ii myLeft[ii] = myLeft[ii] - 1

    if (myLeft[ii] == -(pic[ii].width)){
    hhh = 0
    for (nnn=0;nnn if (nnn!=ii){
    hhh = hhh + pic[nnn].width
    }
    }
    myLeft[ii] = hhh
    }

    document.images[ii].style.left = myLeft[ii]
    }
    mode = 1
    }

    function stop(){
    if (mode == 1){
    window.clearInterval(myInterval)
    }
    if (mode == 0){
    window.clearInterval(myPause)
    }
    }

    function go(){
    if (mode == 1){
    myInterval = setInterval("autoScroll()",speed)
    }
    if (mode == 0){
    myPause = setInterval("startScrolling()",3000)
    }
    }

    myPause = setInterval("startScrolling()",100)

    for (ii=0;ii document.write('‘)
    }

    # July 9, 2009 at 3:17 am

    Wow, now I’m under pressure. :D

    Tbh it looks like you know far more about javascript than me. I ran firebugs javascript debugger and it gave the error $("a[rel^='prettyPhoto']").prettyPhoto is not a fuction. About the only thing I can suggest is to load the css before the javascript.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".