如何将 photoswipe 实现到 wordpress 自定义主题中？

Question

我正在尝试在我的网站中实现 photoswipe，但我不确定如何为 wordpress 网站实现它。我正在使用 acf 中继器在网格中显示所有图像。单击图像时，我想显示 photoswipe 画廊。我已经阅读了 photoswipe 的文档，但我不明白如何将它与转发器字段一起使用。任何帮助，将不胜感激..

Answer 1

在我看来，取消 photoswipe 并使用lightgallery。

Photoswipe 臃肿，而 lightgallery 做同样的事，但有更甜美的选择。

如果您以语义方式输出中继器字段图像网格，那么这将起到作用......

$('.grid').lightGallery({

  selector: '.lightgallery'

});

.grid {

  width: 100%;

  height: 100%;

}

FIGURE {

  margin: 0;

  width: 25%;

  display: block;

  float: left;

  position: relative;

  overflow: hidden;

}

FIGURE A {

  display: block;

  width: 100%;

}

FIGURE A::after {

  content: '';

  display: block;

  padding-top: 100%;

}

FIGURE A IMG {

  height: 100%;

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

}

<div class="grid">

  <figure>

    <a href="https://i.imgur.com/q5Y5RCH.png" class="lightgallery">

      <img src="https://i.imgur.com/q5Y5RCH.png" alt="" />

    </a>

  </figure>

  <figure>

    <a href="https://i.imgur.com/8HjXPXD.png" class="lightgallery">

      <img src="https://i.imgur.com/8HjXPXD.png" alt="" />

    </a>

  </figure>

  <figure>

    <a href="https://i.imgur.com/vUDcfcy.png" class="lightgallery">

      <img src="https://i.imgur.com/vUDcfcy.png" alt="" />

    </a>

  </figure>

  <figure>

    <a href="https://i.imgur.com/okTDHas.png" class="lightgallery">

      <img src="https://i.imgur.com/okTDHas.png" alt="" />

    </a>

  </figure>

  <figure>

    <a href="https://i.imgur.com/x7ZYW4i.png" class="lightgallery">

      <img src="https://i.imgur.com/x7ZYW4i.png" alt="" />

    </a>

  </figure>

  <figure>

    <a href="https://i.imgur.com/EYTCssm.png" class="lightgallery">

      <img src="https://i.imgur.com/EYTCssm.png" alt="" />

    </a>

  </figure>

  <figure>

    <a href="https://i.imgur.com/3sAFPmL.png" class="lightgallery">

      <img src="https://i.imgur.com/3sAFPmL.png" alt="" />

    </a>

  </figure>

  <figure>

    <a href="https://i.imgur.com/IqLrd0o.png" class="lightgallery">

      <img src="https://i.imgur.com/IqLrd0o.png" alt="" />

    </a>

  </figure>

  <figure>

    <a href="https://i.imgur.com/6JplNl6.png" class="lightgallery">

      <img src="https://i.imgur.com/6JplNl6.png" alt="" />

    </a>

  </figure>

  <figure>

    <a href="https://i.imgur.com/6X5GKWJ.png" class="lightgallery">

      <img src="https://i.imgur.com/6X5GKWJ.png" alt="" />

    </a>

  </figure>

  <figure>

    <a href="https://i.imgur.com/SefTwI1.png" class="lightgallery">

      <img src="https://i.imgur.com/SefTwI1.png" alt="" />

    </a>

  </figure>

  <figure>

    <a href="https://i.imgur.com/qBmDrTU.png" class="lightgallery">

      <img src="https://i.imgur.com/qBmDrTU.png" alt="" />

    </a>

  </figure>

  <figure>

    <a href="https://i.imgur.com/x7ZYW4i.png" class="lightgallery">

      <img src="https://i.imgur.com/x7ZYW4i.png" alt="" />

    </a>

  </figure>

  <figure>

    <a href="https://i.imgur.com/EYTCssm.png" class="lightgallery">

      <img src="https://i.imgur.com/EYTCssm.png" alt="" />

    </a>

  </figure>

  <figure>

    <a href="https://i.imgur.com/3sAFPmL.png" class="lightgallery">

      <img src="https://i.imgur.com/3sAFPmL.png" alt="" />

    </a>

  </figure>

  <figure>

    <a href="https://i.imgur.com/IqLrd0o.png" class="lightgallery">

      <img src="https://i.imgur.com/IqLrd0o.png" alt="" />

    </a>

  </figure>

  <figure>

    <a href="https://i.imgur.com/6JplNl6.png" class="lightgallery">

      <img src="https://i.imgur.com/6JplNl6.png" alt="" />

    </a>

  </figure>

  <figure>

    <a href="https://i.imgur.com/6X5GKWJ.png" class="lightgallery">

      <img src="https://i.imgur.com/6X5GKWJ.png" alt="" />

    </a>

  </figure>

  <figure>

    <a href="https://i.imgur.com/SefTwI1.png" class="lightgallery">

      <img src="https://i.imgur.com/SefTwI1.png" alt="" />

    </a>

  </figure>

  <figure>

    <a href="https://i.imgur.com/qBmDrTU.png" class="lightgallery">

      <img src="https://i.imgur.com/qBmDrTU.png" alt="" />

    </a>

  </figure>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.7.0/css/lightgallery.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.7.0/js/lightgallery-all.min.js"></script>