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
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:
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?
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 ) {
});
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?
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 🙂
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?
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');
});
This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.