Search code examples
jquerycolorboxuploading

JQuery Ajax loading external html with loader

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.

Solution

  • 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.