Macified
May 19th, 2011, 11:20 PM
I have just added a javascript into iWeb as an html snippet. Works the way it was intended to work.
The script pre-loads some images into the page and then cycles through them based on a pre-defined timer.
The only problem is that the script doesn't loop. Once the final image is loaded the script ends.
I know I could just add more lines of script that keeps referencing back to the same images but that's not the proper way and, eventually, the script would end anyway.
I know nothing nothing about javascript. It was a copy and paste affair and follow the included instructions to reference my own images. Could someone review the following script and tell me how to make it loop?
Thanks in advance...
The code to be pasted into the HTML Snippet is shown below:
The URLs to the images are marked in blue. Add more as needed.
The slideshow is called up using the URL to the first slide - marked in orange - and the frame size and border are adjusted by the items marked in red.
The timing is adjusted by increasing or decreasing the Timeout - marked in yellow.
Add the line....
if (whichimage==1)
window.location="link1.htm"
..... for each additional slide and number it appropriately in two places.
<html>
<head>
<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="http://www.domain.com/Folder-Name/1.jpg"
var image2=new Image()
image2.src="http://www.domain.com/Folder-Name/2.jpg"
var image3=new Image()
image3.src="http://www.domain.com/Folder-Name/3.jpg"
//-->
</script>
</head>
<body>
<a href="javascript:slidelink()">
<img src="http://www.domain.com/Folder-Name/1.jpg" name="slide" border="0" width="960" height="300" /></a>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<10)
step++
else
step=1
setTimeout("slideit()",5000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="link1.htm"
else if (whichimage==2)
window.location="link2.htm"
else if (whichimage==3)
window.location="link3.htm"
}
//-->
</script>
</body>
</html>
The script pre-loads some images into the page and then cycles through them based on a pre-defined timer.
The only problem is that the script doesn't loop. Once the final image is loaded the script ends.
I know I could just add more lines of script that keeps referencing back to the same images but that's not the proper way and, eventually, the script would end anyway.
I know nothing nothing about javascript. It was a copy and paste affair and follow the included instructions to reference my own images. Could someone review the following script and tell me how to make it loop?
Thanks in advance...
The code to be pasted into the HTML Snippet is shown below:
The URLs to the images are marked in blue. Add more as needed.
The slideshow is called up using the URL to the first slide - marked in orange - and the frame size and border are adjusted by the items marked in red.
The timing is adjusted by increasing or decreasing the Timeout - marked in yellow.
Add the line....
if (whichimage==1)
window.location="link1.htm"
..... for each additional slide and number it appropriately in two places.
<html>
<head>
<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="http://www.domain.com/Folder-Name/1.jpg"
var image2=new Image()
image2.src="http://www.domain.com/Folder-Name/2.jpg"
var image3=new Image()
image3.src="http://www.domain.com/Folder-Name/3.jpg"
//-->
</script>
</head>
<body>
<a href="javascript:slidelink()">
<img src="http://www.domain.com/Folder-Name/1.jpg" name="slide" border="0" width="960" height="300" /></a>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<10)
step++
else
step=1
setTimeout("slideit()",5000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="link1.htm"
else if (whichimage==2)
window.location="link2.htm"
else if (whichimage==3)
window.location="link3.htm"
}
//-->
</script>
</body>
</html>