Menu
Hi all,
I have an iFrame that will eventually have a set of images that you can scroll through using a previous and next button below them. Right now there are only two images. I had the next/previous javascript working when I had four placeholders, but now the client only wants two images up and when you are on the second image and hit next, it goes to a blank screen.
I’m assuming it’s something really simple that I am not doing so any help on this would be so much appreciated.
here’s the iFrame of the images: [url]http://www.brodmannblades.com/product.html
[code=html]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<script type=”text/javascript” src=”nextPrevious.js”></script>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
<!–
body {
background-color: #000000;
}
body,td,th {
color: #333;
}
a:link {
color: #333;
text-decoration: none;
}
a:visited {
color: #666;
text-decoration: none;
}
a:hover {
color: #09C;
text-decoration: none;
}
a:active {
color: #000;
text-decoration: none;
}
–>
</style>
</head>
<body>
<div style=”width:780px; height:400px; margin: auto;”>
<img name=”imgSrc” width=”780″ height=”400″ id=”imgSrc”>
</div>
<!– Controller –>
<table width=”780″ border=”0″ cellspacing=”0″ cellpadding=”0″ style=”border:1px solid #000000; width:780px; margin: auto;”>
<tr>
<td align=”center”><a href=”#” onClick=”prev();”> «</a></td>
<td align=”center”><a href=”#” onClick=”next();”> » </a></td>
</tr>
</table>
<p>
</body>
</html>
and here’s the javascript code that it is calling up: [url]http://www.brodmannblades.com/nextPrevious.js
[CODE]// List image names without extension
var myImg= new Array(2)
myImg[0]= “bw01”;
myImg[1]= “bw02”;
// Tell browser where to find the image
myImgSrc = “images/”;
// Tell browser the type of file
myImgEnd = “.jpg”
var i = 0;
// Create function to load image
function loadImg(){
document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
}
// Create link function to switch image backward
function prev(){
if(i<1){
var l = i
} else {
var l = i-=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}
// Create link function to switch image forward
function next(){
if(i>2){
var l = i
} else {
var l = i+=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}
// Load function after page loads
window.onload=loadImg;
Again, thanks for any help!