在fancybox裏顯示html內容？

我想弄清楚如何在下面顯示一些html內容並在fancybox中打開圖像。我搜索了四周，但只能找到如何顯示只有 html內容打開窗口。我非常感謝任何幫助。謝謝。我做了一個小提琴here 在fancybox裏顯示html內容？

<a id="single_image" href="http://fancyapps.com/fancybox/demo/1_s.jpg" width="400"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" width="100"></a> 

<p> 
Place this html content below the open image 
</p>

jQuery的

$("a#single_image").fancybox();

來源

2016-09-30 JulianJ

你的小提琴充滿無效的HTML（超關閉標籤和自我封閉的標籤。如果你把'/>'在開放標籤的結束，你不需要結束標記。如果你想要一個結束標籤，刪除斜槓）你也沒有一個ID爲'single_image'的錨點，就像你正在尋找你的JQuery一樣。 – DBS

哦，是的，道歉，我會解決這個問題。 – JulianJ

類似http://jsfiddle.net/outcgrjj/或者你想動態獲得'p'內容嗎？ – depperm

我修改的例子JSFiddles的一個從他們tips and tricks部分頁面做什麼，我認爲你是後。

Fancybox有一個選項，可以在圖像加載到它們的佈局後運行一些JS，我們可以使用它來將你選擇的html附加到fancybox元素中。

$("a#single_image").fancybox({ 
 
    afterLoad: function() { 
 
    this.outer.append("<div>" + document.getElementById("content").innerHTML + "</div>"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" rel="stylesheet"/> 
 
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script> 
 

 
<a id="single_image" href="http://fancyapps.com/fancybox/demo/1_s.jpg" width="400"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" width="100"></a> 
 
<p id="content"> 
 
    Place this html content below the open image 
 
</p>

來源

2016-09-30 15:41:41 DBS

在fancybox裏顯示html內容？

回答

相關問題