CODEWITHSUNDEEP
jqueryfunctioncolorbox
herbs
herbs

Reputation: 67

Adding classname to Colorbox dynamically

I've seen questions regarding this issue on here already, but I'm having a different issue trying to get it to work.

With the following code I want to add a classname to the colorbox lightbox once it has opened.

For some reason though the second function (where .addclass is executed) does not work (when I inspect the code in firebug it doesn't even enter that function).

        $(document).ready(function(){
            $(".box1").colorbox(function(){
                $("#colorbox").addClass("box1");
            });
        });

Is it something I'm missing or am I trying to do this incorrectly?

Thanks Ian

Upvotes: 2

Views: 8124

Answers (3)

dcro
dcro

Reputation: 13649

UPDATE:

Newer versions of Colorbox support the new className setting which can be used to add extra class names to colorbox.

Original answer:

You need to specify the onOpen callback for colorbox like this:

   $(document).ready(function(){
       $(".box1").colorbox({onOpen: function(){
           $("#colorbox").addClass("box1");
       }});
   });

There's also an option to listen for the cbox_open event instead of using a callback - see http://jacklmoore.com/colorbox/ for more information.

Upvotes: 10

Oana Hulpoi
Oana Hulpoi

Reputation: 161

This will do the trick, it's a new attribute:

$('.my-box').colorbox({className: 'my-class'});

Upvotes: 3

Chris Dowdeswell
Chris Dowdeswell

Reputation: 868

Try this, as per the EventHook section on ColorBox.

$(document).bind('cbox_complete', function(){
    $("#colorbox").addClass("box1");
});

Upvotes: 3

Related Questions