Hello, I wonder are we allowed to use it in our wordpress themes that we are selling to multiple clients with extended license? It was enough for V3 but I wanna be sure for V4.

Thanks.

document.body might not yet be available during the load of the script (especially with the UMD version). So have to wait for it to become available.

Fixes #81

If I'm not completely wrong, the behavior of how images are scaled to 100% has changed in comparison to fancybox 3.

Fancybox 4 uses now css transform and scales the image up to - for example - scale(1.4066). This causes naturally a little blurred image also if the calculation is right and the scaled image corresponds 1:1 to the natural image size.

It's the browser's transform scale rendering that blurs the image and after a lot of research about this, this can't be fixed with css tweaks.

The lower the screen resolution, the more the problem appears:

left fancybox 4, right the image url opened

At the end this is very sad for all user who want to show her images on mobile devices with panzoom functionality.

The solution could only be another way to reach the 1:1 / zoomed view of an image - without any css transform upscaling.

Great update - thank you!

Working on a project and my client is running macOS High Sierra and was seeing some unexpected scale behavior when clicking on a Fancybox-designated image.

On click, the image is scaled to fill the viewport instead of being contained within the viewport (expected).

Here is a screenshot of the behavior:

Here is a screenshot of the expected behavior:

^^ in the expected version, the initial image size/scale is constrained to the viewport or window. In Safari versions 11–13, the image is scaled all the way to the width of the container.

This seems to be fixed in Big Sur but was able to reproduce the behavior using Browserstack with Safari + High Sierra/Mojave/Catalina.

Not sure if this is a Safari bug but initially was having a hard time counteracting it with CSS.

Hopefully this may be fixed in a future update?

@fancyapps

for example if file extension not present in url fancybox instead of showing pdf content

will open black iframe and download it after iframe loaded

Hello,

I am currently in search for a lightbox alternative for our project and Fancybox looks like a very good choice. Especially the good integration of keyboard controls is a big plus for this plugin.

However, we have some cases where there are multiple Iframes in one gallery. The current behaviour is that once you get into one iframe, you navigate through all the other iframes of the gallery as well before regaining focus in the lightbox overlay.

