How to use the lightbox plugin colorbox?

Question

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

Answer 1

You do need to use the ColorBox css file from whichever theme you want. There are 5 included in the download. See the folders Example1, Example2, Example3, Example4, Example5. Each one will have a css file and a folder with images. You can also create your own custom theme, if you wish.

In order to open ColorBox on the page load you need to use the public method: $.fn.colorbox()

Working example: http://jsbin.com/uficu

In that example I have html: <div id="content">Hello from JSBin</div>

And the public method: $.fn.colorbox({href:'#content', open:true, inline:true})

Check out the documentation: http://colorpowered.com/colorbox/

Answer 2

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();
    $.fn.colorbox({'href':'#div_id_i_want_to_show', 'open':true, 'inline':true, 'width':'600px', 'height':'600px'});
    $().bind('cbox_closed', function(){
            $('#div_id_i_want_to_show').hide();
    });
});

Answer 3

Any idea of how to open the colorbox just the first time a user opens the page (perhaps with a jQuery cookie plugin)?

Answer 4

Try the open option Olli.

$(".el").colorbox({open:true})