Product:
Level:
Advanced
Tutorial:
You can use the Wonder Gallery plugin to easily create images and videos for your WordPress website. This tutorial will guide you on how to dynamically change the images and videos in the gallery using JavaScript.
How to load Wonder plugin JS files as non-render blocking and improve the webpage loading performance
Product:
All Wonder Plugins
Tutorial:
By default, Wonder plugins load the plugin JS files in the WordPress header. While this provides best compatibility with all kinds of WordPress themes, JS files in the header will be render-blocking. That's, the webpage will only be rendered after the JS files are loaded.
There are two methods to load the JS files as non-render blocking and fix the issue.
- First method: load Wonder plugin JS files in the WordPress footer
- Second method: use a third-party plugin to aggregate the JS files and load it as non-render blocking
We will also discuss plugin conditional loading at the end of this tutorial:
- Plugin conditional loading: only load plugins on selected pages or posts
How to add Shortcode to the new Gutenberg editor
This tutorial will guide you how to add shortcode to the new Gutenberg editor. Since most Wonder plugins are based on shortcode, they work with the Gutenberg editor very well.
Lightbox effect not working with the WordPress theme Salient
Product:
WonderPlugin Slider, WonderPlugin Carousel, WonderPlugin Portfolio
Tutorial:
This tutorial will guide you how to fix the issue of the lightbox effect not working in the WordPress theme Salient.
Continue reading
Callback from WonderPlugin Gallery when a video is changed
Question:
* This question is for WonderPlugin Gallery Plugin.
I’d like to know if there is a way to get a call back from WonderPlugin when a video is changed in the gallery, this is to show related content to that specific video within the playlist.
Answer:
There are two events you can use:
onchange: The event will be be fired on changing the slide.
onvideoend: The event will be be fired when the video playing ends.
To use the events, firstly, you need to define a JavaScript function in your webpage, for example:
<script language="JavaScript">
function onSlideChange(data) {
try {
console.log(data);
} catch (error) {}
}
function onVideoEnd(data) {
try {
console.log(data);
} catch (error) {}
}
</script>
In the above code, data is the data array of current slide object, the definition is [index, Thumbnail address, File address, File address for video ogg file, Fire address for video webm file, Link address, Link target, Title, Description, Media type, Width, Height, Address for video poster image, Address for HD video, Address for HD Ogg file, Address for HD webm file].
Then in the plugin, Step 3, Options tab, Advanced Options, enter:
data-onchange="onSlideChange" data-onvideoend="onVideoEnd"
