Has anyone had any experience in using RoyalSlider within Colorboxs?
http://oandg.co.uk.s156312.gridserver.com/#work – At the moment if you hover over a thumbnail and click “Load” on the first thumbnail the slider works (albeit loading weird) but does not work on the the other thumbnails.
This the code I am using:
jQuery(document).ready(function($) {
// Please note that if you use mutliple sliders, you need to call RoyalSlider destroy() method when box
// closes to destroy it’s data.
// Also if autoPlay is used, you need to pause slider on close
var win = $(window),
w,
cContent = $(‘#cboxLoadedContent’),
currRs;
$(‘#colorbox-items’).on(‘click’, ‘.colorboxSlider’, function(e) {
e.preventDefault();
$.colorbox({
preloading: true,
modal: true,
transition: ‘none’,
speed: 0,
onComplete: function(e) {
var options = {
imageScaleMode: ‘fill’,
keyboardNavEnabled: true,
autoScaleSlider: true,
globalCaption:true,
controlNavigation: ‘none’,
video: {
autoHideControlNav: true
}
};
currRs = $(‘#cboxLoadedContent’).find(‘.royalSlider’).royalSlider(options).data(‘royalSlider’);
updateLightboxSize();
},
href:$(this).attr(‘href’)
});
return false;
});
win.resize( function() {
updateLightboxSize();
});
// dynamic lightbox resizing
function updateLightboxSize() {
// define sze of lightbox
w = win.width();
if(w > 1200) {
w = ‘960px’;
} else if(w < 800) {
w = ‘90%’;
} else {
w = ‘60%’;
}
$.colorbox.resize({
width: w
});
if(currRs) {
currRs.updateSliderSize();
}
// fix scrolbar space
setTimeout(function() {
$.colorbox.resize({
width: w
});
},1);
}
});
