Question

我正在使用已包含fancybox的Wordpress主题。一切都工作得很好，光滑，干净，按照预期的方式。现在有一些我想做的事情，不幸的是我没有它的知识：

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

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

所以是的，简单地说，我希望我的“post1”花式框能够显示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 -->

Answer 1

在阅读了几个问题，外部链接等等之后，这就是我如何弄清楚我的问题，以及我如何相信它的工作原理:(对不起，如果这听起来很基本，但我会以我的方式解释它喜欢读它！新手语：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的帮助，如果这个答案对其他人没有帮助，至少我很高兴能按照我想要的方式工作！

从缩略图单击（fancybox）显示手动定义的库

1 个答案: