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

我正在使用已包含fancybox的Wordpress主题。一切工作正常，顺利和干净，它应该的方式。现在有件事我想要做，但不幸的是我没有这方面的知识：从缩略图点击（fancybox）显示手动定义的图库

当我点击我公开的帖子的第一个缩略图时，出现一个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 -->

来源

2012-10-19 Maldito

你好，你可以发布你的html和js代码到目前为止？ –

你从http://fancyapps.com/fancybox/#useful查看了演示＃11吗？ – Janis

@Toni HTML添加。根据js代码，我会在哪里找到你需要看到的那个？ – Maldito

阅读几个问题，外部链接多后，我这是怎么想通了我的问题，以及它是如何，我相信工作：（很抱歉，如果这听起来很基本，但我只是要解释它的方式，我会喜欢看它！新手语言：ON）

因为fancybox已经被我的WP主题激活，所以没有必要给我打电话它在我的文章的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 -->

因此，对于幻灯片我的“相对”值“画廊”。现在，我只需要添加尽可能多的文件，我想在我的岗位的幻灯片显示它们，用下面的代码：

<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-20 13:24:19 Maldito

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

回答

相关问题