Fancy box (java?) stops working after ‘next’ page of pagination

Hi,

thanks for your question, and sorry for the trouble.

The reason for this most likely is how the FancyBox plugin is registering its JavaScript events. There’s a limitation about that in the DataTables JS library, see https://datatables.net/faqs/#events

Unfortunately, the only real way to fix this is by modifying the FancyBox JS code to use event delegation (which other such plugins do).

Regards,
Tobias

Thanks for the reply.

Since I’m not a fan of modifying source files, especially JS, are you saying there’s no work around and that I should look for another table plugin?

I’ve set the table to display all 54 rows on the frontend, which is fine for now, but we add new rows every week. Eventually there will be hundreds of rows, which is just not practical to display all at once.

Hi,

I’m actually saying that you should maybe look for a different FancyBox plugin (if you don’t want to modify its source) ??
You won’t find a different table plugin that offers a pagination feature that will work with this FancyBox plugin, due to the latter’s JS code.

Regards,
Tobias

Ah! Thank you for clarifying. Yes, I quite like your table and your solution. Can you recommend a responsive fancybox-like plugin that plays well with your table?

Hi,

to be honest, I don’t really know that many plugins for this, as I never really needed them, especially not in tables.
I have used https://www.ads-software.com/plugins/wp-featherlight/ before, but can’t remember if it was inside a table.

Regards,
Tobias

Hi Tobias,

I reached out to the Easy FancyBox developer and this is a direct copy/paste of his response:

the [Easy Fancybox] plugin has a built-in event handler “post-load” (on the body element) that can be called to make it re-scan for new media links. The event handler needs to be triggered after new content is added to the page, like when the Next link is clicked or maybe on a sorting action.

It depends on TablePress is there is an easy way to trigger a new event. Can you ask the developers if TablePress triggers its own event after new content has been loaded to the DOM? If so, it could be used to wake FancyBox and scan the new content…

I don’t speak a lick of JS language so I’m just going to copy/paste whatever you say and send it right back to him.

If you’d like to see that thread, here’s the link:

• https://www.ads-software.com/support/topic/fancybox-doesnt-load-on-next-page-of-table/#post-10080522

Also, I setup a public page with a shortened version of the table for you to see the exact behavior. There’s 10 rows total, but it is only displaying 5 per page.

• https://www.yogaconcris.com/table-test/

I look forward to your response and getting this solved!

• This reply was modified 6 years, 8 months ago by sandeld.
• This reply was modified 6 years, 8 months ago by sandeld.

Hi,

the DataTables JS library does indeed offer such events (see https://datatables.net/reference/event/ ) but I don’t really have experience with those.

Still, I don’t really think that the current way how FancyBox registers its events is the best. For me (without having more detailed insights, to be honest), it might make more sense for it to use “event delegation”, i.e. to register its event handler on the body element and check if it was the intended recipient there.

Regards,
Tobias

Thanks. I’ll pass it along!

Hi,

sure, no problem!

Best wishes,
Tobias

I got reply from Easy Fancybox a week ago, but I’ve been on a little vacation. Here’s what he said:

Hi, not really sure about what the tablepress dev has in mind when he would like my plugin to use event delegation but looking at the tablepress events documentation, you might try this:

<script type="text/javascript">
jQuery('#myTable').on( 'draw.dt', easy_fancybox_handler );
</script>

where #myTable should correspond with your particular tablepress table ID, I suppose… Or maybe a general jQuery(document.body) would work too.

But as I mentioned, I’m not very knowledgeable when it comes to Java. I’m not sure if he means I should update the TablePress code or the Fancybox code. Any ideas?

Hi,

this code is an example from the DataTables JavaScript library (see https://www.datatables.net/). The code would basically reattach the FancyBox event handler whenever something “happens” with the table.

This might indeed be a workaround, so that you could try adding

<script>
jQuery('#tablepress-4').on( 'draw.dt', easy_fancybox_handler );
</script>

below the table Shortcode on that page.

Regards,
Tobias

YOOHOOOOOOO!!! It worked!

Thanks so much for the incredibly fast responses and work with the Fancybox developer.

Unfortunately, I’m now experiencing another problem that I think is unrelated to this. I’ll be starting another thread as soon as I hit ‘submit’ here.

Thanks again.

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!