Hi,
I am currently using the WP Rocket plugin in conjunction with the TagDiv Newspaper theme on my WordPress site. I have enabled the lazy load feature for images in WP Rocket, but I am experiencing an issue where the lightbox functionality (provided by TagDiv Newspaper) is not working on images that have not yet been loaded (those not visible when the page initially loads).
It seems there might be a compatibility issue between WP Rocket’s lazy load feature and TagDiv Newspaper’s lightbox. The lightbox functionality appears to try to apply itself immediately upon page load, but with lazy load enabled, the images it needs to apply to aren’t loaded yet.
I would appreciate any assistance or guidance you could provide in resolving this issue. Ideally, I would like to keep both the lazy load and lightbox functionalities without having to add any additional plugins or scripts to my site.
Thank you in advance for your help.
Best regards,
David Pavelka
Hello,
Please try entering this class -> td-modal-image here https://docs.wp-rocket.me/article/15-disable-lazy-load-on-specific-images Then clear the cache and check again.
Thank you!
Hi,
Thank you for your assistance with the issue. I was initially struggling with the problem where images with the data-lazy-srcset attribute were not being correctly handled by the modal image functionality.
Your suggestion was to disable lazy-loading on images with the td-modal-image class. However, upon further investigation, I found that the td-modal-image class was not being applied to the images in question at all. This made the proposed solution unworkable, as there were no instances of this class to disable lazy-loading on.
I managed to solve the issue by ensuring that the td-modal-image class was correctly applied to the a elements surrounding the images. I achieved this by adding a script that runs after the page has fully loaded. Here’s the script I used:
$(window).on('load', function() {
$('img[data-lazy-srcset]').each(function() {
$(this).closest('a').addClass('td-modal-image');
});
});
This script waits until the entire page (including all images, scripts, and other resources) is fully loaded. Then, it adds the td-modal-image class to the closest a ancestor of each image with the data-lazy-srcset attribute. This ensures that the class is applied correctly, even if the images are loaded asynchronously or added to the page after the initial page load.
After implementing this change, the modal image functionality started working as expected. I thought it would be helpful to share this information with you, as it may assist other users who encounter the same issue.
An additional benefit of our solution is that it preserves the lazy-load functionality for these images. Your original suggestion was to disable lazy-loading, which could have resulted in a performance decrease. Therefore, my approach not only resolves the issue but also maintains the site’s performance.
Thank you again for your initial assistance.
Best regards,
David Pavelka
Hello David,
We express our gratitude for sharing this information on the forum. It will have certainly been beneficial to other users as well.
Best Regards!
Hi,
Did you try to add the class to be excluded or the above suggestion?
Thank you!
No. Is there any way to explain what am i supposed to do with that class and where to put it? i would really appreciate it!
Hi,
Do you use the WP Rocket plugin? If yes, then please check this guide https://docs.wp-rocket.me/article/15-disable-lazy-load-on-specific-images
Thank you!
