Hide large image

[djave-co]

Hiya,

Great plugin. Is there a way to hide the larger image as it loads? Most of the stuff I'm trying leads to either the large being invisible when I try anything like 'display:none;', or loading next to the image (being high res it take a couple of seconds) and knocking off my page layout for a second.

Any ideas? Thanks

D

[Mottie]

Hi @djave-co!

Sorry for taking so long to respond.

This code repositions & hides the image using visibility:hidden so the plugin can still get the correct image dimensions during initialization. Here is a demo.

CSS

.hidden {
    visibility: hidden;
    position: absolute;
    top: -9999em;
    left: -9999em;
}

JS

$(function(){
    $("#zoom2")
        .find('.large').addClass('hidden').end()
        .on('initialized', function(){
            $('#zoom2 .large').removeClass('hidden');
        })
        .anythingZoomer();
});