從縮略圖點擊（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）顯示手動定義的圖庫

回答

相關問題