fancybox内にhtmlコンテンツを表示しますか？

Question

下記のhtmlコンテンツを表示する方法と画像を開く方法を把握しようとしています（fancybox）。 私は周囲を検索しましたが、の表示方法は、開いているウィンドウ内ののHTMLコンテンツのみでした。私は本当に助けに感謝します。ありがとう。 私はあなたが後にしていると思う何をするために彼らのtips and tricksセクションページから例JSFiddlesのいずれかを変更したフィドルhere

<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(); 

Answer 1

作りました。

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>