Fancybox with lazyload

[heppi75]

Hi, I have a problem with the fancybox plugin. I defined the images like this:

<img class="lazy fancybox" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-original="myimage.jpg">

The problem ist that fancybox always uses the pixel image not the image that is replaced by the lazyload plugin. I also tried to call the fancybox on each load event from the lazyload plugin.

function lazy() {$(".fancybox").fancybox();}$(".lazy").lazyload({effect: "fadeIn",load: lazy});

Would be great if someone could help me ...

[fancyapps]

Hi, Try using data-src="myimage.jpg" attribute.

[Hubaxis7]

When I use Fancybox with LazyLoad I can't get a normal preview while in the attribute src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" is .gif 1*1px. Can you tell me how to make Fancybox to be used for preview of another attribute? For example, data-fpsrc?
My code:
<a data-caption="" data-fancybox="c-image" href="/sites/default/files/images/inline-content/2018/20180117-093725.jpg"><img class="lazyload" data-src="/sites/default/files/styles/content-image/public/images/inline-content/2018/20180117-093725.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="></a>
My website https://goo.gl/2HyfWU

[fancyapps]

@Hubaxis7 Use data-thumb for custom thumbnail image.

[Johnblundon]

So does FancyBox use some sort of lazy loading automatically when you use the "data- src" and "data-thumb" variables?

[fancyapps]

It depends on what you mean by "lazy loading". fancyBox loads current and next/prev images and starts loading thumbnails when thumbnail bar gets opened. In future, thumbnails will have something like "lazy loading, when only visible thumbnails will be loaded.

[SanderMuller]

+1 for lazyloading thumbnails, right now when I have a gallery with 200 images, it loads the thumbnail of all 200 images when the thumbnail bar gets opened, this is kinda defeating the point of lazy loading those images in the non-thumbnail bar view.

[SanderMuller]

@fancyapps was thumbnail lazyloading added to V4?

[fancyapps]

@SanderMuller Thumbnails plugin for v4 creates instance of the Carousel component. And Carousel loads currently visible slides along with and next/previous page. Therefore, for example, if you have 200 images and 10 thumbnails are visible, then ~30 Carousel slides will be created (and loaded). If you wish, you can disable preloading like this (then only visible thumbnails will be loaded):

Fancybox.Plugins.Thumbs.defaults.Carousel = { preload : 0 };

btw, you can change width/height of thumbnails using CSS; there is currently no option to make thumbnails vertical (e.g., Carousel), but it is planned.