To replicate this you can simply adjust this playground example (https://fancyapps.com/playground/vk) by duplicating the last video 'a'-tag.

Can a fix for this issue still be expected for the 4.0.0 release?

Thanks in advance!

Hi! I recently install Panzoom, but I can´t make the buttons for zoom in & zoom out appear over my image, just like in Quick Demo example. What I´m missing?

I have a Fancybox Slideshow triggered by an image-hyperlink : slideshow autoStart does not work. When replacing the image-hyperlink by text-hyperlink, the autoStart is working OK. Any possible explanation ?

fancybox-text.txt fancybox-image.txt

After clicking on an image and using "pinch to zoom" you cannot scroll around the zoomed in image using touch. Instead, attempting to scroll around the image results in erratic zooming in and out.

This is using Firefox Mobile 97.2.0 on Android. It's fine in Google Chrome.

Hi. I create a React component Fancybox

import { memo, useEffect, FC } from 'react';
import { Fancybox as NativeFancybox } from '@fancyapps/ui/dist/fancybox.umd';

export interface FancyboxProps {
  delegate?: string;
  options?: {};
}

const Fancybox: FC<FancyboxProps> = (props) => {
  const { delegate = '[data-fancybox]', options = {}, children } = props;

  useEffect(() => {
    const opts = options;

    NativeFancybox.bind(delegate, opts);

    return () => {
      NativeFancybox.destroy();
    };
  }, [delegate, options]);

  // eslint-disable-next-line react/jsx-no-useless-fragment
  return <>{children}</>;
};

export default memo(Fancybox);

And inside root of my app I just wrapped it in this component

<Fancybox>
//...
</Fancybox>

And, later, inside one of my sections I want to bind some spefific options for a gallery. It is allowed to make another <Fancybox options={{..}} > inside first global one? Purpose of global one is to global control all modals / triggers of the app, that have not required some specific options on instance.

Trying to use new fancybox, i found the animation are not smooth

fancybox 3

fanvybox 4

it seem like you are remove the hash option, can you bring it back? i want to set it to false, because it will cause the website reload when use in pjax

At the carousel, after calling the destroy() method, the carousel _ track block has inline styles. Workaround: clear styles manually before destroying using slider.$track.style = ''. Are there any other workarounds?

Why do I need this: on a small screen resolution, I use a carousel, on the rest, the blocks line up with a grid.

Playground: https://fancyapps.com/playground/4hU

Reproduction steps: press the "destroy" button in the playground and look at the carousel styles through DevTools.

Can you please make changes to the carousel source code? I will be very grateful.

When using data-srcset, zooming zooms into the currently selected source of the srcset. If the source sizes are judiciously selected, the image is already appropriately sized for the viewport, so very little zooming actually happens. Or, if data-width and data-height were specified, the image is indeed zoomed to those dimensions, but the source is not switched, which can cause upscaling.

Is there a way to always use the original (href / data-src) image for zooming instead? I understand this can cause a delay as the image may need to be loaded when the zoom action is triggered (and prefetching the original would defeat the point of using srcset).

Observed with latest Fancybox on MacOS Chrome 107.

Problem Description

Fancybox only allows a single image format to be used (https://github.com/fancyapps/ui/blob/main/src/Fancybox/plugins/Image/Image.js#L204). Since lightbox image viewers are meant to load higher quality images on click, allowing "next-gen" formats improves loading times.

Design

There are several ways to solve it, Photoswipe for instance provides a hardcoded attribute for webp since it's the most used nowadays.

Implementation Details

Simple

Assume most devs will just end up using webp. Create a new attribute (data-srcset-webp) for HTML markup.

HTML Markup

<a
    href="https://image.placeholder/rand.jpeg"
    data-fancybox="gallery"
    data-caption="Optional caption"
    data-srcset="https://image.placeholder/rand.jpeg 800w, https://image.placeholder/rand_1600w.jpeg 1600w"
    data-srcset-webp="https://image.placeholder/rand.webp 800w, https://image.placeholder/rand_1600w.webp 1600w"
>
    <div class="foo">
      <picture>
        <source type="image/webp" srcset="..." sizes="...">
        <source type="image/avif" srcset="..." sizes="...">
        <img sizes="..." src="https://lipsum.app/id/2/80x80" srcset="...">
      </picture>
    </div>
</a>

API

const gallery = [
  {
    src: "https://lipsum.app/id/2/800x600",
    thumb: "https://lipsum.app/id/2/80x80",
    caption: "First image",
    webp: "https://lipsum.app/id/2/800x600",
  },
  // ...
]

Fancybox.show(gallery, {
  // Your options go here
})

Advanced

Parse all attributes starting with data-source-xxx/data-srcset-xxx as sources.

HTML Markup

<a
    href="https://image.placeholder/rand.jpeg"
    data-fancybox="gallery"
    data-caption="Optional caption"
    data-srcset="https://image.placeholder/rand.jpeg 800w, https://image.placeholder/rand_1600w.jpeg 1600w"
    data-srcset-webp="https://image.placeholder/rand.webp 800w, https://image.placeholder/rand_1600w.webp 1600w"
    data-srcset-avif="https://image.placeholder/rand.avif 800w, https://image.placeholder/rand_1600w.avif 1600w"
    data-srcset-heic="https://image.placeholder/rand.heic 800w, https://image.placeholder/rand_1600w.heic 1600w"
>
    <div class="foo">
      <picture>
        <source type="image/webp" srcset="..." sizes="...">
        <source type="image/avif" srcset="..." sizes="...">
        <img sizes="..." src="https://lipsum.app/id/2/80x80" srcset="...">
      </picture>
    </div>
</a>

API

const gallery = [
  {
    src: "https://lipsum.app/id/2/800x600",
    thumb: "https://lipsum.app/id/2/80x80",
    caption: "First image",
    formats: {
        webp: "...",
        avif: "...",
    }
  },
  // ...
]

Fancybox.show(gallery, {
  // Your options go here
})

I'm using Fancybox to present some small animated gifs. A high quality animated gif may be very small dimensionally, but they look good when scaled up. My gifs however are presented in their original size and take up very little of the available area. How do I tell fancybox to scale the images to fit the available area, or better yet, to set a minimum image width/height?

I've tried the following to make them fit the slide area:

fb.on("reveal", ()=>{
    var slide = fb.getSlide();
    slide.$content.style.width = "100%";
    slide.$content.style.height = "100%";
    slide.$image.style.width = "100%";
    slide.$image.style.height = "100%";
});

It works but it leads to some glitchy looking effects when changing slides. I presume there's a better way?

I start my fancybox like so:

var fb = new Fancybox(
    [
        {src: "https://site.com/image1"},
        {src: "https://site.com/image2"},
        {src: "https://site.com/image3"}
    ], {
        startIndex: index,
    }
);

But I trigger it on clicking an image. How do I make it do the cool scaling effect on opening from the image that was clicked? I can't find an answer anywhere in the documentation.

I'm using the carousel to slide some posts and once I added a "expand" function which basically toggles a class the carousel jumps unexpectedly . I first got this issue when I tried to implement the function in react, I thought it might have been something wrong with my application, but I managed to reproduce it with the regular package.

You can see the issue here which I tried to reproduce https://fancyapps.com/playground/3To If you navigate once to the right and click the second last item in the carousel once or twice you should see jump.

or where the problem originated from https://lajara.se/projekt/brf-villastaden at the bottom of the page you have icons if you click them before the slide is fully finished it will jump