Решён
Как исправить ошибку в Lightbox (картинки товара)?

На сайте магазина используется лайтбокс для просмотра фотографий товаров. При клике на миниатюру открывается оверлей, но изображение либо не загружается вообще (пустой черный фон), либо загружается, но при переключении между фото следующая картинка не подгружается и скрипт падает с ошибкой в консоли:

TypeError: Cannot read properties of undefined (reading 'src')
    at next_image (lightbox.js:124)

Библиотека: Lightbox2 v2.11.3. Пробовал обновить до 2.11.4 - не помогло. Картинки подключены через data-lightbox атрибут, все ссылки рабочие. CMS: самописная на PHP 8.1.

Решение
51
Участник • 1 ответ

Ошибка Cannot read properties of undefined (reading 'src') на строке next_image говорит что массив изображений в группе собрался неправильно и при переходе к следующему элементу индекс выходит за границы.

Проверь что у всех изображений одной группы одинаковое значение в атрибуте data-lightbox. Это критично - Lightbox2 группирует по этому значению и строит свой внутренний массив при инициализации. Если хотя бы у одного элемента атрибут написан с опечаткой или отсутствует, массив обрывается.

Еще одна частая причина: jQuery подключен несколько раз (один раз в head, один раз через какой то плагин), это сбрасывает события и ломает инициализацию Lightbox2. Проверь через DevTools - Sources или Network, сколько раз загружается jquery.

Аватар Андрей Романенко

jQuery подключался дважды - раз в шаблоне и раз в плагине слайдера. Убрал дубль, все заработало. Спасибо.

14
Эксперт • 2 ответа

Посмотри в консоль до ошибки - там скорее всего будет предупреждение о конфликте jQuery версий. Lightbox2 старый и капризный по этому поводу.

19
Участник • 1 ответ

Если честно, Lightbox2 уже порядком устарел и тащит за собой обязательный jQuery как зависимость. Для нового проекта я бы взял GLightbox или PhotoSwipe 5 - оба без зависимостей, нативный JS, активно поддерживаются. Мигрировать несложно, атрибуты похожие.

11
Участник • 1 ответ

Также может помочь явная инициализация после загрузки DOM:

$(document).ready(function() {
    lightbox.option({
        'resizeDuration': 200,
        'wrapAround': true
    });
});

Иногда Lightbox инициализируется до того как все img-теги загружены в DOM, особенно если они подгружаются через AJAX или шаблонизатор рендерит их позже.

4
Участник • 2 ответа

столкнулся с таким же, у меня оказалась проблема в том что путь к изображениям был относительный а не абсолютный, лайтбокс терял их при открытии оверлея. попробуй прописать полный url с доменом

Написать ответ

Премодерация гостей

Вы отвечаете как гость. Ваш ответ будет скрыт до проверки модератором. Чтобы ответ появился сразу и вы получали репутацию — войдите в аккаунт.

Будьте вежливы и соблюдайте правила платформы.