Full version: jsB@nk » Image » Slideshow » Next-Previous Image Gallery
URL: https://www.javascriptbank.com/next-previous-image-gallery.html
A very simple image gallery. The script is short and includes comments to guide you along the way.
Full version: jsB@nk » Image » Slideshow » Next-Previous Image Gallery
URL: https://www.javascriptbank.com/next-previous-image-gallery.html
<script language="javascript">// Created by: Solomon, the Sleuth :: http://www.freewebs.com/thesleuth/scripts/// List image names without extensionvar myImg= new Array(3) myImg[0]= "photo1"; myImg[1]= "photo2"; myImg[2]= "photo3"; myImg[3]= "photo4"; myImg[4]= "photo5"; myImg[5]= "photo6"; myImg[6]= "photo7";// Tell browser where to find the imagemyImgSrc = "";// Tell browser the type of filemyImgEnd = ".jpg"var i = 0;// Create function to load imagefunction loadImg(){ document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;}// Create link function to switch image backwardfunction 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 forwardfunction next(){ if(i>2){ var l = i } else { var l = i+=1; } document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;}// Load function after page loadswindow.onload=loadImg;</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div style="width:400px; height:300px; margin: auto;"><img name="imgSrc" id="imgSrc"></div><!-- Controller --><table width="400" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #000000; width:400px; margin: auto;"> <tr> <td align="center"><a href="#" onClick="prev();"> «</a></td> <td align="center"><a href="#" onClick="next();"> » </a></td> </tr></table><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->