Grow your CSS skills. Land your dream job.

Multiple RoyalSliders on one page?

  • # April 3, 2013 at 7:06 am

    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);

    }

    });

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".