Back to Library
PHP Helpers
Using a Lightbox with a Facet
Implementation Guide
1.) Download and install the Lightbox Plugin
2.) Under the General Settings, scroll down towards the bottom and click the checkbox for “Custom events”.
3.) Copy the name of the custom event (Default is ajaxComplete)
4.) Add the below script to the theme.php file
theme.php
<?php
/** trigger the responsive lightbox plugin to reinit on facet update
** https://wordpress.org/plugins/responsive-lightbox/
**/
add_action( 'wp_head', function() { ?>
<script>
(function($) {
document.addEventListener('facetwp-loaded', function() {
$(document).trigger( 'ajaxComplete' );
});
})(jQuery);
</script>
<?php }, 100 );5.) If you changed the name of your event, replace the “ajaxComplete” name in the script
6.) In your facet, in your <a> image tag, give it a variable of rel=”lightbox”
Example: <a href=”<?php echo $img_ar[0];?>” rel=”lightbox” itemprop=”url”>