Javascript Image Gallery & Slideshow

xImgGallery

This script implements a Javascript image gallery and slideshow - all in one file. Unlike version 1, this script (version 2) does not reload the page, just the images - and it has an auto-slide feature. It now supports captions.

This is a self-contained demo - it does not use a Javascript library. Eventually I'll make an object out of this and include it in the X library.

All images are Copyright (C) GoneCoastal, and used with their kind permission.

xImgGallery is distributed under the terms of the GNU LGPL.

Demo

HTML For The Demo

<div id='gallery'>
  <div>
    <div class='gcon'><img id='g1'><div class='gcap' id='gc1'>&nbsp;</div></div>
    <div class='gcon'><img id='g2'><div class='gcap' id='gc2'>&nbsp;</div></div>
    <div class='gcon'><img id='g3'><div class='gcap' id='gc3'>&nbsp;</div></div>
    <div class='clearAll'>&nbsp;</div>
  </div>
  <div>
    <div class='gcon'><img id='g4'><div class='gcap' id='gc4'>&nbsp;</div></div>
    <div class='gcon'><img id='g5'><div class='gcap' id='gc5'>&nbsp;</div></div>
    <div class='gcon'><img id='g6'><div class='gcap' id='gc6'>&nbsp;</div></div>
    <div class='clearAll'>&nbsp;</div>
  </div>
</div>
<div id='slideshow'>
  <div class='scon'><img id='s1'><div class='scap' id='sc1'>&nbsp;</div></div>
</div>
<div id='navigation'>
  <span id='prev'>&#171; Previous</span>
  <span id='next'>Next &#187;</span>
  <p><span id='back'>Back to the Gallery</span></p>
  <p><span id='auto' title='Toggle Auto-Slide'>Auto-Slide</span> <span id='time'>&nbsp;</span></p>
</div>

Development Notes and Script Assumptions

Optional URL arguments: g = 'gallery first num', s = 'slideshow img num'. For example:
img_gallery_2.php?g=21
img_gallery_2.php?s=30
IMG IDs begin with 'g' (for gallery) or 's' (for slideshow) then are numbered sequentially beginning with 1. No leading zeros.
Gallery (thumbnail) image pathnames: gPath + gPrefix + seq_num + gSuffix + gExt
SlideShow (large image) pathnames: sPath + sPrefix + seq_num + sSuffix + sExt
Leading zeros (as part of seq_num) are optional.
The captions array initializations could be generated server-side.
This file does not have to be a PHP file - I use it here for my page-template, not for this demo.

Other Gallery/SlideShow Toys

CliffHanger9's original demo of my first version.

Vic's Batch Slide Show.

Google this topic.

Suggest another link to put here.

Revisions

v2.5, 29Apr05: Added support for captions.

v2.4, 25Apr05: A few little updates. I'll try to add support for captions soon.

v2.3, 1Apr05: More improvements. A list of features is in the works.

v2.2, 1Apr05: A few more improvements. (1) Doesn't display img elements when n > imgsMax. (2) Next and Prev now wrap around and are always visible.

v2.1, 1Apr05: Michael Finch made a good suggestion and I've implemented it. The image files can now be named only with a sequential number (plus the extension) and you can specify different directories for gallery imgs and slideshow imgs. There is still alot I need to do to this but it is really turning out nice thanks to your feedback :-)

Cross-Browser.com