Zoombox

Another jquery lightbox

1 - Include JS Files

Zoombox uses 2 different Javascript scripts that you will have to import in this exact same order (in <head> or just before </body>)

                <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
                <script type="text/javascript" src="/zoombox/zoombox.js"></script>

2 - Link the CSS file to your page in the <head>

        <link href="/zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />

3 -Fire plugin using jQuery Selector

For instance if you want to bind zoombox behaviour on every link with the "zoombox class" : 

        <script type="text/javascript">
        jQuery(function($){
            $('a.zoombox').zoombox();

            /**
            * Or You can also use specific options
            $('a.zoombox').zoombox({
                theme       : 'zoombox',        //available themes : zoombox,lightbox, prettyphoto, darkprettyphoto, simple
                opacity     : 0.8,              // Black overlay opacity
                duration    : 800,              // Animation duration
                animation   : true,             // Do we have to animate the box ?
                width       : 600,              // Default width
                height      : 400,              // Default height
                gallery     : true,             // Allow gallery thumb view
                autoplay : false                // Autoplay for video
            });
            */
        });
        </script>

If you want more info about available options go to the API & Options

4- One more thing

Every links hooked by the jquery selector will open a nice zoombox to display its content.

        /* Classic link */
        <a href="http://grafikart.fr" class="zoombox">This is my site !</a>

        /* You can group links into 'galleries' with the keyword zgallery{galleryname} */
        <a href="Firstlink" class="zoombox zgallery1">Link</a>
        <a href="SecondLink" class="zoombox zgallery1">Link</a>
        <a href="ThirdLink" class="zoombox zgallery1">Link</a>
        <a href="Fourthlink" class="zoombox zgallery1">Link</a>

        /* You can also specify a with and a height */
        <a href="VideoLink" class="zoombox w500 h400"/>
Fork me on GitHub