javascriptselectors-apilightgallery

lightgallery.js with querySelectorAll

I'm trying to run the lightgallery.js script (pure JS version) using querySelectorAll in several classes to no avail.

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. Before, I was using the jQuery version of the lightgallery script with no problems using $( '.gallery-1, .gallery-2, .gallery-3' ).lightGallery().

Solution

  • The culprit was the :has() used in the selector option in the script. :has() is a jQuery extension and not part of the CSS specification and, thus, cannot be used in pure JS scripts.

    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
    });
}