Search code examples
jquerylightboxcolorbox

How to use the lightbox plugin colorbox?

I want to show the contents of a hidden div in a light box when the page loads.

How can I do this with color box?

What I'm not understanding:

Do I need to use their CSS files? Which ones, where is it?

How do I make the lightbox come up when the page loads?

I tried this but no luck:

$(document).ready(function(){
    $("#div_id_i_want_to_show").colorbox({width:"50%", inline:true});
});
Solution

  • jyoseph's answer was on the right track. I also had to make the div visible before it would show up (otherwise it just shows a black screen). and then I had to hide the div after the user closes the light box.

    Note: I also had to edit the css file to point to the directory where I put my images.

    Here's my final code:

    $(document).ready(function(){
    $('#div_id_i_want_to_show').show();
    $.colorbox({'href':'#div_id_i_want_to_show', 'inline':true, 'width':'600px', 'height':'600px'});
    $(document).bind('cbox_closed', function(){
            $('#div_id_i_want_to_show').hide();
    });
});