向灯箱添加鼠标滚轮功能

Question

我想结合fslightbox.js灯箱插件： 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>

Answer 1

首先，您遇到语法错误，错误控制台会确认。

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

其次，您似乎对 trigger() 的作用及其工作原理做出了相当多的假设，认为您将选择器传递给它并触发点击事件。那是 not how it works。我想你的意思是：

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

向灯箱添加鼠标滚轮功能

Add mousewheel functionality to lightbox

javascript

jquery

lightbox

mousewheel