如何将 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>