0

I am trying to use "LighGallery.js" in my page.

Situation: I have several groups of images and each group should be displayed in its own gallery. For each group, there is 1 image visible, and the rest are hidden and are to be shown in a gallery when the first visible image is clicked.

Problem: The gallery triggers for the only the first category. It does not triggers gallery view for the rest of the images.

Question: How can I use multiple instances of galleries. I can't seem to figure it out from the documentation. Anyone worked on this before?

What I have tried: I read around and tried using the Hash plugin that comes along. It still did not work:

Code structure:

HTML:

<div class="topleft">
  <!--Gallery 1st picture triggers-->
  <ul>
    <li>
      <a class="gthumbnail gallery1" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
    </li>
    <li>
      <a class="gthumbnail gallery2" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
    </li>
  </ul>
  <!------------------->

  <!--Individual galleries surrounded by DIVs-->
  <div>
    <a class="gallery1" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
    <a class="gallery1" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
  </div>

  <div>
    <a class="gallery2" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
    <a class="gallery2" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
  </div>
  <!------------------->
</div>

JS:

$(".topleft").lightGallery({
  thumbnail: true,
  hash: true,
  galleryId: "gallery1",
  selector: '.gallery1'
});

$(".topleft").lightGallery({
  thumbnail: true,
  hash: true,
  galleryId: "gallery2",
  selector: '.gallery2'
});

Thanks you

Ahs N
  • 8,233
  • 1
  • 28
  • 33

3 Answers3

1

FIX:

<div class="topleft--g1">
<div class="topleft--g2">
  <!--Gallery 1st picture triggers-->
  <ul>
    <li>
      <a class="gthumbnail gallery1" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
    </li>
    <li>
      <a class="gthumbnail gallery2" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
    </li>
  </ul>
</div>
</div>

$(".topleft--g1").lightGallery({
  thumbnail: true,
  hash: true,
  galleryId: "gallery1",
  selector: '.gallery1'
});

$(".topleft--g2").lightGallery({
  thumbnail: true,
  hash: true,
  galleryId: "gallery2",
  selector: '.gallery2'
});

P.S. hash: true <- delete it. 'True' by default https://sachinchoolur.github.io/lightGallery/docs/api.html#lg-hash

bodpad
  • 26
  • 1
0

You have to use different id's for different gallery on same page because reading on github, there already is an open issue. for more detail you can check here github

devendra
  • 36
  • 2
0

If you want a more programmatic way, you can use this solution. I used groups for the same links but different tags and I used vanilla lightgallery.js

You can find a working example at here

<div class="container">
  <div class="columns is-multiline">
    <div class="column is-full">
      <h2 class="title has-text-centered">TITLE</h2>
    </div>
    
    <div class="column">
      <div class="card">
        <div class="card-image">
          <figure class="image is-4by3">
            <a class="light-gallery light-gallery-single" data-group="light-gallery-1" href="http://lorempixel.com/400/300" target="_blank"><img src="http://lorempixel.com/400/300"></a>
          </figure>
        </div>
        <div class="card-content">
          <h2><a class="light-gallery light-gallery-single" data-group="light-gallery-2" href="http://lorempixel.com/400/300" target="_blank">Lorem Ipsum dolor site amet</a></h2>
        </div>
      </div>
    </div>
    
    <div class="column">
      <div class="card">
        <div class="card-image">
          <figure class="image is-4by3">
            <a class="light-gallery light-gallery-single" data-group="light-gallery-1" href="http://lorempixel.com/400/300" target="_blank"><img src="http://lorempixel.com/400/300"></a>
          </figure>
        </div>
        <div class="card-content">
          <h2><a class="light-gallery light-gallery-single" data-group="light-gallery-2" href="http://lorempixel.com/400/300" target="_blank">Lorem Ipsum dolor site amet</a></h2>
        </div>
      </div>
    </div>
    
    <div class="column">
      <div class="card">
        <div class="card-image">
          <figure class="image is-4by3">
            <a class="light-gallery light-gallery-single" data-group="light-gallery-1" href="http://lorempixel.com/400/300" target="_blank"><img src="http://lorempixel.com/400/300"></a>
          </figure>
        </div>
        <div class="card-content">
          <h2><a class="light-gallery light-gallery-single" data-group="light-gallery-2" href="http://lorempixel.com/400/300" target="_blank">Lorem Ipsum dolor site amet</a></h2>
        </div>
      </div>
    </div>
    
    <div class="column">
      <div class="card">
        <div class="card-image">
          <figure class="image is-4by3">
            <a class="light-gallery light-gallery-single" data-group="light-gallery-1" href="http://lorempixel.com/400/300" target="_blank"><img src="http://lorempixel.com/400/300"></a>
          </figure>
        </div>
        <div class="card-content">
          <h2><a class="light-gallery light-gallery-single" data-group="light-gallery-2" href="http://lorempixel.com/400/300" target="_blank">Lorem Ipsum dolor site amet</a></h2>
        </div>
      </div>
    </div>
  </div>
</div>

var $galleries = [].slice.call(document.querySelectorAll('.light-gallery'));

if ($galleries.length > 0) {
  var lightGalleryOptions = {
    mode: 'lg-soft-zoom'
  };

  // Check first element have light-gallery-single class
  // Used for more control over light-gallery instances
  if ($galleries[0].classList.contains('light-gallery-single')) {
    var $parentNode = getParentElement($galleries[0], 'columns');

    // Check first element have data-group attribute
    if ($galleries[0].getAttribute('data-group')) {
      var groups = [];

      // Getting all data-group
      for (var i = 0, length = $galleries.length; i < length; i++) {
        var group = $galleries[i].getAttribute('data-group');

        // Checks unique group names
        if (!groups.includes(group)) {
          groups.push(group);
        }
      }

      // Start instances for each group
      for (var k = 0, length2 = groups.length; k < length2; k++) {
        lightGalleryOptions.selector = '.light-gallery-single[data-group="' + groups[k] + '"]';

        // if first parent element used, change parentNode to parentNode's parentNode
        if (k > 0) {
          $parentNode = $parentNode.parentNode;
        }

        lightGallery($parentNode, lightGalleryOptions);
      }
    } else {
      lightGalleryOptions.selector = '.light-gallery-single';

      lightGallery($parentNode, lightGalleryOptions);
    }
  }

}

// Finds closest parent element
function getParentElement(element, classname) {
  if (element.className) {
    if (element.className.split(' ').indexOf(classname) >= 0) {
      return element;
    }
  }

  return getParentElement(element.parentNode, classname);
}
Enes Sahin
  • 11
  • 1