« »

A very simple image gallery. The script is short and includes comments to guide you along the way.

Label: Next-Previous Image Gallery

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<script language="javascript">

// Created by: Solomon, the Sleuth :: http://www.freewebs.com/thesleuth/scripts/

// List image names without extension
var 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 image
myImgSrc = "";

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

</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

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