imageshiftgallery

ImageShiftGallery is a simple JavaScript-based image gallery. Easily integrate a nice, dynamic image gallery to your web page.

Version	Description
1.3	added ongalleryload callback. added autoscroll.
1.2.3	enabled 'this' object for event handlers.
1.2.2	improved image dimension calculation.
1.2.1	added onmouseover and onmouseout behaviors.
1.2	added onclick behavior for images.
	changed from templates to procedurally creating gallery elements.
	fixed to support IE6.
1.1.1	fixed for IE7.
	Safari image loading fix (able to apply width/height) to images.
	added support to add padding on the right of the image.
1.1	enabled HTML content.
1.0.2	initial support for IE7.
1.0.1	fixed image loader for firefox.

Here are some sites that use the ImageShiftGallery. If you see other sites using it, please add them to the list!

Please consider sending donations if you use the ImageShiftGallery commercially, or you find it useful.

Get the latest version from github

git clone git://github.com/mud/imageshiftgallery.git

First, in <head>, you need to link the necessary CSS and JavaScript files:

<link rel="stylesheet" href="stylesheets/main.css" type="text/css" media="screen" />
<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/BM_ImageShiftGallery.js"></script>

You need to construct an array of elements which you like to include in the gallery:

var galleryElements = [];

Populate the array with images or arbitrary HTML content. Each element will be a hash consisting of a few parameters. To add an image, we specify the following values to the hash:

key	type	description	required?
`src`	`string`	url of the image	Yes
`width`	`number`	width of image in pixels	No
`height`	`number`	height of image in pixels	No
`padding`	`number`	padding on the right side in pixels	No
`title`	`string`	title for the image	No
`caption`	`string`	caption for the image	No

galleryElements[0] = {
  src:      "images/400x300.png",
  width:    400,
  height:   300,
  padding:  20,
  title:    "Image 1",
  caption:  "This is the first image."
};

Similarly, we can create HTML content by specifying the following:

key	type	description	required?
`markup`	`string`	HTML markup	Yes
`width`	`number`	width of content in pixels	Yes
`height`	`number`	height of content in pixels	Yes
`padding`	`number`	padding on the right side in pixels	No
`title`	`string`	title for the image	No
`caption`	`string`	caption for the image	No

galleryElements[1] = {
  markup:   '<div>I am HTML!</div>',
  width:    400,
  height:   300,
  padding:  20,
  title:    "HTML 1",
  caption:  "This is the HTML content."
};

Notice the only difference are src and markup. This is how ImageShiftGallery keeps track of what is what. Also, for HTML content, the width and height parameters are required.

Finally, we can construct the ImageShiftGallery object. We should call this after the page loads. This is easily done by using Prototype's Event.observe().

// Create new gallery.
//      usage: com.buzamoto.ImageShiftGallery.Gallery(id, imageArray, valign, autoscroll, autoscrollDelay);
//              id: The id <div> that frames the gallery.
//      imageArray: array of elements included in the gallery.
//          valign: vertical alignment of images. 'top', 'middle' or 'bottom' (default: 'top')
//      autoscroll: boolean (default: false) specifies whether content scrolls automatically on load
// autoscrollDelay: integer (in milliseconds) specifies duration between auto scrolling
 
var gallery;
Event.observe(window, 'load', function() {
  gallery = new com.buzamoto.ImageShiftGallery.Gallery('gallery', galleryElements, 'top', true, 5000);
});

New in 1.2.1, you can attach onclick, mouseover and mouseout events to each image or html content by supplying the corresponding parameters, _click_, _mouseover_ and _mouseout_ an inline function. So, a simple example would be:

galleryElements[2] = {
  src:   'images/400x300.png',
  width:    400,
  height:   300,
  padding:  20,
  title:    "Image 2",
  caption:  "Another image!",
  click:    function(event) {alert('You clicked an image!'); Event.stop(event)}
};

ImageShiftGallery

About

ChangeLog

Gallery

Donate

Download

Usage