[[imageshiftgallery]]
 
Trace: » imageshiftgallery
Table of Contents

ImageShiftGallery

About

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

ChangeLog

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.

Gallery

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.

Download

Get the latest version from github 

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

Usage

  • 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.txt · Last modified: 2011/09/13 15:14 (external edit)
 
 
©2008 BuzaMoto industries.