How to combine it with fancybox ?

[akbarsaputrait]

I use fancybox. When I use lazyload with fancybox, the image does not appear, but when I click its link, the new image will be uploaded.

[verlok]

Hey @akbarsaputrait,
thanks for asking, but you really need to be more specific if you want us to understand your problem.
Can you better describe what's happening?

[akbarsaputrait]

That's my code.

Before :

After :

Thanks for your answer :)

[verlok]

Hi @akbarsaputrait,
thank you for sharing the code.

Can you better describe what's happening? The sentence "When I use lazyload with fancybox, the image does not appear, but when I click its link, the new image will be uploaded." doesn't sound very clear to me.

[verlok]

It looks like you're trying and getting some screenshots using an AJAX call, then you cycle through all the resulting data and append the images inside the element #ss_yesterday, as lazy loading images.

My question is: why are you loading those images lazily? In my opinion, you can just load them "eagerly", putting the image's URL in the src instead of the data-src. You shouldn't have performance issues since the images are already loaded after the AJAX call is complete.

[verlok]

Hi @akbarsaputrait,
I've just released a demo in the demos folder of version 10.6.0 which shows you how LazyLoad should be used with a popup layer.
I didn't find the API to do so using FancyBox, so I used Magnific Popup which is much more configurable and programmable.
If you have any other questions, feel free to ask.

[akbarsaputrait]

@verlok Thank you so much, for your answer. I glad to know about that! 😄