åland gallery




download aaland-gallery.js here


include jquery and jquery-hashchange before the gallery plugin:

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="jquery.ba-hashchange.js"></script>
	<script src="aaland-gallery.js"></script<

bind the gallery to an element:


to provide images:

			"data": [{ 
				hash: "pic1",
				thumb: "pic1-thumb.jpg",
				image: "pic1.jpg",
				title: "pic 1",
				info: "pic 1 is great"
				hash: "pic2",
				thumb: "pic2-thumb.jpg",
				image: "pic2.jpg",
				title: "pic 2",
				info: "pic 2 is great"

additional parameters, all optional, omit them if you don't need them.

			// shows basic debug messages in console.log
			"debug": true,

			// container for thumbnails
			"thumbs": "#thumbs",

			// anchor for forward links (does not wrap)
			"forward": "#forward",

			// anchor for backwards links (does not wrap)
			"back": "#back",

			// container for title
			"title": "#title",

			// container for info
			"info": "#info",

			// clicking on the image advances to the next in the gallery, defaults to true
			"click": true,

			// class name for thumbnails, defaults to "thumb"
			"thumb-class": "thumby",

			// class name for the currently-active thumbnail, defaults to "thumb-current"
			"current-class": "thumby-current",

			// class name for placeholder thumbnail, defaults to "thumb-placeholder"
			// the anchor tags which contain placeholders also get a css class:
			// the placeholder-class string with "-container" appended.
			"placeholder-class": "placey",

			"data": [
				// ...

finally, if you need to programmatically go to the previous or next item with javascript. these wrap around to the first/last image once the start/end has been reached.



back   forward