...

View Full Version : stumped on making previous/next buttons work...



slickshoes12
05-05-2009, 11:12 PM
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: http://www.brodmannblades.com/product.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: http://www.brodmannblades.com/nextPrevious.js


// 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!

Old Pedant
05-06-2009, 12:34 AM
Change your prev() and next() functions to automatically handle *any* number of images:


// Create link function to switch image backward
function prev()
{
i = ( i + myImg.length - 1 ) % myImg.length;
loadImg();
}
// Create link function to switch image forward
function next()
{
i = ( i + 1 ) % myImg.length;
loadImg();
}

Old Pedant
05-06-2009, 12:43 AM
Personally, I would have done the whole thing a lot simpler:



<head>
<script>
// use *meaningful* names..."i" is WAY overused!
// And "myImg" is a lie...there are more than one
var currentImage = 0;
var slideshowImages = [ "bw01", "bw02" ];

function loadImg( moveBy )
{
if ( moveBy == null ) moveBy = 0;
var ilen = slideshowImages.length;
currentImage = ( currentImage + ilen + moveBy ) % ilen;
document.getElementById("imgSrc").src = "images/" + slideshowImages[currentImage] + ".jpg";
}
</script>
</head>
<body onload="loadImg(0);">
<div style="width:780px; height:400px; margin: auto;">
<img width="780" height="400" id="imgSrc">
</div>
<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="loadImg(-1);"> </a></td>
<td align="center"><a href="#" onClick="loadImg(1);"> </a></td>
</tr>
</table>
<p>
</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum