sourlemonaid sourlemonaid - 3 months ago 53
CSS Question

combining fancybox with elevatezoom. the zoom is not working

I am trying to set up multiple fancybox galleries WITH thumbnails and elevate zoom. so far i got all the former but can't get the zoom to show up. after searching i found this post http://stackoverflow.com/a/23883542/6774425 which i followed but can't seem to get the zoom effect.

here is my code.

the html images are wrapped like this

<a class="fancybox fancybox-image fancybox-thumbs" rel="gallery1" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" /><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" alt="" /></a>


i used the same javascript, just changed the type of zoom

$(".fancybox").fancybox({
afterShow: function() {
$('.fancybox-image').elevateZoom({
zoomType: "inner",
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
});
}
});


but i can't seem to get it to zoom. here is a codepen

you can click the first image on the top left

i think it should still zoom with those images sizes. but i tried some lager images as well and it didn't seem to make a difference, at least the last time i tried it

Answer
  1. You should put the elevateZoom code inside the afterShow of the $('.fancybox-thumbs') part.
  2. You need the elevateZoom to run over the img.fancybox-image (and not just .fancybox-image).
  3. Don't forget that you also need to remove the elevateZoom element after the fancybox is closed.

Here is the code:

$('.fancybox-thumbs').fancybox({
    prevEffect : 'none',
    nextEffect : 'none',

    closeBtn  : false,
    arrows    : false,
    nextClick : true,

    autoCenter: true,

    helpers : {
        thumbs : {
            width  : 75,
            height : 75
        }
    },
    afterShow: function() {
        $('img.fancybox-image').elevateZoom({ 
            zoomType: "inner",
            cursor: "crosshair",
            zoomWindowFadeIn: 500,
            zoomWindowFadeOut: 750
        });
    },
    afterClose: function() {
        $('.zoomContainer').remove();
    }
});

Here is a new codepen: http://codepen.io/anon/pen/amoAOO

Comments