Gap between border and image

[IMC-GER]

Hi!

When I add a border to the image, is there a gap between the border and the image. https://fancyapps.com/playground/BD

[fancyapps]

Hi,

Sorry, adding a border to content is not currently supported. But you can create a border effect using this snippet:

.fancybox__container .fancybox__content {
  box-sizing: content-box;
  padding: 1rem;
  background: #fff;
}

See this demo - https://fancyapps.com/playground/vo

[IMC-GER]

Thanks! This helps a lot.

[robfaas]

I would like the possibility to set Image to zoom: true. But when I do, there is an ugly delay between (dis)appearance of container-with-background and image.

[fancyapps]

@robfaas Sorry, I do not understand, there is no delay between click and zoom animation (unless you have defined double click event, in such case there is a delay to distinguish single and double click).

[robfaas]

In your demo https://fancyapps.com/playground/vo change JS zoom: false to zoom: true and then click on a thumbnail. You first see the white container and only after a delay the photo will 'zoom in'. Same delay happens at closing the overlay.

[fancyapps]

No, there is no delay. Maybe you think there is delay because you do not see start of the animation, because it is also changing opacity (because ratio of thumbnail and full image do not match).

[robfaas]

A short video (background-border to red so you can watch the delay better): https://www.anothersite.nl/fancyapps/fancyapps-border.mp4

[robfaas]

I did not mean a delay between click and animation, but a delay between (dis)appearance of background/border and (dis)appearance of the full image. If you watch the video in my previous comment, you will see this delay. In this case especially long when the full image is being closed.

[fancyapps]

That is why that demo has disabled zoom, so you do not see that quirk :)

Long story short - I have spend years trying to find perfect solution to this problem and I have not yet found. It is currently not possible due to limitations of the HTML and CSS specification and CPU/GPU capabilities of the desktop/mobile devices. It is so frustrating that mobile devices can perfectly run 3D games, but can not smoothly resize single image with shadow. There are solutions, but they come with trade-offs.

[robfaas]

Ah! That explains it all. Frustrating indeed! So it will be no borders or borders-without-zoom.

[fancyapps]

Hi,

If anyone wants to add a border to an image, I figured out a way, see this demo - https://jsfiddle.net/5mt1Lnez/

Fancybox.bind('[data-fancybox="gallery"]', {
  on: {
    reveal: (_fancybox, slide) => {
      const doubleBorder = 10 * 2;

      slide.contentEl.insertAdjacentHTML(
        "beforeend",
        `<div class="custom-fancybox-bg"></div>`
      );

      slide.customBG = slide.el.querySelector(".custom-fancybox-bg");

      slide.panzoom.on("afterTransform", (panzoom) => {
        const bgScale =
              (panzoom.contentRect.width + doubleBorder) /
              ((panzoom.contentRect.fitWidth + doubleBorder) * panzoom.scale);

        slide.customBG.style.scale = bgScale;
      });
    }
  }
});

.custom-fancybox-bg {
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
  background: #fff;
  z-index: -1;

  opacity: 1;
  transition: opacity 0.2s ease;
}

.is-closing .custom-fancybox-bg {
  opacity: 0;
}

.fancybox__slide.has-image {
  padding: 40px 80px;
}