Viewing 1 post (of 1 total)
  • Author
    Posts
  • #57506
    Bernd Spyra
    Participant

    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/

Viewing 1 post (of 1 total)
  • You must be logged in to reply to this topic.