How do I make a div with html layout open in Shadowbox?

I'd like to open a div with html content in with shadow box. Does anyone know if this is possible with the plugin as I can't see it anywhere on their site? http://www.shadowbox-js.com/

Thanks for your help

Judi

Solution

I think this will get what you need.

An example where the lightbox will copy the elements in #cont when you click on a

        <div id="cont" style="display:none">
            <h1>Header</h1>
            <b>Test test</b>
            <i>Test test</i>
        </div>

        <a href="#">Open</a>

And the script

        Shadowbox.init({
            skipSetup: true
        });

        $('a').click(function() {
            var content = $('#cont').html();
            Shadowbox.open({
                content: content,
                player: 'html',
                displayNav:false,
                height: 350,
                width: 350
            });
        });

The box may display a black background so you have to change that into another color.

Please note that shadowbox.js is a player lightbox designed for playing videos. You may consider using something else for html content. The lightbox must contain a player otherwise it won't start.