你如何在 Wordpress 上使用 PhotoSwipe？答案

【问题标题】：How do you use PhotoSwipe on Wordpress?你如何在 Wordpress 上使用 PhotoSwipe？
【发布时间】：2012-04-29 01:05:14
【问题描述】：

我正在尝试在 Wordpress（不是插件）上使用 Photoswipe。在过去的 12 个小时里，我一直在工作，但无法让它工作。我可以详细说明，但我认为在这一点上，我只需要一个全新的解决方案。那么，重申一下我的问题，您如何在 Wordpress 上使用 Photoswipe？

如果有人有过这方面的经验，或者知道教程，请告诉我。

谢谢

【问题讨论】：

标签： jquery wordpress photo photoswipe

【解决方案1】：

应该像...一样简单

把它放在你的主题 header.php 中的<head>

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/klass.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/code.photoswipe-3.0.4.min.js"></script>

...也将其添加到您的<head> 下方

<script type="text/javascript">
    $(document).ready(function(){
        var myPhotoSwipe = $("#gallery a").photoSwipe({
            enableMouseWheel: false,
            enableKeyboard: false

            // add configuration options here

        });
    });
</script>

确保不要忘记将这些 javascript 文件放在主题文件夹中。如您所见，我在您的主题中放置了一个名为“js”的子文件夹

使用您的帖子图像和链接，以 html 模式在您的帖子中构建您的图库，并包含在如下所示的无序列表中。

确保无序列表的 id 与脚本的 var myPhotoSwipe = $("#gallery a").photoSwipe({ 部分匹配。

<ul id="gallery">
    <li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></li>
    <li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></li>
    <li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></li>
    <li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></li>
    <li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></li>
    <li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></li>
</ul>

脚本不必进入你的脑海，但可以在结束 </body> 标记之前。

理论上这应该做点什么。然后你可以在其他地方设置样式或构建它。

【讨论】：