1

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

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

谢谢

4

1 回答 1

0

应该很简单...

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

<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 与myPhotoSwipe = $("#gallery a").photoSwipe({脚本的 var 部分匹配。

<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>标记之前。

从理论上讲，这应该做一些事情。然后你可以在其他地方设置样式或构建它。

于 2012-04-17T18:49:15.750 回答