Add a before/after slider to lightGallery

Question

Using lightGallery and would like to implement one inline gallery with a before/after slider on each image. Both are working fine using them independently: BeerSlider and lightGallery.

Is there somebody wo got this working? I tried several ways already without success. One of my attempt was to add the BeerSlider classes as a caption and append them to the lg-item element:

  // photo before after
  const beforeAfterContainer = document.getElementById("before-after");
  const beforeAfterInlineGallery = lightGallery(beforeAfterContainer, {
    container: beforeAfterContainer,
    dynamic: true,
    appendSubHtmlTo: ".lg-inner",
    dynamicEl: [
      {
        src: "https://loremflickr.com/640/480?random=1",
        thumb: "https://loremflickr.com/320/240?random=1",
        subHtml: `<div id="beer-slider" class="beer-slider" data-beer-label="before" data-beer-start="50">
            <img src="https://loremflickr.com/640/480?random=1" />
            <div class="beer-reveal" data-beer-label="after">
                <img src="https://loremflickr.com/640/480?random=2" />
            </div>
                </div>`,
      }
     //....
    ],
  });
  beforeAfterInlineGallery.openGallery();

  $("#beer-slider").each(function (index, el) {
    $(el).BeerSlider({ start: $(el).data("beer-start") });
  });

Thats not working at all. Additionally I tried to use the lightGallery selector to get the Beer Slider reveal image ignored by lightGallery. But this is not working at all, as one instance destroys the others (as far as I understand those scripts correctly).

Any ideas how to get both working together? I really don't need to use BeerSlider - if somebody got any other before/after plugin working with lightGallery I can switch to it.

Thanks Guys!

Answer 1

Ok, got this working. I used the dynamic inline gallery. But it may work with other lightGallery collections as well. This is working even with picture tag.

• disable drag and swipe in the lightGallery options (JS)
• append subHtml to '.lg-item'
• insert the beer slider container, main and reveal as subHtml of lightgallery
• adjust the lightGallery CSS for the specific use case

HTML

<div class="container-flex">
  <div class="beerSlider" id="before-after"></div>
</div>

JS

  const beforeAfterContainer = document.getElementById("before-after");
  const beforeAfterInlineGallery = lightGallery(beforeAfterContainer, {
    container: beforeAfterContainer,
    dynamic: true,    
    appendSubHtmlTo: ".lg-item",
    enableSwipe: false,
    enableDrag: false,
//  ... other options
    dynamicEl: [
      {
        src: "https://loremflickr.com/640/480?random=1",
        sources: generatePictureSources("welcome-carousel", "misc"), // your picture set(s)
        thumb: "https://loremflickr.com/320/240?random=1",
        subHtml: `<div id="photo-before-after" class="container-flex beerSlider-test">
        <div id="beer-slider" class="beer-slider" data-beer-label="before" data-beer-start="50">
          <picture class="lgAccept">
            <source
//          ..... your picture sources
            />
            <img src="https://loremflickr.com/640/480?random=1" alt="image" loading="lazy" />
          </picture>
          <div class="beer-reveal" data-beer-label="after">
            <picture>
              <source
//          ..... your reveal sources
              />
              <img src="https://loremflickr.com/640/480?random=2" alt="image presenting video work" loading="lazy" />
            </picture>
          </div>
        </div>
      </div>`,
      },

    ],
  });
  beforeAfterInlineGallery.openGallery();

  $.fn.BeerSlider = function (options) {
    options = options || {};
    return this.each(function () {
      new BeerSlider(this, options);
    });
  };

  $(".beer-slider").each(function (index, el) {
    $(el).BeerSlider({ start: $(el).data("beer-start") });
  });

CSS

.beerSlider {
  .lg-img-wrap {
    display: none;
  }

  .lg-sub-html {
    padding: 0;
    color: var(--clr-font-dark);
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
  }
}