Hi everyone,
I think this is probably an easy thing to fix, I'm just a bit lost at
the moment.
I have a photo gallery up and running that uses the Galleriffic plugin
alongside the jCarousel plugin, and I am currently trying to get the
carousel to scroll along with the displayed image.
I know that this involves using the jCarousel callback, however the
value I need to use in that callback is set inside of the Galleriffic
function, and I'm not really sure how to make them talk to one
another.
Here is my JS:
$(document).ready(function() {
// Initialize Advanced Galleriffic Gallery
var galleryAdv =
$('#gallery-adv').galleriffic('#thumbs-adv', {
delay: 2000,
numThumbs: 26,
preloadAhead: 10,
enableTopPager: false,
enableBottomPager: false,
imageContainerSel: '#slideshow-adv',
controlsContainerSel: '#controls-adv',
captionContainerSel: '#caption-adv',
loadingContainerSel: '#loading-adv',
renderSSControls: false,
renderNavControls: false,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous
Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: true,
autoStart: false,
onChange: function(prevIndex,
nextIndex) {
$('#thumbs-adv ul.thumbs').children()
.eq(prevIndex).fadeTo('fast',
onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast',
1.0);
var idx = nextIndex + 1;
console.log(idx);
},
onTransitionOut: function(callback) {
$('#slideshow-adv,
#caption-adv').fadeOut('fast', callback);
},
onTransitionIn: function() {
$('#slideshow-adv,
#caption-adv').fadeIn('fast');
},
onPageTransitionOut: function(callback) {
$('#thumbs-adv
ul.thumbs').fadeOut('fast', callback);
},
onPageTransitionIn: function() {
$('#thumbs-adv
ul.thumbs').fadeIn('fast');
}
});
// Initialize Minimal Galleriffic Gallery
var galleryMin =
$('#gallery-min').galleriffic('#thumbs-min', {
imageContainerSel: '#slideshow-min',
controlsContainerSel: '#controls-min'
});
$('#mycarousel').jcarousel({
scroll: 7,
initCallback: initCallbackFunction
});
function initCallbackFunction(carousel) {
carousel.scroll(idx);
return false;
};
});
