PreCoder
02-25-2008, 07:48 AM
Hi all,
Thanks for looking. I have what I believe is only a minor problem, but I don't fully understand Javascript so its a touch difficult for me. Those who understand Javascript please read on....please :)
Okay all I want to do is have what I believe is a simple javascript photo gallery. I don't want all the bells and whistles of fade effects and all the rest like the tutorials I find on the net.
I want there to be a 'next' and 'back' text beside the photo that will change the current image with the next one (e.g. image_0.gif with image_1.gif) and so on. I want there to be a total photo count at the bottom that changes (e.g. 1 of 10, 2 of 10 etc.) And that is all, nothing else. If you have a look at the photo attached you can see what the final result will hopefully look like. I have this already done in HTML.
http://i25.tinypic.com/9gimhi.gif
I found the following tutorial on 'A List Apart' great site, has a very nice little gallery that degrades gracefully, plus it is simple. So here is the code for it below, if I could get someone to change this for me I would be ever, ever so great full ;)
<!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=iso-8859-1" />
<script type="text/javascript" language="javascript">
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}
</script>
<title>WIP</title>
</head>
<body>
<p id="desc">Choose an image to begin</p>
<ul>
<li><a onclick="return showPic(this)" href="images/ACMI.jpg" title="ACMI Picture number 1">That first picture</a></li>
<li><a onclick="return showPic(this)" href="images/ACMI_1.jpg" title="ACMI Picture number 2">Than comes the second</a></li>
<li><a onclick="return showPic(this)" href="images/ACMI_2.jpg" title="ACMI Picture number 3">Look out here is the third</a></li>
</ul>
<img id="placeholder" src="images/ACMI.jpg" alt="" />
</body>
</html>
If you want to have the sources files here they are:
Download files here (http://www.twosocks.com.au/temp/wip.rar)
Hope this helps. Thanks in advance!
Thanks for looking. I have what I believe is only a minor problem, but I don't fully understand Javascript so its a touch difficult for me. Those who understand Javascript please read on....please :)
Okay all I want to do is have what I believe is a simple javascript photo gallery. I don't want all the bells and whistles of fade effects and all the rest like the tutorials I find on the net.
I want there to be a 'next' and 'back' text beside the photo that will change the current image with the next one (e.g. image_0.gif with image_1.gif) and so on. I want there to be a total photo count at the bottom that changes (e.g. 1 of 10, 2 of 10 etc.) And that is all, nothing else. If you have a look at the photo attached you can see what the final result will hopefully look like. I have this already done in HTML.
http://i25.tinypic.com/9gimhi.gif
I found the following tutorial on 'A List Apart' great site, has a very nice little gallery that degrades gracefully, plus it is simple. So here is the code for it below, if I could get someone to change this for me I would be ever, ever so great full ;)
<!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=iso-8859-1" />
<script type="text/javascript" language="javascript">
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}
</script>
<title>WIP</title>
</head>
<body>
<p id="desc">Choose an image to begin</p>
<ul>
<li><a onclick="return showPic(this)" href="images/ACMI.jpg" title="ACMI Picture number 1">That first picture</a></li>
<li><a onclick="return showPic(this)" href="images/ACMI_1.jpg" title="ACMI Picture number 2">Than comes the second</a></li>
<li><a onclick="return showPic(this)" href="images/ACMI_2.jpg" title="ACMI Picture number 3">Look out here is the third</a></li>
</ul>
<img id="placeholder" src="images/ACMI.jpg" alt="" />
</body>
</html>
If you want to have the sources files here they are:
Download files here (http://www.twosocks.com.au/temp/wip.rar)
Hope this helps. Thanks in advance!