jqueryhtmlmarkupshadowbox

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.