AnythingZoomer playground

Add, remove, adjust any or all options so you can see how it works.

by Mottie

HTML

<link rel="stylesheet" href="http://mottie.github.com/AnythingZoomer/css/anythingzoomer.css">
<script src="http://mottie.github.com/AnythingZoomer/js/jquery.anythingzoomer.js"></script>
<script src="https://raw.github.com/Mottie/imagesLoaded/master/js/jquery.imagesloaded.js"></script>
    <div id="zoom">

        <div class="small">
            <img src="http://mottie.github.com/AnythingZoomer/demo/rushmore_small.jpg" alt="small rushmore">
        </div>

        <div class="large">
            <img src="http://mottie.github.com/AnythingZoomer/demo/rushmore.jpg" alt="big rushmore">
        </div>

    </div>

CSS

/* Image Demo ** NO SIZES SET **
.large img { width: 500px; height: 333px; }
.small img { width: 225px; height: 150px; }
*/

/* Dark overlay */
.az-overlay {
    background-color: #000;
    opacity: 0.3;
    filter: alpha(opacity=30);
    z-index: 10;
}

/* fade out small content when hovering
.az-hovered > * {
    opacity: 0.5;
    filter: alpha(opacity=50);
}
 */


.large { background: #fff; }
.zoom { display: block; margin: 0 auto; }
body { margin: 100px; }

JavaScript

var zoomer = $('#zoom');

// initialize anythingZoomer
$(window).load(function(){
    zoomer.anythingZoomer();
});

// update after all images have loaded
zoomer.find('img').imagesLoaded(function(){
    console.debug('all images loaded');
    zoomer.anythingZoomer();
});