jquery colorbox and custom scrollbar

1 Views

I would like to use a custom scrollbar with Colorbox

I am using WordPress so Colorbox is loaded using this plugin. All the custom scrollbar files have been loaded as per the instructions. I’m guessing that I need to apply to the #cboxLoadedContent div so I’ve loaded as per this code, however it’s not working:

Read More
(function(jQuery){
    jQuery(window).load(function(){
        jQuery("#cboxLoadedContent").mCustomScrollbar();
    });
})(jQuery);

Using Firebug there’s no alteration to the standard coding i.e. the JavaScript isn’t firing. However if I add to the div #cboxContent the JavaScript fires and a class mCustomScrollbar _mCS_1 is added to the #cboxContent div. But this doesn’t have a scrollbar so nothing is shown.

The question is why isn’t it working on the right div i.e. #cboxLoadedContent?

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. #cboxLoadedContent is appended and removed dynamically each time a colorbox is opened or closed. Both plugins need to alter the markup and add their own wrappers, so simply calling mCustomScrollbar on either #cboxContent or #cboxLoadedContent won’t work (mCustomScrollbar must wrap #cboxLoadedContent within .mCSB_container after #cboxLoadedContent is appended).

    The best way is to call mCustomScrollbar function inside colorbox’s onComplete callback. This way the scrollbar is added when colorbox has done its work which is append #cboxLoadedContent and load the actual content.

    From colorbox examples: 

    $(".callbacks").colorbox({
    onComplete:function(){
        $("#cboxContent").mCustomScrollbar();
    }
});

  2. Just a quick note about the code in the accepted answer. I couldn’t get it to work with $(“#cboxContent”) as shown; I needed to use $(‘#cboxLoadedContent’).

    $(".callbacks").colorbox({
    onComplete:function(){
        $("#cboxLoadedContent").mCustomScrollbar();
    }
});