Open and close OxyExtras lightbox when element clicked or hash in URL

1 min read / Custom Code, Oxygen Builder, Plugins, WordPress / Share on: Twitter, LinkedIn, Facebook

Post summary: Thanks to the OxyExtras support, we can use custom elements to open and close their lightbox element. You just need to add the code below to the code block and add CSS classes. Opening element: .open-lightboxClosing element: .close-lightbox jQuery(document).ready(function($) { let openSelector = ‘.open-lightbox’; let closeSelector = ‘.close-lightbox’; let hash = ‘form’ /* yourwebsite.com/#form */…

Thanks to the OxyExtras support, we can use custom elements to open and close their lightbox element. You just need to add the code below to the code block and add CSS classes.

• Opening element: .open-lightbox
• Closing element: .close-lightbox

jQuery(document).ready(function($) {

let openSelector = ‘.open-lightbox’;
let closeSelector = ‘.close-lightbox’;
let hash = ‘form’ /* yourwebsite.com/#form */

/*
* close open lightbox when element clicked
*/
$(closeSelector).on(‘click’, function(e) {
e.preventDefault();
$.fancybox.close();
});

/*
* open lightbox on page load by triggering a click on the click trigger if hash matches
*/
if(window.location.hash) {

let hashinURL = window.location.hash.substring(1);

if (hashinURL === hash) {
$(openSelector).trigger(‘click’);
}

}

});

This code also open lightbox when #hash in URL is #form.
Original code on GitHub.

0 comments