How to use the lightbox plugin colorbox?

jquery lightbox colorbox
Greg picture Greg · Aug 7, 2009 · Viewed 19.7k times · Source

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

Greg picture Greg · Aug 8, 2009

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

Related questions

Colorbox shows under flash

I am using jQuery's colorbox to open up an iframe on a page. On the page there are two flash SWFs. When I click the button that opens the colorbox, those flash SWFs appear over the top of my colorbox …

Read More
TypeError: $(...).on is not a function

I am using jQuery litebox. After adding JS and CSS files I got this error TypeError: $(...).on is not a function at this line in js file "return $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox]', function(e) {" …

Read More
Using JQuery to open a popup window and print

A while back I created a lightbox plugin using jQuery that would load a url specified in a link into a lightbox. The code is really simple: $('.readmore').each(function(i){ $(this).popup(); }); and the link would look like …

Read More