添加一个之前/之后的滑块到 lightGallery

Question

使用 lightGallery 并希望在每个图像上实现一个带有前/后滑块的内联画廊。 两者都可以独立使用它们：BeerSlider 和 lightGallery.

有人让这个工作吗？ 我尝试了几种方法都没有成功。 我的尝试之一是将 BeerSlider 类添加为标题并将它们附加到 lg-item 元素：

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

那根本不起作用。此外，我尝试使用 lightGallery 选择器让 Beer Slider 显示图像被 lightGallery 忽略。但这根本不起作用，因为一个实例会破坏其他实例（据我正确理解这些脚本）。

有什么想法可以让两者一起工作吗？ 我真的不需要使用 BeerSlider - 如果有人在使用 lightGallery 之前/之后有任何其他插件，我可以切换到它。

谢谢大家！

Answer 1

好的，开始工作了。我使用了动态内联画廊。但它也可以与其他 lightGallery 系列一起使用。 这甚至适用于图片标签。

• 在 lightGallery 选项中禁用拖动和滑动 (JS)
• 将 subHtml 附加到 '.lg-item'
• 插入啤酒滑块容器，main 和 reveal 作为 lightgallery 的 subHtml
• 针对特定用例调整 lightGallery CSS

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