Plugin:
Tutorial:
You can easily open a PDF file in a lightbox popup using the Wonder Lightbox plugin. By default, the PDF file will open with the "Automatic Zoom" option enabled.
Open a video lightbox popup on page load and autoplay then close the popup automatically on video end
Product:
Tutorial:
This tutorial will guide you on how to open a video lightbox popup upon page load, play the video, and then automatically close the popup after the video has finished playing.
At the end of the tutorial, it will also discuss how to redirect to a URL when the lightbox closes.
How to automatically enable lightbox popup on links to images and PDF files
Product:
Tutorial:
By using the Wonder Lightbox plugin, you can simply add a class name wplightbox to any link to activate the Lightbox effect. But sometimes, you may want to automatically enable the lightbox popup on all links to images or PDF files on the whole website.
How to embed a PDF file hosted on Google Drive in a WordPress page or post
This tutorial will guide you how to embed a PDF file hosted on Google Drive in a WordPress page or post.
We will also show you how to open the PDF file in a WordPress lightbox using the plugin Wonder Lightbox.
There are three steps in the tutorial:
- Step 1 - Share on Google Drive and copy the link
- Step 2 - Change the format of the Google Drive link
- Step 3 - Embed the PDF to a WordPress page or post using an iframe
- Optional - Open the PDF file in a WordPress lightbox
How to show contents of a page or post without the header and footer in a WordPress lightbox
Plugin:
Wonder Lightbox Version 9.5 or above
Tutorial:
This tutorial will guide you how to show contents of a page or post without the header and footer in a WordPress lightbox.
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 open a Wistia video in a WordPress lightbox
Product: Wonder Lightbox
Tutorial:
After installing the WordPress plugin Wonder Lightbox, by adding a class name wplightbox to a link, you can easily change the link to a WordPress lightbox popup and use it to open an image or a video in the lightbox popup.
This tutorial will guide you how to open a Wistia video in a WordPress lightbox.
How to show HTML content in a WordPress lightbox
This tutorial will guide you how to show HTML content in a WordPress lightbox by using the plugin Wonder Lightbox.
The tutorial will also discuss how to open the HTML content in the lightbox of a gallery created with Wonder Grid Gallery or a carousel created with Wonder Carousel
There are two steps in this tutorial:
- Step 1 - Add the HTML content to a div on the webpage
- Step 2 - Open the div in a WordPress lightbox
- Additional - Open the div in the lightbox of a gallery created with Wonder Grid Gallery or a carousel created with Wonder Carousel
How to show shortcode content in a WordPress lightbox
This tutorial will show you how to show content created with a shortcode in a WordPress lightbox by using the plugin Wonder Lightbox.
There are two ways to show content created with a shortcode in a lightbox:
- Method 1 - Add the shortcode to a div on the same page then show the div in a lightbox
- Method 2 - Add the shortcode to a standalone WordPress page then open the page in a lightbox
How to customise the WordPress lightbox caption, show web links, link to an email address or a phone number
This tutorial will show you how to customise the CSS style of the title and description of the lightbox created with the plugin Wonder Lightbox. It will also show you how to create web links, link to an email address and a phone number in the caption.
Continue reading
