4

我正在为 Wordpress 使用一个主题，其中已经包含了 fancybox。一切正常，顺利和干净，就像它应该的那样。现在我想做一些事情，不幸的是我没有这方面的知识：

单击我发表的帖子的第一个缩略图时，会出现一个花式幻灯片并显示所有缩略图。很酷，但我希望这个幻灯片显示的不仅仅是那些缩略图。可能有 10 或 20 个文件，在本地托管。

我相信有办法做到这一点，我在另一个问题上找到了这个代码片段（Fancy box - how to show slideshow from a single thumbnail）但无论我多么努力都无法让它工作（我可以更多或更少的“读取”代码，但编写它还不是我能做的！）

所以，是的，简单地说，我希望我的“post1”fancybox 显示 X 图片，而不是缩略图。而且，能够用 X 个不同的帖子重复这个技巧，所以我需要找到一种干净的方法来做到这一点，而不仅仅是一些结构技巧。我试图在我的帖子的 html 部分中包含上述代码，但没有奏效。

随意回答！如果您需要更多信息，请告诉我！

我相信这是我的 HTML 帖子中有趣的部分： 



<div id="product-slider">
        <div id="product-slides">
                            <div class="item-slide">
    <a href="http://www.prepadem.fr/wp-content/uploads/2012/10/cheetah-picture1.jpg" rel="gallery" class="fancybox">
        <img src="http://www.prepadem.fr/wp-content/uploads/et_temp/cheetah-picture1-43518_298x226.jpg" alt="" width =298 height=226 />     <span class="overlay"></span>
   </a>
</div> <!-- .item-slide -->
                            <div class="item-slide">
    <a href="http://www.prepadem.fr/wp-content/uploads/2012/10/Angelique_thumb1.jpg" rel="gallery" class="fancybox">
        <img src="http://www.prepadem.fr/wp-content/uploads/et_temp/Angelique_thumb1-724863_267x226.jpg" alt="" width =298 height=226 />        <span class="overlay"></span>
   </a>
</div> <!-- .item-slide -->
                    </div> <!-- #product-slides -->

                    <div id="product-thumbs">
                                    <a href="#" class="active" rel="1">
                        <img src="http://www.prepadem.fr/wp-content/uploads/et_temp/cheetah-picture1-43518_69x69.jpg" alt="" width =69 height=69 />                     <span class="overlay"></span>
                    </a>
                                    <a href="#" class="last" rel="2">
                        <img src="http://www.prepadem.fr/wp-content/uploads/et_temp/Angelique_thumb1-724863_69x69.jpg" alt="" width =69 height=69 />                        <span class="overlay"></span>
                    </a>
                            </div> <!-- #product-thumbs -->
            </div> <!-- #product-slider -->
4

1 回答 1

0

在阅读了几个问题、外部链接等之后，这就是我发现我的问题的方式，以及我认为它是如何工作的：（对不起，如果这听起来很基本，但我会以我希望阅读的方式解释它它！新手语言：ON）

由于我的 WP 主题已经激活了 fancybox，因此我无需在我的帖子中的 HTML 代码中调用它。在我的帖子中检查我的源代码时（带有 1 个缩略图且未添加代码），我看到生成了以下代码：

<div id="product-slider">
        <div id="product-slides">
                            <div class="item-slide">
    <a href="http://www.prepadem.fr/wp-content/uploads/2012/10/cheetah-picture1.jpg" rel="gallery" class="fancybox">
        <img src="http://www.prepadem.fr/wp-content/uploads/et_temp/cheetah-picture1-43518_298x226.jpg" alt="" width =298 height=226 />     <span class="overlay"></span>
   </a>
</div> <!-- .item-slide -->
                    </div> <!-- #product-slides -->

因此，我对幻灯片的“rel”值是“gallery”。现在，我只需要在我的帖子中添加任意数量的文件，幻灯片就可以显示它们，代码如下：

<a class="fancybox" rel="gallery" href="image02.jpg"></a>
<a class="fancybox" rel="gallery" href="image03.jpg"></a>
<a class="fancybox" rel="gallery" href="image04.jpg"></a>

就是这样，我可以添加任意数量的图片，而它们都不会显示为缩略图！无论如何，感谢 Toni 和 Janis 的帮助，如果这个答案对其他人没有帮助，至少我很高兴能按照我想要的方式工作！

于 2012-10-20T13:24:19.010 回答