PhotoSwiper的Zoom使用thumbnail来控制

思路

1. 打开zoom的时候, 给body加上thumbnail
2. thumbnail的图片可以copy一份
3. 点击thumbnail的时候, 可以切换zoom图片
4. 切换zoom图片的时候, thumbnail也同步切换

具体实现

js

    let lightbox = new PhotoSwipeLightbox({
      gallery: "#image-gallery",
      children: "a",
      pswpModule: PhotoSwipe,
      // options
      bgOpacity: 0.85,
      arrowPrevSVG: leftArrowSVGString,
      arrowNextSVG: rightArrowSvgString,
      wheelToZoom: true,
    });

    lightbox.addFilter("useContentPlaceholder", () => {
      return false;
    });

    lightbox.init();

    if (!isMobile) {
      lightbox.on("beforeOpen", () => {
        const pswp = lightbox.pswp;

        $("body").append('<div class="photoSwipe_innerthumbs"></div>');
        $("#image-gallery img").clone().appendTo("div.photoSwipe_innerthumbs");

        $("div.photoSwipe_innerthumbs img")
          .eq(pswp.currIndex || 0)
          .addClass("active");

        //Handle the swaping of images
        $("body").on("click", "div.photoSwipe_innerthumbs img", function (e) {
          $("div.photoSwipe_innerthumbs img").removeClass("active");
          $(this).addClass("active");
          pswp.goTo($("div.photoSwipe_innerthumbs img").index($(this)));
        });
      });

      lightbox.on("change", function () {
        const pswp = lightbox.pswp;

        $("div.photoSwipe_innerthumbs img").removeClass("active");
        // add new matched
        $("div.photoSwipe_innerthumbs img")
          .eq(pswp.currIndex || 0)
          .addClass("active");
      });

      lightbox.on("close", function () {
        $(".photoSwipe_innerthumbs").remove();
      });
    }

    return () => {
      lightbox.destroy();
      lightbox = null;
    };

css

div.photoSwipe_innerthumbs{
    position: fixed; 
    left: 80px;
    top: 50%;
    transform: translate(0, -50%);
    display: flex;
    flex-direction: column;
    z-index: 1000000;
}
div.photoSwipe_innerthumbs img{
    max-width: 88px; 
    cursor: pointer;
    margin: 8px;
    opacity: 0.5;
}
.active {
    opacity: 1 !important;
}

参考 codepen.io/Grawl/pen/E… photoswipe.com/methods/#ph…