Back in March 2021 (pre covid ... wow!) ... I had some help from Jamal here https://toolset.com/forums/topic/lightbox-shortcode-not-working-when-you-move-to-the-next-pagination/ .. which was about getting a YouTube player to show in a lightbox correctly for the paginated slides in a post slider. We got it fixed by adding custom JS that fired the plugins js when the pagination completed. The lightbox sizing was also an issue which wasn't quite fixed.
But now I've found a better YouTube player plugin from SmashBalloon, which sorts the lightbox sizing correctly and their shortcode is working great with the post's custom field for the video ID. The only issue left is the same as before, it's not loading up in the paginated slides.
I've been in touch with the support at SmashBalloon and they've said I need to add the js command sby_init() ... they've even demoed it here in a video: hidden link
I've tried the following code in the JS editor, based on Jamal's suggested code:
jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
// the plugin's code here, e.g.
sby_init();
});
Does it look correct?
You can see that it not quite right on my test page here: hidden link ... pls change the (dot) to a . for the link to work.
You can add the console log to see the JS hook "js_event_wpv_pagination_completed" is fired or not and then check the console log.
For example:
jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
console.log("HOOK IS FIRED"):
// the plugin's code here, e.g.
sby_init();
});
Thanks, I've had a look at it doesn't look happy at all.
When I click Next or Previous buttons, which I have for the pagination, it's triggering off a number of warnings about the Frontend and error messages e.g. "Maximum call stack size exceeded"
Well - I'm not sure what it exactly pointing out as the function you are trying to hook within ajax pagination JS hook is the belongs to third party library/plugin.
You can check with that library/plugin support that you have a hook that you can call it on pagination event:
jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
console.log("HOOK IS FIRED"):
// the plugin's code here, e.g.
sby_init();
});
So, how you can hook their function sby_init(); within it. Does it require any dependency, you can check with them. This is custom code and we offer limited support for such custom edits.
Thanks, I've asked them and awaiting a reply. But looking at the previous code I was using I've added 'run' in the brackets like this:
jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
// the plugin's code here, e.g.
sby_init('run');
});
And it seems to be working, which is great. But there is like a second or 2 delay for when the video loads up. It's not the smoothest experience. Is it possible to speed the trigger up or to make them load when you click rather than pagination completed the transition?
Glad to know that you find a way about how to correctly call the function.
For ajax pagination, we only offer the hook you are using "js_event_wpv_pagination_completed". Unfortunately - I do not have any other solution to offer. You may check with Pro Javascript expert to resolve such complicated custom JS issue.
Hi,
That's fine thanks. However there is a new issue. If you play one of the videos it opens up in the lightbox fine and plays. If you close and go to another video, it keeps showing and playing the previous video in the lightbox. You can see this on the test page.
Is this the plugin issue or something to do with the slider?
Yes, but I'm sure you understand that the way the slider loads up paginated content will impact any plugin's output and can therefore be the cause of issues.
I'm awaiting a response from the SmashBalloon support and might be back with some questions.
Hello there! Minesh won't be available for a couple of days. If you don't mind, I'll continue with you here.
All I can say right now, is that trying to open a youtube video triggers some Javascript errors. Check this screenshot hidden link
SmashBalloon support is definitely important to solve this issue. However, I'd like to get access to your website and check how the view is built. That will help me get a better picture of the issue, and hopefully, we'll fix it quickly.
Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **
