Image Effects : Next-Previous Image Gallery

Sleuth Solomon May 31, 2006

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

The JavaScript Source: Image Effects : Next-Previous Image Gallery

Simply click inside the window below, use your cursor to highlight the script, and copy [Control]+C the script into a new file in your text editor (such as Note Pad) and save [Control+S]. The script is yours!!!

/* This script and many more are available free online at
The JavaScript Source :: http://www.javascriptsource.com
Created by: Solomon, the Sleuth :: http://www.freewebs.com/thesleuth/scripts/ */

// List image names without extension
var myImg= new Array(3)
  myImg[0]= "pix1";
  myImg[1]= "pix2";
  myImg[2]= "pix3";
  myImg[3]= "pix4";

// Tell browser where to find the image
myImgSrc = "/img";

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

<div style="width:400px; height:300px; margin: auto;">
<img name="imgSrc" id="imgSrc">
</div>

<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>
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Image Effects : Next-Previous Image Gallery

Leave a Response

Attention JavaScript Coders

Whitepapers and More