Question

Is it possible to have colorbox and its animations in an expanding div rather than a new modal window? Not sure colorbox is the correct way to do this.

I want to ajax load external html into a div but keep the close, animation and loading functions colorbox has.

Any thoughts would be much appreciated.

Answer 1

Certainly! colorbox simply looks at the href attrbibute of the <a> tag that you’re applying colorbox to. It doesn’t matter whether that tag links to an image or an html file, it will load the content into a fancy colorbox frame.

For example, in your main page content:

<a id="colorboxMe" href="yourPage.html">Click to see yourPage</a>

And in your javascript:

$('#colorboxMe').colorbox();

Clicking the link should load the contents of yourPage.html into an expanding div.

EDIT: Oh, I didn’t understand your question. I guess if you don’t want the overlay and the centered frame, you could change it with some css. Add this to the CSS of your main page:

#cboxOverlay {
    display: none;
}
#colorbox {
    position: relative;
    display: inline;
    left: 0px;
    top: 0px;
}

EDIT EDIT: This probably won’t work because the script will override these css declaration. I don’t know what the solution is.