How can I get Colorbox to appear in a div?

Question

At the moment I've got Colorbox setup so that it starts automatically when the page loads, but I need to place it in a div on the page, instead of hovering in the center of the page. How can I do this? Thanks for reading.

Answer 1

I think Colorbox is the wrong tool for what you want. The functionality you want is more like an image gallery. Some ones you might like: Galleriffic or Galleria

Answer 2

You can do insert this javascript snippet into your javascript on document complete, where you bind colorbox.

$(document).bind('cbox_complete', function(){
        var divContent = $('#cboxLoadedContent').html(); // Grab the content of cboxLoadedContent div
        $('#colorbox').hide(); // Hide colorbox div
        $('#cboxOverlay').hide(); // Hide the overlay div
        $('#Output').html(divContent); // put the content inside the specified div.
});

What this does is that after the image/page is successfully loaded into colorbox, it will immediately grab that content, hide the colorbox and overlay, and dump that content into the new div.

Yes, you will see opening and closing of colorbox flashing on your screen really quick, but this will do it. If you want more controls, then you customize these events: onOpen or onLoad. See link at bottom of my post to go to colorbox website for more details.

Beside cboxLoadedContent, you can also use #cboxWrapper, or #colorbox divs, depending on how much colorbox information you want to embed in your div.

Please note that by doing this, you will have to rebind the buttons, if you want it to allow navigation inside the div.

You can go to Colorbox Site for more customization options.