Next and previous buttons on Gallery! Please Help!
Hi, I am new and was just wondering if somebody could help me with my code, I know the JavaScript basics, I need the simplest way to make my next and previous buttons navigate between images, and it has to be using JavaScript not JQuery. The slide functions shown below are small buttons on the bottom of my gallery they work and navigate through the images............. This is my JavaScript and HTML code:
<script type="text/javascript">
<!--
function slide1()
{
document.images.slide.src="Images/slide/slide1.jpg";
}
function slide2()
{
document.images.slide.src="Images/slide/slide2.jpg";
}
function slide3()
{
document.images.slide.src="Images/slide/slide3.jpg";
}
function slide4()
{
document.images.slide.src="Images/slide/slide4.png";
}
function slide5()
{
document.images.slide.src="Images/slide/slide5.jpg";
}
function slide6()
{
document.images.slide.src="Images/slide/slide6.jpg";
}
//-->
</script>
<img src="Images/slide/previous.png" name="previous" height:"460" width:"44" a href="JavaScriptreviousImage()" id="previous"/>
<img src="Images/slide/next.png" name="next" height:"460" width:"44" a href="JavaScript:nextImage()" id="next"/>
<!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" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
<!--
var ary=[
'http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg',
'http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg',
'http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg',
'http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg',
'http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg',
'http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg'
];
function Slide(id,ary,nu){
document.getElementById(id).src=ary[nu];
Slide[id]={nu:nu}; // create a function Slide[id] object with a property of nu recording the current image number
}
function nextImage(id,ary,ud){
var nu=(Slide[id]&&Slide[id].nu?Slide[id].nu:0)+ud; // if the function Slide[id] object exists use that or use 0 and add ud
Slide(id,ary,Math.min(Math.max(nu,0),ary.length-1));
}
//-->
</script>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" name="previous" height="46" width="46" onmouseup="nextImage('slideshow',ary,-1);" id="previous"/>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" name="next" height="46" width="46" onmouseup="nextImage('slideshow',ary,1)" id="next"/>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" name="slide" width="700" height="460" id="slideshow"/>
<a class="slide1" onclick="javascript:Slide('slideshow',ary,0);">1 </a>
<a class="slide2" onclick="javascript:Slide('slideshow',ary,1);">2 </a>
<a class="slide3" onclick="javascript:Slide('slideshow',ary,2);">3 </a>
<a class="slide4" onclick="javascript:Slide('slideshow',ary,3);">4 </a>
<a class="slide5" onclick="javascript:Slide('slideshow',ary,4);">5 </a>
<a class="slide6" onclick="javascript:Slide('slideshow',ary,5);">6 </a>
</body>
</html>
Next and previous buttons on Gallery! Please Help!
reviousImage()" id="previous"/>
Reply With Quote
Bookmarks