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

Question

I'm trying to implement photoswipe into my site but I'm not sure how to go about it for a wordpress site..

I'm using acf repeater to display all images in a grid. I'd like to display the photoswipe gallery when an image is clicked.

I've read the documentation for photoswipe, but I don't understand how to use it with a repeater field.

Any help would be appreciated..

Answer 1

In my opinion, sack off photoswipe and use lightgallery .

Photoswipe is bloated and lightgallery does the same shiz with sweeter options.

If your outputting your repeater field images grid in semantic fashion then this will do the trick...

See jsfiddle example.

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