('.several_images').zoom() is being wierdly sticky on the first image

[morgunder]

my use case is to apply zoom to a bunch of thumbnails all at once. and when i do that as in the title, the 2nd + images work perfectly in that as i mouse in and out the image zooms in. however the first image is shoved to absolute position 0,0 and stuck showing the big image.

can you make it so in this case it requires a mouse over to trigger the zoom?

[jjui]

Thinking if you applied .zoom() in a each function will be best, like:

    $('.several_images').each(function(){       
        var src = $(this).find('img').attr('src');
        $(this).zoom({
            url: src,
            touch: false,
            on: 'click',
            duration: 50,
            magnify: 0.75
        });
    });

And to make the whole thing smooth, apply css translate3d() to achieve hardware acceleration like (sass):

.zoom img {
    @include transition(all 0.5s ease-out);
    @include transform(translate3d(0,0,0));
}

Will make a PR for auto hardware acceleration.

Best, /J