Product:
Tutorial:
This tutorial will guide you how to add a button on top of the lightbox created with Wonder Lightbox, and clicking the button will redirect to another page.
To add a button on top of the lightbox, you can add the following JavaScript code to the same page as the lightbox link.
(function($){
$(document).ready(function() {
$(window).on("html5lightbox.lightboxopened", function() {
var btn = "<a style='position:absolute;top:24px;right:24px;' href='https://www.wonderplugin.com'><button class='redirectbtn'>Skip</button></a>";
$(".html5-image").append(btn);
});
});
})(jQuery);
If you don't know how to add the JavaScript code to the webpage, in your WordPress dashboard, left menu Wonder Lightbox -> Lightbox Options, Advanced Options, you can add the code to the Custom JavaScript input box. Please note, if you add the JavaScript code to this input box, it will add the button to all lightboxes on the website.
The code will add a button "Skip" on the top right corner of the lightbox, clicking it will redirect to the URL defined in the code.
An online demo is as follows: Video Lightbox with Skip Button.
The button has a CSS class name redirectbtn, you can customise the CSS style in your WordPress theme or replace the CSS class to your own class name.
