1

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 https://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

=== so with the help of Dekel i got this http://codepen.io/anon/pen/amoAOO

 <div class="grid-item car">
    <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>
  </div>

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

but there is a bug if the second image is smaller than the first and you mouse over the top left. the previous image will appear https://i.stack.imgur.com/HSjyk.jpg

http://codepen.io/soursocks/pen/GjKZag/?editors=1010

Community
  • 1
  • 1
sourlemonaid
  • 504
  • 2
  • 6
  • 19

1 Answers1

3
  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() {
        $('.zoomContainer').remove();
        $('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

Update

To fix the problem with the different images sizes you should add:

$('.zoomContainer').remove();

Inside the afterShow: function() { callback.

Community
  • 1
  • 1
Dekel
  • 60,707
  • 10
  • 101
  • 129