[Fermé] Lightbox not working after using filter with ajax.

[Auteur]

Publications

[Guido]

I am trying to:
Filter results and using a lightbox while open an image.

Link to a page where the issue can be seen:
lien caché

I expected to see:
If you click on "Click here to enlarge" on any picture you will see a lightbox opening the image. If you click on any filter, let's do "Testing Topics > Chatbot, and then click "Click here to enlarge" it opens the image without lightbox.

I contacted the developer of the lightbox for a solution but he says the problem lies with you guys. He can probably create an add-on to make it work but only if more people request it. So that is not worth the wait.

His answer: "Hi, it appears that the AJAX filtering modifies the entire page, clearing all SLB-related details for links on the page (rather than simply hiding non-matching items).

As such, a dedicated extension for SLB/Toolset would likely to be required. This would also be dependent on whether Toolset supports integration with its AJAX functionality."

Do you guys have a solution for this? Maybe another soltution for lightbox to work on the images after filtering. It's only when using ajax on the filtering. I can go with a button and full page refresh but the client won't accept that.

The lightbox developer says that toolset clears all details on the page instead of simply hiding them.. Is that something you can easily change? Maybe a code snippet?

Thanks!
Guido

[Nigel]

How are you adding the lightbox?

It's likely that you use some JS to initialise the lightbox, maybe on the document ready event.

The problem is this is lost after an ajax update, and you need to re-initialise the lightbox.

Views fires custom events to handle such scenarios.

In the custom JS editor of the Search and Pagination section of the View you should see a Frontend events button.

Use that to insert some scaffolding code that uses the frontend event for when an ajax search completes and then add your code to initialise the lightbox there.

By the way, if you use Blocks to create Views and include images in the output you can choose to use a lightbox with these without the need for a 3rd party solution.

[Guido]

I am using a plugin for the lightbox: https://wordpress.org/plugins/simple-lightbox/

I know about the front-end events button and asked the developer what JS i can implement there. But no solution.. Maybe you know?

I know you guys are set on toolset blocks.. But for me it's not helpfull. Will probably never use it.. I am using Oxygen Builder and Toolset with every web-design project now and that gives me the power to create anyhting i want! It is a match made in heaven! 😉

I am so scared that you guys are giving up on the old views... Please don't and keep it updated. Gutenberg doesn't even come close to what you can do with Oxygen Builder. And works awesome with toolset (old) views!

The view that you are seeing there is quite complex with lots of custom CSS. Thanks to Oxygen's selector detector very easy to setup. Couldn't do that with Gutenberg.

Do you think you are able to help me with this? Or do i need to look for another solution?

Thanks!
Guido

[Nigel]

I installed that plugin but I couldn't get it to work at all, but nevermind, the principal is the same.

The plugin surely is initialised with some line of JS.

You should be able to re-initialise it after an ajax update using the Views custom JS event, the question is simply what JS can be used to initialise the lightbox code on a page.

If you are in contact with the plugin authors it should be trivial for them to tell you that, and with it you should then be able to add the relevant code to your View (and I can help if you have a problem with that).

Can you ask the plugin authors? No integration required, just one line of JS to (re)initialise the lightbox library.

[Guido]

Oke i just replied to the developer if he can help me with that.

Will update you on his answer.

Thanks
Guido

[Nigel]

Please do.

I'll just mark this as awaiting your feedback so it's not sitting in my queue.

[Guido]

Hi, i finally got an answer back form the developer.

"SLB uses both server-side and client-side processing to set up the lightbox. When Toolset's AJAX filtering modifies the page, it removes SLB's server-side configuration.

SLB cannot function properly without this data, regardless of any JS code that is run, which is why an extension that integrates with Toolset's behavior is necessary."

Is this something you can help with?

Thanks
Guido

[Nigel]

I'm not sure this would be given a very high priority given that we have our own lightbox solution and there are surely other plugins offering lightbox functionality that wouldn't have this issue (I don't understand why a lightbox needs to make ajax requests to the server).

But as the developer sounds willing to cooperate, if you have an email address for them I can share the details with our compatibility team.