Can i replace image url on error?(Fancybox)

[sh1zukey]

Hi

Can i replace image url on error?(ex. 404 error) Let me know if we can give you any other information.

sorry my bad english. thank you

[fancyapps]

Hi,

Well, the script will display error message if image can not be loaded.

So, you wish to display alternative image on broken links?

[sh1zukey]

Yes I want to display a different image if the image link is broken.

[fancyapps]

Hi,

Well, it is a bit tricky, but it is doable, see this demo - https://jsfiddle.net/mubsz734/

const ERROR_404_IMG_URL = "https://raw.githubusercontent.com/tsparticles/404-templates/main/__screenshots/simple.png?raw=true";

Fancybox.bind('[data-fancybox="gallery"]', {
  on: {
    error: (fancybox, event, slide) => {
      // Check if this is not a fallback image
      if (slide.src !== ERROR_404_IMG_URL) {
        // Prevent Fancybox from displaying the default error message
        event.preventDefault();

        // Disable zoom-in/out animation
        slide.zoom = false;

        // Set new content
        fancybox.plugins.Images.setImage(slide, ERROR_404_IMG_URL);
      }
    },
  },
});  

[sh1zukey]

Hi

Thanks for the implementation and presenting the demo. It worked fine.

I have an additional question, is there any way to modify the thumbnail URL as well?

[fancyapps]

If you wish to change corresponding thumb, then, sorry, there are no build-in methods, but you could use these demos for inspiration:

https://jsfiddle.net/ysgc2fpa/ - for "modern" thumbs https://jsfiddle.net/rymuhnqj/ - for "classic" thumbs