當內容爲html時，Fancybox無法生成幻燈片

我不知道它是一個錯誤，還是隻是fancybox不允許的東西。是否可以擁有帶HTML元素的圖庫？我試圖做幾個小時，但無法找到它的好方法。當內容爲html時，Fancybox無法生成幻燈片

的HTML：

<a href="#" class="fancy" data-fancybox-type="html" rel="fancy">See more</a> 
<div class="content">my content 1</div> 
<a href="#" class="fancy" data-fancybox-type="html" rel="fancy">See more</a> 
<div class="content">my content 2</div> 
<a href="#" class="fancy" data-fancybox-type="html" rel="fancy">See more</a> 
<div class="content">my content 3</div>

的JavaScript：

jQuery(".fancy").on('click', function(){ 
    jQuery.fancybox({ 
     content: jQuery(this).next().html(), 
     scrolling: 'no', 
     autoSize: false , 
     height:250, 
     width:630, 
     padding:0 
    }); 
    return false; 
});

來源

2014-01-29 M4nch4k

檢查內容：HTTP：//計算器。com/questions/3877282/add-dynamic-html-fancy-box有細微的差異。 1. asign jQuery（this）.next（）。html（）;在.fancybox（）之外2.添加''就像鏈接 – caramba

可能有一個html元素的畫廊，但是您需要先了解您的意思。

如果你想要的是有「我的內容1」，「我的內容2」和「我的內容3」（如在你的上面的代碼）一個的fancybox的畫廊內，那麼你必須正確地構建你的html。

首先，每一個環節都應該通過針對其ID喜歡指向一個特定的內容：

<a href="#content1" class="fancy" rel="fancy">See more (content 1)</a>

...上面的線意味着你有content 1 HTML這樣的：

<div id="content1" class="content">my content 1</div>

。 ..所以文字my content 1將是圖庫中第一項的實際content（鏈接共享相同的rel屬性將成爲fancybox圖庫的一部分）

您可以將裏面所有的有針對性的內容隱藏div，如：

，並留下您的聯繫僅可見

<a href="#content1" class="fancy" rel="fancy">See more (content 1)</a> 
<a href="#content2" class="fancy" rel="fancy">See more (content 2)</a> 
<a href="#content3" class="fancy" rel="fancy">See more (content 3)</a>

見畫廊在這個JSFIDDLE

在工作另一方面，如果您使用data-fancybox-type="html"屬性，fancybox將實際解析的html代碼，所以如果你有一個鏈接，如上面的例子，例如

<a href="#content1" class="fancy" data-fancybox-type="html" rel="fancy">See more (content 1)</a>

...的fancybox的內容將不會被my content 1作爲的jsfiddle以上，但#content1稱，因爲會的fancybox解析鏈接的HTML而不是

見新JSFIDDLE

來源

2014-01-30 07:52:13 JFK

非常感謝，它真的幫助我 – M4nch4k

$(document).ready(function(){ 
    jQuery(".fancy").on('click', function(){ 
     var content = $(this).next().html(); 
     $.fancybox({ 
      'content': content 
     }); 
     return false; 
    }); 
});

fiddle here（沒有添加所有選項）

確保包括正確的jQuery和的fancybox腳本見here

來源

2014-01-29 21:26:30 caramba

我想我的問題還不夠清楚。我想用它作爲幻燈片，通過下一個按鈕傳遞到下一個項目，然後通過後退按鈕傳遞到項目。 – M4nch4k

當內容爲html時，Fancybox無法生成幻燈片

回答

相關問題