JSGallery example page

There is a newer version which works with MooTools 1.2!

This an example for the JSGallery script. It is designed to create a nice image gallery which will work in (almost) every browser. It uses the mootools framework and is totally free to use. Nevertheless, a backlink to my blog (or a donation maybe?) would be very nice :-)
This script was made by A+media and can be downloaded on eSteak.net

You need a particular HTML structure to get this to work (or flickr or xml). First, you need a container where your pages are located in. You can then put thumbnail images into this page, each surrounded by a div. This additional container will later contain the dynamic border. If you like to have more pages, just create more page containers and so on.
The most important thing, is the relation to the big image. So make sure, that each thumbnail is linked to somewhere and this link has a rel attribute. You just have to put the big image url in there.

You may also provide two links to navigate through the pages. They will automatically be hidden. You can also provide a loading image optionally. It will be shown for each thumbnail while the big version of the image is preloaded. It also disappears automatically when preloading is done.

Additionally, you can provide a no-script version very easily. Just a bit of coding in the dynamic language you like :-)

On top of these features, you have the possibility to change the default behaviour by overwriting several class options

Here are all the featuers:

Here is the JS call for the example gallery: (the last 2 images are added dynamically)

myGallery = new JSGallery(	$$('.thumbnail'), 	//these are the thumbnail elements
				$('bigImage'), 		//the big image
				$('pageContainer'),	//container which contains the pages
				{'prevHandle': $('prev'),	//previous page link 
				 'nextHandle': $('next'), 	//next page link
				 'loadingImage': 'loading.gif'	//loading image for thumbnails

You see, you only need very few parameters to get this to work. Optionally, you can change many things with some options:

option:			default value,		description

borderWidthDeselected: 	2,	//the width of the border of an deselected image 
				(should be the same as in css)
borderWidthSelected: 	7,	//border width of the selected image
borderColor: 		'#fff',	//the color of the borders
loadingMask: 		'#000',	//color of the mask overlay during loading of the big images
loadingOpacity: 	0.6,	//opacity of the border div during loading (including the mask)
loadingImage: 		null,	//you may specify a loading image which is displayed while 
				the big images are being loaded
selectSpeed: 		200,	//the duration of the select effect in ms 
				(high values will make it look ugly)
fadeSpeed: 		250,	//the duration of the image fading effect in ms
pageSpeed: 		1000,	//the duration of the change page effect in ms
prevHandle: 		null,	//if you pass a previous page handle in here, it will be 
				hidden if it's not needed
nextHandle: 		null,	//like above, but for next page
initialIndex: 		-1,	//which thumb to select after init. 
				you could create deep links with it.
maxOpacity: 		0.8	//maximum opacity before cursor reaches prev/next control, 
				then it will be set to 1 instantly.

If you want to add images dynamically, you just need to include the JSGallery_dynamic.js and call:

myGallery.addImage('images/thumb_20.jpg', 'images/big_20.jpg', '?image=images/big_20.jpg');

You can also find this script on eSteak.net, but remember that you also need the JSGallery class if you download it as standalone!

If you like to create a JSGallery from flickr images, check out my JSGallery_flickr extension for JSGallery and if you like to have an easy-to-use SimpleViewer fallback, check out my JSGallery_simpleviewer extension which parses the same xml file!

Download on eSteak.net