MTWK
12-01-2008, 01:05 AM
1) I can't figure out why parseInt doesn't work in the function changePhotograph(). If you click on either arrow, it will run this function. It pulls up the id of the main photograph, finds its source and then isolates the section of the img source name ie. photo10. Then I do a parseInt on it. It keeps returning NaN. Can anyone help? Why won't it take the photo10 and return 10?
2) I was actually hoping to be able to click on the arrow and go forward or backward in the photo gallery- to work through the array on each click BUT I can't figure out how to maintain the array index between clicks as a global variable. I've tried using a static code I found but I can't get that to work either. Does anyone have any suggestions?
I know there are tons of photo galleries out there but I'm trying to learn javascript by creating my own.
Here's the html.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfolio New</title>
<script type="text/javascript" src="portfolioNew.js"></script>
<link href="portfolioNew.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="imageContainer">
<div id="photoFrame" >
hello </div>
<p><img src="images/portfolio/Clients/photo10.jpg" alt="test image" /></p>
</div>
<ul id="portfolioArrows">
<li><a href="" title="1"><img src="images/portfolio/left_arrow.jpg" alt="Move gallery left" /></a></li>
<li><a href="" title="-1")><img src="images/portfolio/right_arrow.jpg" alt="Move gallery right" /></a></li>
</ul>
</body>
</html>
See it here.
http://rebeccarachael.com/portfolioNew.html
Javascript (problem is in the function changePhotograph() ):
window.onload = slideshowinit;
var numberslide=new Array();
//Sets up the array to create the links to images
numberslide[0]=["images/content/Clients/photo1.jpg"]
numberslide[1]=["images/content/Clients/photo2.jpg", ""]
numberslide[2]=["images/content/Clients/photo3.jpg", ""]
function slideshowinit() {
var counter = numberslide.length;
index=0;
//Get the width of the current picture
var imageContainer = document.getElementById("imageContainer");
var currentImage = imageContainer.getElementsByTagName("img");
//alert(currentImage[index].src);
//currentImage.src = numberslide[index];
//alert(currentImage[0].height);
//alert(currentImage[0].width);
//Get the left and right arrows
var portfolioArrows = document.getElementById("portfolioArrows");
var arrowLinks = portfolioArrows.getElementsByTagName("a");
arrowLinks[0].onclick = changePhotograph;
arrowLinks[1].onclick = changePhotograph;
}
function changePhotograph(){
var imageContainer = document.getElementById("imageContainer");
var currentImageList = imageContainer.getElementsByTagName("img");
var currentImage = currentImageList[0].src;
//alert(typeof(currentImage));
var positionOfLastperiod = currentImage.lastIndexOf(".");
//alert(positionOfLastperiod);
var positionOfLastForwardSlash = currentImage.lastIndexOf("/");
//alert(positionOfLastForwardSlash);
var mySubString = currentImage.substring(positionOfLastForwardSlash + 1,positionOfLastperiod );
alert(mySubString);
alert(typeof(mySubString));
alert(parseInt(mySubString));
return false;
}
2) I was actually hoping to be able to click on the arrow and go forward or backward in the photo gallery- to work through the array on each click BUT I can't figure out how to maintain the array index between clicks as a global variable. I've tried using a static code I found but I can't get that to work either. Does anyone have any suggestions?
I know there are tons of photo galleries out there but I'm trying to learn javascript by creating my own.
Here's the html.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfolio New</title>
<script type="text/javascript" src="portfolioNew.js"></script>
<link href="portfolioNew.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="imageContainer">
<div id="photoFrame" >
hello </div>
<p><img src="images/portfolio/Clients/photo10.jpg" alt="test image" /></p>
</div>
<ul id="portfolioArrows">
<li><a href="" title="1"><img src="images/portfolio/left_arrow.jpg" alt="Move gallery left" /></a></li>
<li><a href="" title="-1")><img src="images/portfolio/right_arrow.jpg" alt="Move gallery right" /></a></li>
</ul>
</body>
</html>
See it here.
http://rebeccarachael.com/portfolioNew.html
Javascript (problem is in the function changePhotograph() ):
window.onload = slideshowinit;
var numberslide=new Array();
//Sets up the array to create the links to images
numberslide[0]=["images/content/Clients/photo1.jpg"]
numberslide[1]=["images/content/Clients/photo2.jpg", ""]
numberslide[2]=["images/content/Clients/photo3.jpg", ""]
function slideshowinit() {
var counter = numberslide.length;
index=0;
//Get the width of the current picture
var imageContainer = document.getElementById("imageContainer");
var currentImage = imageContainer.getElementsByTagName("img");
//alert(currentImage[index].src);
//currentImage.src = numberslide[index];
//alert(currentImage[0].height);
//alert(currentImage[0].width);
//Get the left and right arrows
var portfolioArrows = document.getElementById("portfolioArrows");
var arrowLinks = portfolioArrows.getElementsByTagName("a");
arrowLinks[0].onclick = changePhotograph;
arrowLinks[1].onclick = changePhotograph;
}
function changePhotograph(){
var imageContainer = document.getElementById("imageContainer");
var currentImageList = imageContainer.getElementsByTagName("img");
var currentImage = currentImageList[0].src;
//alert(typeof(currentImage));
var positionOfLastperiod = currentImage.lastIndexOf(".");
//alert(positionOfLastperiod);
var positionOfLastForwardSlash = currentImage.lastIndexOf("/");
//alert(positionOfLastForwardSlash);
var mySubString = currentImage.substring(positionOfLastForwardSlash + 1,positionOfLastperiod );
alert(mySubString);
alert(typeof(mySubString));
alert(parseInt(mySubString));
return false;
}