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:
$('#image').gallery();
to provide images:
$('#image').gallery({
"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.
$('#image').gallery({
// 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.
$('#image').data('gallery').next();
$('#image').data('gallery').prev();