Closed sh1zukey closed 11 months ago
Hi,
Well, the script will display error message if image can not be loaded.
So, you wish to display alternative image on broken links?
Yes I want to display a different image if the image link is broken.
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);
}
},
},
});
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?
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
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