Forums

seedorf

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)


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<kk;ii++){
imgArray[ii] = new Image()
imgArray[ii].src = pic[ii].name
imgArray[ii].width = pic[ii].width

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

function ready(){
	for (ii=0;ii<kk;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<kk;ii++){
		myLeft[ii] = myLeft[ii] - 1
		
	if (myLeft[ii] == -(pic[ii].width)){
		hhh = 0
		for (nnn=0;nnn<kk;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<kk;ii++){
document.write('<a href = ' + pic[ii].link + 'target=\"_blank\" ><img space=0 hspace=0 vspace=0 border=0 height=131 style=position:absolute;top:0;left:0' + myLeft[ii]  + '; src=' + pic[ii].name + ' onMouseOver=stop() onMouseOut=go()></a>')
}

apostrophe

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.

treehouse : what would you like to learn today?

Forums

Image scroller not working with XHTML 1.0