Javascript scrolling image gallery

Discussion in 'JavaScript' started by skinofstars, Dec 6, 2007.

0
  1. #1
    Hey there, I'm a student and am having some problems with a script that I'm writing. I'm trying to make a scrolling image gallery but I just can't get the damn thing to work and the assignment is due in very soon!

    Here is the code:

    
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/>

<script language="Javascript" type="text/javascript">
window.onload = slide; //starts the function slide when html page is first loaded

// this is supposed to be a sliding rotating gallery thingy

function slide() {
	var imageNum = new Array(0,1,2,3,4,5,6,7); //these numbers are the end of an image name, eg image1.png - can be found in html file

//the for function is intended to increment the image number
	for (var i = 0; i < 8; i++) {  
	
//this function should return the current elements position
		function currPos(elem) {
			return document.getElementById(elem).offsetLeft;		
		}	
	
// document is the html page, getElementById is an inbuilt function for getting an objects id
// the currPos should be adding 1px to the left of said image, as defined in the .css file
		document.getElementById("image" + imageNum[i]).style.left = currPos("image" + imageNum[i]) + 1 + "px";

// if the currPos hasn't reached id="endPoint" then keep moving, 
		if (currPos("image" + imageNum[i]) < currPos("endPoint")) {
			setTimeout("slide()",10);
		}	
// else image should return to the far left hand side
		else if (currPos("image" + imageNum[i]) == currPos("endPoint")) {
			document.getElementById("image" + imageNum[i]).style.left = 0 + "px";
			slide();
		}
	}
}

</script>


<style type="text/css" >
body {
	background-color: #000;
}

#startpoint, #image0, #image1, #image2, #image3, #image4, #image5, #image6, #image7, #endpoint {
	position: absolute;
	top: 5px;
}

/* base start point */
#startpoint {
	left: 0;
	z-index: 1;
}

/* image start points */
#image0 {
	left: 5px;
	z-index: 2;
}

#image1 {
	left: 110px;
	z-index: 2;
}


#image2 {
	left: 215px;
	z-index: 2;
}


#image3 {
	left: 320px;
	z-index: 2;
}


#image4 {
	left: 425px;
	z-index: 2;
}

#image5 {
	left: 530px;
	z-index: 2;
}

#image6 {
	left: 635px;
	z-index: 2;
}

#image7 {
	left: 740px;
	z-index: 2;
}

/* end point */
#endpoint {
	left: 845px;
	z-index: 1;
}

</style>

<title>Sliding Gallery</title>
</head>

<body>

<div id="gallerySlide">
	<div id="startPoint"></div> <!--// not currently used, but could be used as the start point in the else loop in moveall.js //-->
	<img src="gallery/image0.png" id="image0" />
	<img src="gallery/image1.png" id="image1" />
	<img src="gallery/image2.png" id="image2" />
	<img src="gallery/image3.png" id="image3" />
	<img src="gallery/image4.png" id="image4" />
	<img src="gallery/image5.png" id="image5" />
	<img src="gallery/image6.png" id="image6" />
	<img src="gallery/image7.png" id="image7" />
	<div id="endPoint"></div>
</div>


</body>
</html>
    Code (markup):

    This is similar to this thread http://forums.digitalpoint.com/showthread.php?t=589479, but one doesn't like to threadjump. I also doubt it is the answer they are looking for as I'm after something really simple.

    As an added bonus, any clues as to how I would be able to make it pause on mouseover would be lovely.

    Thanks
    Kevin
     
    skinofstars, Dec 6, 2007 IP
  2. Mike H.

    Mike H. Peon

    Messages:
    219
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Mike H., Dec 6, 2007 IP
  3. cre8ive

    cre8ive Peon

    Messages:
    295
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thank you. This is exactly what I was looking for …

    And I started this thread.

    There is one problem though. I’ve been trying to get rid of the space surrounding images, you know, the beige space. How can I get rid of this …???
     
    cre8ive, Dec 6, 2007 IP
  4. cre8ive

    cre8ive Peon

    Messages:
    295
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Sorry, for this double post, but I think I found exactly what we’re looking for:

    http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm

    So, the keyword is “Conveyor Belt Slideshow.” As you hover over the slideshow, it stops. As you move your cursor out of the slideshow, it starts moving again. Also it’s pretty easy to set margins.
     
    cre8ive, Dec 7, 2007 IP
  5. skinofstars

    skinofstars Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thank you for the replies, though I find the link at javascript-demos doesn't work (perhaps its a FF/IE thing). I was wondering if someone would have a look at my script though. I've spent many hours trying to make it work and... it sounds odd, but I really just want to make my script work. I don't think I'm going to learn anything if I just copypasta some elses work.
    Thanks

    @cre8tive: I was going to say, but it seems someone beat me to it on your thread (this is getting confusing). If you wanted to change the border style it was just as simple as adjusting the css values.
     
    skinofstars, Dec 8, 2007 IP
  6. cre8ive

    cre8ive Peon

    Messages:
    295
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Ok ... I follow :) .

    I wanted to break a break today, but I ended up spending a fair amount of time looking at different websites, samples, etc.

    Too much to learn ...
     
    cre8ive, Dec 9, 2007 IP