I am using Responsive Lightbox & Gallery 2.7.8 on WordPress 7.0.2 with a Twenty Fifteen child theme.
The issue occurs on the blog homepage, where several posts containing different Responsive Lightbox gallery types are rendered together. The same galleries work correctly on their individual post pages.
On the homepage I have, among others:
* Basic Masonry galleries
* one Basic Slider gallery
* one Basic Grid gallery
The Masonry galleries initially rendered as a single vertical column, while the Slider failed to initialize correctly. The console showed:
`text
Uncaught TypeError: can’t access property “length”, t is undefined
splide.min.js?ver=4.1.4
front-basicmasonry.js?ver=2.7.8
front.js?ver=2.7.8
`
I investigated the doResponsiveLightbox event handlers in the browser console. Three handlers are attached:
1. general Responsive Lightbox handler
2. Basic Masonry handler
3. Basic Slider handler
Manually triggering
`javascript
jQuery(document).trigger(‘doResponsiveLightbox’)
`
reproduces the same error.
If I temporarily remove only the Masonry doResponsiveLightbox handler, the event can be triggered without error.
I therefore implemented a local workaround that removes the Masonry handler immediately after front-basicmasonry.js registers it, but before front.js triggers the event:
`php
add_action( ‘wp_enqueue_scripts’, function() {
if ( ! is_home() && ! is_archive() ) {
return;
}
$code = <<<‘JS’
(function($) {
var events = $._data(document, ‘events’);
if (!events || !events.doResponsiveLightbox) {
return;
}
events.doResponsiveLightbox.slice().forEach(function(item) {
var source = item.handler.toString();
if (
source.indexOf(‘rl-basicmasonry-gallery’) !== -1 &&
source.indexOf(‘.masonry’) !== -1
) {
$(document).off(‘doResponsiveLightbox’, item.handler);
}
});
})(jQuery);
JS;
wp_add_inline_script(
‘responsive-lightbox-basicmasonry-gallery’,
$code,
‘after’
);
}, 100 );
`
With that handler disabled and the galleries initialized separately, the galleries display correctly and the console error disappears.
There was also a separate sizing issue with the Masonry gutter on the homepage. .rl-gutter-sizer was computed at the full gallery width, forcing a one-column layout. This fixed it locally:
`css
.rl-basicmasonry-gallery .rl-gutter-sizer {
width: 1% !important;
}
`
The problem appears to be specific to archive/home pages containing several Responsive Lightbox galleries of different types. Single-post views work correctly.
Site example:
https://www.berndspyra.de/