skinofstars
Dec 6th 2007, 9:30 am
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>
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
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>
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