jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('.gal_content').css('display', 'block');
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs_0_1').galleriffic({
delay: 3500,
numThumbs: 9,
preloadAhead: 9,
enableTopPager: false,
enableBottomPager: false,
imageContainerSel: '#slideshow_0_1',
controlsContainerSel: '#controls_0_1',
captionContainerSel: '#caption_0_1',
loadingContainerSel: '#loading_0_1',
renderSSControls: true,
renderNavControls: false,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
enableHistory: 1,
autoStart: 0,
enableKeyboardNavigation: true,
syncTransitions: false,
defaultTransitionDuration: 300,
onTransitionOut: function(slide, caption, isSync, callback) {
slide.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0, callback);
caption.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0);
},
onTransitionIn: function(slide, caption, isSync) {
var duration = this.getDefaultTransitionDuration(isSync);
slide.fadeTo(duration, 1.0);
// Position the caption at the bottom of the image and set its opacity
var slideImage = slide.find('img');
caption.fadeTo(duration, 1.0);
},
onPageTransitionOut: function(callback) {
//this.hide();
setTimeout(callback, 100); // wait a bit
},
onPageTransitionIn: function() {
var prevPageLink = this.find('a.prev').css({'opacity': '0.3' , 'display' : 'inline-block', 'cursor' : 'default'});
var nextPageLink = this.find('a.next').css({'opacity': '0.3' , 'display' : 'inline-block', 'cursor' : 'default'});
// Show appropriate next / prev page links
if (this.displayedPage > 0)
prevPageLink.css({'opacity' : '1' , 'display' : 'inline-block', 'cursor' : 'pointer'});
var lastPage = this.getNumPages() - 1;
if (this.displayedPage < lastPage)
nextPageLink.css({'opacity' : '1' , 'display' : 'inline-block', 'cursor' : 'pointer'});
this.fadeTo('fast', 1.0);
}
});
/**** Functions to support integration of galleriffic with the jquery.history plugin ****/
// PageLoad function
// This function is called when:
// 1. after calling $.historyInit();
// 2. after calling $.historyLoad();
// 3. after pushing Go Back button of a browser
function pageload(hash) {
// alert('pageload: ' + hash);
// hash doesn't contain the first # character.
if(hash) {
$.galleriffic.gotoImage(hash);
} else {
gallery.gotoIndex(0);
}
}
// Initialize history plugin.
// The callback is called at once by present location.hash.
$.historyInit(pageload, 'advanced.html');
// set onlick event for buttons using the jQuery 1.3 live method
$('a[rel=history]').live('click', function(e) {
if (e.button != 0) return true;
var hash = this.href;
hash = hash.replace(/^.*#/, '');
// moves to a new page.
// pageload is called at once.
$.historyLoad(hash);
return false;
});
/****************************************************************************************/
/**************** Event handlers for custom next / prev page links **********************/
gallery.find('a.prev').click(function(e) {
gallery.previousPage();
e.preventDefault();
});
gallery.find('a.next').click(function(e) {
gallery.nextPage();
e.preventDefault();
});
});