[Resolved] Lightbox shortcode not working when you move to the next pagination

[Author]

Posts

[nickT-2]

Hi,

I've created a view (3 items in a row) with pagination. I've managed to set up lightbox of post content that displays when you click the featured image. All working ok on the first page, when the view first loads up.

But when you move to the next pagination the lightbox stops working and is non-responsive. If I move back to the first page, these items are now also non-responsive.

Is there something going on that stops the js or shortcode from working when you paginate? Is there a way to make it work across all items in a view with pagination?

You can test this out here: aroshanti(dot)com/test-tracks-views

Thanks
Nick

[Jamal]

Hello Nick and thank you for contacting the Toolset support.

The lightbox is initialized in the first page loads, that why it works for the first page item. When the second page is loaded through AJAX, its content's lightboxes are not initialized. Now when you return to the first page, it gets loaded again, and its content's lightboxes are not initialized again.
You need to run the Javascript code that will initialize the lightboxes after each page loading. Check this article if you are building the view with the legacy editor. https://toolset.com/documentation/programmer-reference/adding-custom-javascript-code-to-views-that-use-ajax/

If you are building the view using the blocks editor, use the following event to trigger the lightbox initialization:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.effect (string) The View AJAX pagination effect
	* data.speed (integer) The View AJAX pagination speed in miliseconds
	* data.layout (object) The jQuery object for the View layout wrapper
	*/

        // initialize the lightbox here.	
});

If you are using a 3rd party plugin to generate these lightboxes, you will need to check its documentation on how to programmatically initialize the lightbox. Most usually it will be something like:

jQuery('.lightbox').lightbox();

[nickT-2]

Ah, that makes sense. Thank you for your quick reply.

I'm using the legacy editor. So once I've got the snippet of code from the lightbox author please can I check ... would I put it in like this:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
            // the plugin's code here, e.g.    
               jQuery('.lightbox').lightbox();
});

Have I understood your instructions correctly?

Cheers
Nick

[Jamal]

Yes, exactly. Just put that code in the JS section of the view and it will initialize the lightboxes after each pagination.

[nickT-2]

Hi Jamal,

Thanks for confirming.

They have suggested I add this jQuery(document).trigger('post-load');

So the code would be:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
	jQuery(document).trigger("post-load");
});

Am I right in thinking this is generic code they've suggested rather than being specific to their plugin. Maybe it should work.

I've tried it out and it seems to have fixed the lightbox but unfortunately my YouTube player (using the shortcode from a plugin called YourChannel) is still not working. I guess I need to ask them the same question and add their plugin's re-initiate js code as well and add it underneath the post-load.

Does that still look/sound like I'm heading in the correct direction?

Thanks

[nickT-2]

Hi Jamal,

I've managed to get it to work with the following code:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
	jQuery(document).trigger('post-load');
  	YRC.EM.trigger('yrc.run');
});

As mentioned this bit is for the lightbox:

jQuery(document).trigger('post-load');

This seems to not be specific to the plugin but more a generic js trigger. Is there any issues with doing it this way or should it all be fine?

And then this bit was for the YourChannel YouTube player plugin:

YRC.EM.trigger('yrc.run');

Thanks very much for your help,
Nick

[nickT-2]

Hi Jamal,

Sorry I have another question please and I think the solution you mentioned on this ticket will probably be the same fix.

The issue I have is that when the lightbox opens the yt video player needs to be resized. At the moment, without a min-height css rule the video player is coming out at 0 height ... therefore not displaying.

The YourChannel plugin author (the youtube player) has said I need to add the following tigger to when the lightbox is opened:

 
YRC.EM.trigger('yrc.resize');

I was wondering if it was possible to add this trigger in the similar way to the pagination action/trigger, but in the Loop item js section. It's the Loop item that contains the lightbox & youtube player code.

But the issue is I don't know what this bit should be ... the action that triggers the js code:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
});

I guess it would be something like this:

jQuery( document ).on( 'js_event_lightbox_open', function( event, data ) {
YRC.EM.trigger('yrc.resize');
});

At this point I'm not sure if the lightbox plugin has such an event that I can use ... I mean this bit in my above example "js_event_lightbox_open" ... I can check with the author. But can I please check with you if there is such a way I can create an event in the toolset plugins?

Thanks
Nick

[Jamal]

Hello Nick,

Javascript is an invented language, which means that it offers to option to run code when an event happens/triggers. So, I would say that this code:

jQuery(document).trigger('post-load');

Is probably a good solution, because that plugin may be running several bits of code when the event "post-load" is triggered on the document. Or because they do not offer any functions for users to use. Instead, they run the initialization code when the event triggers.

In Toolset, there is no event such as "js_event_lightbox_open". You will need to check with the plugin's authors(YourChannel) and ask them what event they trigger when the video player is opened. There is nothing we can do for that from our side 🙂

All the best,
Jamal

[nickT-2]

Hi Jamal,
Sorry for the delay. I'm still waiting for the lightbox plugin support to come back and let me know their js for lightbox initiation.

One thought was, is it possible to still use the lightbox that comes with bootstrap in the legacy view editor? Is this recommended?

Thanks
Nick

[nickT-2]

Hi again .. I've got it working following the instructions here: https://toolset.com/forums/topic/post-content-in-bootstrap-lightbox/

But, I need to add the video resize js line when the bootstrap ligthbox is clicked. Would this be similar to the pagination code?

jQuery( document ).on( 'js_event_lightbox_open', function( event, data ) {
YRC.EM.trigger('yrc.resize');
});

Or something like this?

[nickT-2]

Hi Jamal,
UPDATE - additional question

I've managed to get it to work with the code:

jQuery('#aro-4172').on('shown.bs.modal', function (e) {
     YRC.EM.trigger('resize');
});

But the problem I have now is that the '#aro-4172' is only referring to one of my posts. Ideally I need jQuery to reference each unique modal, which is using the '#aro-[wpv-post-id]' as the modal ID.

It looks like the js section does not work with custom field/variable such as [wpv-post-id].

Is there a way around this or maybe another way to target all modal lightboxes with the js?

Thanks ... so close :o)

[nickT-2]

Hi,
I've managed to work it out. Didn't realise we could use our own classes or ID ... so I've used my own class, i.e. yt-resize, and the working code is (in case it's useful for anyone else).

jQuery('.yt-resize').on('shown.bs.modal', function (e) {
     YRC.EM.trigger('resize');
});