Simple Image Gallery

Jay Rumsey Dec 12, 2007

General

Use this script to display images, one at a time, on your Web page. Very easy to set-up, and includes captions.

The beautiful mountains

« Previous | Next »

Notes

Created by: Jay M. Rumsey, OD
Web Site: http://www.nova.edu/~rumsey

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: simpleImageGallery.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Jay M. Rumsey, OD | http://www.nova.edu/~rumsey */

var num=0;

imgArray = [
  ['pix1-sm.gif','information', 'The beautiful mountains'],
  ['pix2-sm.gif','interference','The crystal clear lake'],
  ['pix3-sm.gif','message','The lonesome, barren tree']
]

function slideshow(slide_num) {
  document.getElementById('mypic').src=imgArray[slide_num][0];
  document.getElementById('mypic').alt=imgArray[slide_num][1];
  document.getElementById('burns').innerHTML=imgArray[slide_num][2];
}

function slideshowUp() {
  num++;
  num = num % imgArray.length;
  slideshow(num);
}

function slideshowBack() {
  num--;
  if (num < 0) {num=imgArray.length-1;}
  num = num % imgArray.length;
  slideshow(num);
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="simpleImageGallery.js"></script>

Body

Paste this code into the BODY section of your HTML document


<div style="text-align: center">
  <!--  Place the first image here  -->
  <img src="pix1-sm.gif" id="mypic" name="mypic" alt="information" border="0" height="150" width="200">
  <br>
  <!--  Place the text for the first image here  -->
  <div id="burns">The beautiful mountains</div>
  <p>
  <a href="#" onclick="slideshowBack(); return false;">« Previous</a> |
  <a href="#" onclick="slideshowUp(); return false;"> Next »</a>
</div>

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