I have shadowbox initialized at document ready in my footer (wordpress website) but when window is smaller than 480px, i would like that shadowbox shows only 5 photo links as counts instead of 10. I added a script for window size case but it does not work for this, there are still 10 counts after resizing my browser screen :
Shadowbox.init({
animate: true,
animateFade: true,
animSequence: "wh",
modal: false,
showOverlay: true,
overlayColor: "#000",
overlayOpacity: "1",
flashBgColor: "#000000",
autoplayMovies: false,
showMovieControls: true,
slideshowDelay: 0,
resizeDuration: "0.35",
fadeDuration: "0.35",
displayNav: true,
continuous: true,
displayCounter: true,
counterType: "skip",
counterLimit: "10",
viewportPadding: "20",
handleOversize: "resize",
handleUnsupported: "link",
autoDimensions: true,
initialHeight: "5",
initialWidth: "320",
enableKeys: true,
skipSetup: false,
useSizzle: false,
flashParams: {bgcolor:"#000000", allowFullScreen:true},
flashVars: {},
flashVersion: "9.0.0",
});
if(jQuery(window).width() <= 480){
Shadowbox.init({
counterLimit: "5"
});
}
I would appreciate your help !
Shadowbox.init function should be called only once, but you can try something like:
var shadowbox_options = {
// init default options
}
if( jQuery(window).width() <= 480 ) {
shadowbox_options.counterLimit = 5;
}
Shadowbox.init( shadowbox_options );
Or, if you don't like that approach, check here the solution with Shadowbox.setup();
method.