git clone git://github.com/mud/imageshiftgallery.git
===== Usage =====
* First, in '''', you need to link the necessary CSS and JavaScript files:
* 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: 'I am HTML!',
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 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)}
};