[英]lightgallery.js with querySelectorAll
I'm trying to run the lightgallery.js script (pure JS version) using querySelectorAll in several classes to no avail.我试图在几个类中使用 querySelectorAll 运行lightgallery.js脚本(纯 JS 版本),但无济于事。
This is the code I'm using:这是我正在使用的代码:
var lg = document.querySelectorAll( '.gallery-1, .gallery-2, .gallery-3');
for ( var i = 0; i < lg.length; i++ ) {
lightGallery( lg[i], {
selector: '.gallery-item > a:has(img)',
mode: 'lg-fade',
preload: 2,
counter: false,
download: false
});
}
I'm getting a "lightGallery has not initiated properly" error in the console.我在控制台中收到“lightGallery 未正确启动”错误。 Before, I was using the jQuery version of the lightgallery script with no problems using $( '.gallery-1, .gallery-2, .gallery-3' ).lightGallery()
.之前,我使用的是 jQuery 版本的 lightgallery 脚本,使用$( '.gallery-1, .gallery-2, .gallery-3' ).lightGallery()
。
The culprit was the :has()
used in the selector
option in the script.罪魁祸首是脚本中selector
选项中使用的:has()
。 :has()
is a jQuery extension and not part of the CSS specification and, thus, cannot be used in pure JS scripts. :has()
是一个 jQuery 扩展而不是 CSS 规范的一部分,因此不能在纯 JS 脚本中使用。
UPDATE:更新:
This is the code I'm using now:这是我现在使用的代码:
var lg = document.querySelectorAll( '.gallery-1, .gallery-2, .gallery-3');
for ( var i = 0; i < lg.length; i++ ) {
lightGallery( lg[i], {
selector: '.gallery-item > a[href$=".jpg"], .gallery-item > a[href$=".jpeg"], .gallery-item > a[href$=".png"], .gallery-item > a[href$=".gif"]',
mode: 'lg-fade',
preload: 2,
counter: false,
download: false
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.