Блог

Главная - Вопросы по программированию - Добавить функциональность колеса мыши в лайтбокс

Добавить функциональность колеса мыши в лайтбокс

#javascript #jquery #lightbox #mousewheel

#javascript #jquery #лайтбокс #колесо мыши

Вопрос:

Я хочу объединить плагин fslightbox.js lightbox: https://fslightbox.com

с jquery-mousewheel помощью плагина https://github.com/jquery/jquery-mousewheel

добавить функциональность колеса мыши, чтобы при прокрутке лайтбокса вверх или вниз пользователь переходил к следующему или предыдущему снимку.

это мой js-код, но lightbox.on('mousewheel') он не запускается, есть идеи, как заставить его работать?

 var lightbox = $('.fslightbox-container');
lightbox.on('mousewheel', '.fslightbox-absoluted', function (e) {
  if (e.deltaY>0) {
      lightbox.trigger('.fslightbox-slide-btn-container-next"');
  } else {
      lightbox.trigger('.fslightbox-slide-btn-container-previous');
  }
  e.preventDefault();
});

HTML:

 <div id="mygallery" >
<a href="./app/img/ilustraciones-1.png" data-fslightbox>
    <img src="./app/img/ilustraciones-1.png"/>
</a>
<a href="./app/img/ilustraciones-2.png" data-fslightbox>
    <img src="./app/img/ilustraciones-2.png"/>
</a>
<a href="./app/img/ilustraciones-3.png" data-fslightbox>
    <img src="./app/img/ilustraciones-3.png"/>
</a>
</div>

Ответ №1:

Для начала у вас есть синтаксическая ошибка, которую подтвердит консоль ошибок.

 lightbox.trigger('.fslightbox-slide-btn-container-next"'); //<-- "

Во-вторых, вы, похоже, делаете значительные предположения о том, что trigger() и как это работает, полагая, что вы передаете ему селектор, и он запускает событие щелчка. Это не так, как это работает. Я думаю, вы имеете в виду:

 lightbox.find('.fslightbox-slide-btn-container-next').click();

Комментарии:

1. Я понимаю, но все же пытаюсь изменить ваш синтаксис, чтобы лайтбокс не переходил к следующей / предыдущей фотографии при действии колеса мыши

2. Опечатка с моей стороны — я пропустил . с передней части селектора. Если это все еще не работает, убедитесь, что элемент, который вы ищете с помощью этого селектора, действительно найден.

3. это не работает. Я добавил console.log(событие. deltaX, событие. deltaY, событие. deltaFactor); и если я проверю консоль. журнал, он даже ничего не показывает

4. Затем вам нужно выполнить некоторые шаги по отладке, чтобы убедиться, что код выполняется в каждом гейте, т. Е. Что Условия возвращают true . Настройте скрипку после того, как вы это сделали, если она все еще не работает.