jquerywordpressresponsive-designinitializationshadowbox

How to remove .init and give a new init option for smaller screen case (shadowbox)


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 !


Solution

  • 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.