如何解决向灯箱添加鼠标滚轮功能
我想结合使用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>
解决方法
首先,您会遇到语法错误,错误控制台会确认该错误。
lightbox.trigger('.fslightbox-slide-btn-container-next"'); //<-- "
其次,您似乎对trigger()
的功能和工作方式做出了相当大的假设,认为您将选择器传递给了选择器并触发了点击事件。那就是not how it works。我想你是说:
lightbox.find('.fslightbox-slide-btn-container-next').click();
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。