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!
Donate
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
andmarkup
. 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)} };