Multiple Galleries with Swiper.js

[roccopung]

Hi,

I am using Lightgallery in combination with Swiper.js. LightGallery opens once clicking on a slide from a Swiper carousel. My issue is that I am displaying multiple galleries (multiple carousels) on the same page, and my setup apparently sees all of them as one long gallery. How can I fix this? I guess I should create dynamic IDs and call them via dynamicEl, but I'm very new to javascript and have no clue how to do that.

Here's my PHP setup within a foreach loop

<?php foreach($pages->children()->listed() as $project ): ?>
<li id="<?= $project->slug() ?>" class="card">
      <div class="card-carousel-container">
          <div class="swiper swiperGrid">
            <ul class="swiper-wrapper">

                <?php foreach($project->images()->sortBy('sort') as $image ): ?>
                    <li class="swiper-slide">
                      <a class="lightgallery-open">
                        <img src="<?= $image->url() ?>" data-src="<?= $image->url() ?>" alt="<?= $project->info()->text() ?>">
                      </a>
                    </li>
                <?php endforeach ?>

            </ul>
          </div>
    </div>
  </li>
<?php endforeach ?>

and here's my javascript setup:

const gsBgImgSelector = ".swiperGrid .swiper-slide img";

const dynamicEl = [...document.querySelectorAll(gsBgImgSelector)].map(
  (sliderImg) => {
    return {
      src: sliderImg.src,
      thumb: sliderImg.src,
      subHtml: sliderImg.alt,
    };
  }
);

console.log(dynamicEl);

const dynamicGallery = document.querySelector(".swiperGrid");

const popup = lightGallery(dynamicGallery, {
  plugins: [lgHash, lgVideo],
  selector: '.swiper-slide:not(.swiper-slide-duplicate) > div',
  dynamic: true,
  loop: true,
  autoplayVideoOnSlide: true,
  dynamicEl,
});

console.debug(popup);

dynamicGallery.addEventListener("click", () => {
  popup.openGallery(0);
});

[...document.querySelectorAll(".swiper-slide")].map((slide, idx) => {
  slide.addEventListener("click", () => {
    popup.openGallery(idx);
  });
});

Can you please help me out with this? Thank you very much

[Sachin Neravath]

Hey @roccopung,

Yes, you need to create multiple galleries. But, you can make use of the existing classes instead of adding separate ids to make the process easier.

I've created a sample code snippet that demonstrates how to create multiple galleries based on your HTML markup.

Please note - This is just a sample code and not tested. Just wanted to give you an idea.

let me know if you face any issues

const swiperContainers = document.querySelectorAll('.swiperGrid');

swiperContainers.forEach((container) => {
	const gsBgImgSelector = '.swiper-slide img';

	const dynamicEl = [...container.querySelectorAll(gsBgImgSelector)].map(
		(sliderImg) => {
			return {
				src: sliderImg.src,
				thumb: sliderImg.src,
				subHtml: sliderImg.alt,
			};
		}
	);

	console.log(dynamicEl);

	const dynamicGallery = container;

	const popup = lightGallery(dynamicGallery, {
		plugins: [lgHash, lgVideo],
		dynamic: true,
		loop: true,
		autoplayVideoOnSlide: true,
		dynamicEl,
	});

	console.debug(popup);

	dynamicGallery.addEventListener('click', () => {
		popup.openGallery(0);
	});

	[...container.querySelectorAll('.swiper-slide')].map((slide, idx) => {
		slide.addEventListener('click', () => {
			popup.openGallery(idx);
		});
	});
});

[roccopung]

Hi!

Thank you so much. It works well, and now I can open every gallery separately. The only issue is now that when I click on the navigation buttons of Swiper (that are contained inside the ".swiperGrid") it triggers the lightGallery automatically. I will see if I find a solution for that. Many thanks!

[Sachin Neravath]

Is this causing the issue?

dynamicGallery.addEventListener('click', () => {
  popup.openGallery(0);
});

[roccopung]

Yes! You're right, I just had to remove that part and now everything works like a charm. Thanks so so much, I had been stuck for days!!!