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

Question

我正在尝试在我的网站中实现 photoswipe，但我不确定如何为 wordpress 网站实现它..

我正在使用 acf 中继器在网格中显示所有图像。单击图像时，我想显示 photoswipe 画廊。

我已经阅读了 photoswipe 的文档，但我不明白如何将它与转发器字段一起使用。

任何帮助将不胜感激..

Answer 1

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

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

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

参见 jsfiddle 示例。

$('.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>

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

How to implement photoswipe into wordpress custom theme?

javascript

php

wordpress

advanced-custom-fields

photoswipe