javascript - 单击缩略图显示手动定义的图库(花式框)

Question

我正在为 Wordpress 使用一个主题，其中已经包含了 fancybox。一切都按照预期的方式正常、流畅、干净地工作。 现在有一些我想做的事情，不幸的是我没有这方面的知识:

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

我相信有办法做到这一点，我在另一个问题 (Fancy box - how to show slideshow from a single thumbnail) 上找到了这段代码片段，但无论我多么努力，它都无法正常工作(我或多或少可以“阅读”代码, 但写它还不是我能做的事!)

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

欢迎回答!如果您需要更多信息，请告诉我!

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

<p></p>

<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”值为“图库”。现在，我只需要在我的帖子中添加任意数量的文件，以便幻灯片显示它们，代码如下:

<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 的帮助，如果这个答案对其他人没有帮助，至少我很高兴让这个按照我想要的方式工作!