Allow initial state of image to be full size when opened

[bennyb]

Currently when you click a thumb that's source image is larger then the browser you can then click this image to zoom in to it's full size.

Is it possible to use this full size to start with so avoiding the extra click.

[GeorgeRT]

I had a similar feature request in #1214 ie, fill-style. So instead of a zoom icon, a hand (pan) icon would be available instead if the image is zoomed as in object-fit: cover and therefore pan-able. Thanks.

[seiyria]

This would help significantly when doing image maps and resizing them. If you use any responsive image map plugin it'll apply them first to fancybox and then rescale them the wrong way when expanding the image. Starting the image full size would mitigate this.

[emre-dogan]

I'm also looking for this option. Or at least work around. It's really necessary for mobile devices. I looked for triggering zoom afterLoad or afterShow event but without success.

[Aldlevine]

I would also like this feature, or workaround. I need to zoom/pan large images and I'd like to keep the UX consistent with other places where fancybox is used as a typical lightbox. I've tried using scaleToActual in the afterShow event, but the animations get messed up.

[tasz]

i manage to do by enabling zoom button on default in main.js then used this code and used anchor class as test

$(document).ready(function(){
$(".test").fancybox({
  openEffect    : 'none',
  closeEffect   : 'none',
  afterShow :function() {
    //$(".fancybox").zoom({on:"click"});
     $('.fancybox-button--zoom').click();
  }
});
});

[P4KM4N]

Once this is implemented, a second option would be needed to tell if we want to zoom center or top.

[luchomatic]

I would also like this feature implemented

[maxmlr]

ping :)

[maxmlr]

ping :)

I had originally planned to buy multiple licenses and this is unfortunately a breaking issue. Thus I don’t think this is a proper reaction - as a matter of fact this is a common standard capability for most viewers.

[fancyapps]

Hello, everyone!

You see, it was too difficult to include this feature in v3 without a significant rewrite and, as a result, it never landed. It made more sense to focus on complete rewrite (it was needed anyway to drop jQuery and to fulfill other feature requests, too) so that fancybox would become even more flexible and powerful. You can see current progress here - https://fancyapps.com/next/ And I have made a quick test there, too - look for "zoom images to fit viewport on start".

If you are curious, then corresponding code looks like this (for v4):

Fancybox.assign('[data-fancybox="zoomgallery"]', {
  // Move close button to top/right corner
  closeButton: "top",

  // Disable default animations
  Image: {
    showClass: false,
    animateThumbnail: false,
  },

  // Events
  on: {
    done: (fancybox, slide) => {
      const panzoom = slide.Panzoom;

      if (panzoom) {
        // Here, calculate ratio and zoom at top position
        const contentWidth = panzoom.contentDim.width;
        const viewportWidth = panzoom.viewportDim.width;

        panzoom.zoomTo(viewportWidth / contentWidth, { y: 0, friction: 0 });

        // Fade-in using CSS animation
        fancybox.animateCSS(slide.$content, "fadeIn");
      }
    },
  },
});

As you can see, this way you have control over animations, zoom level, position, etc.

[bennyb]

You can see current progress here - https://fancyapps.com/next/ This looks awesome and great you're dropping the need for jQuery.

[fancyapps]

@GeorgeRT Hmm, sorry about that. Everything works fine for me, but https://www.uptrends.com/tools/uptime indeed shows that fancyapps.com is not accessible from some parts in the world. It is planned to move to GithHub pages, I hope that this will eliminate such problems.

[GeorgeRT]

I had removed the comment because I was able to access the URL from my work computer (VPN'd). Thanks for the update! I am using 1.1.1.1/1.0.0.1 as my DNS server.

[maxmlr]

That looks very promising, great work - thank you! Is there any estimate as to when the next version will be production ready?

[mhinesStockDev]

@fancyapps could you provide example code for latest version of FancyApps?

[fancyapps]

@mhinesStockDev The problem with this feature is how to combine it with grouping and swiping. If you would display single images, then it could be done like this - https://fancyapps.com/playground/2gS