Hi,

I'm testing the plugin and it works nicely to turn image and YouTube video links into lightbox popups. I tested the Custom grouping selector and it also works nicely.

However this only works when the page first loads. The page has some ajax navigation, which can dynamically change the image/video links DOM elements after the page load, without having to reload the entire page. The problem is the image/video links that are generated after the first page load are no longer functional (no lightbox popups).

I suspect that this may be because the JS does not bind to the new image/video links elements that are created by the ajax navigation.

I think there should be a way to bind the JS in a way such that it will still work even for new elements that are generated by ajax after the initial page load. Assuming this is the cause of the issue.

Could you please help? I can imagine this might impact other users as well.

Thank you!!

Update: I don't think it's a JS binding issue, this part actually seems okay.

The problem seems to be related to the anchor link element not getting the ari-fancybox class (and group/gallery data attributes).

When the page first loads, and everything works correctly, the image links have the appropriate class and attributes:

<a href="url.to.image/image.jpg" data-fancybox-group="fb_gallery_0_0" class="ari-fancybox" data-fancybox="fb_gallery_0_0">
<img src="url.to.image/image_thumbnail.jpg">
</a>

However after the ajax process, the newly created image links no longer have the class/data attributes:

<a href="url.to.image/image.jpg">
<img src="url.to.image/image_thumbnail.jpg">
</a>

If I manually add the class/data attributes, the lightbox popups work as expected, suggesting that it's not a JS binding issue. Not sure what is the best solution, for now I have a workaround to programmatically include the class and data attributes, which works fine.

Thanks!

Hello,

Do you use PRO or free version? Is any DOM event is trigger by a plugin when it loads data via AJAX?

Regards,
ARI Soft

Hi,

I'm using the free version. Yes I think the plugin generates new DOM elements after each ajax call, which queries the database and create DOM elements to show images. Thinking more about it, it makes sense that the DOM elements do not contain the appropriate attributes such as data-fancybox-group, data-fancybox, and class="ari-fancybox".

I have now updated the code to output the images to include the required class and attributes and it's working fine. I think this resolved the issue.

Thank you for your reply and help, appreciate it!