Fancybox内のdivの内容を置換する

Question

FancyBoxを使用してWebアプリケーションイメージギャラリーを構築しています。今すぐ私は のカスタムdivをポップアップ（画像）に追加して、画像固有のリンクを配置する必要があります。

別の画像の隣にあるをクリックするたびに、ツールのdivの内容を置き換えることはできますか？ また、このdivをポップアップの内側から追加することは可能ですか？

これは私のコードです：

$(".iframe").fancybox ({ 

afterShow: function() { 

var toolbar = '<div id="tools">LINKS COME HERE</div>'; 

$(".fancybox-inner").append(toolbar); 

}, 

maxWidth : 1200, 

maxHeight : 550, 

width  : '90%', 

height  : '90%', 

autoSize : false, 

closeBtn : false, 

openEffect : 'none', 

closeEffect : 'none', 

nextEffect: 'none', 

prevEffect: 'none', 

padding: 0, 

scrolling: 'no' 

}); 

Answer 1

私はあなたが

<div id="appendContent" style="display: none;"> 
<div>content with links to be appended to the first image</div> 
<div>content with links to be appended to the second image</div> 
<div>content with links to be appended to the third image</div> 
... etc. 
</div> 

のようなドキュメントの分離（隠された）セクションの各画像について（付加される divの）コンテンツを作成することができると思います

上記の構造では、ギャラリー内の各divの画像の数が同じであることが前提です。

<a href="image01.jpg" class="fancybox" rel="gallery">image 01</a> 
<a href="image02.jpg" class="fancybox" rel="gallery">image 02</a> 
<a href="image03.jpg" class="fancybox" rel="gallery">image 03</a> 
etc. 

また、あなたのCSSスタイルシートの中に追加さdivのCSSセレクタを作成するのではなくのような.css()方法（あなたの他の質問で提案されているように）使用することができます

#tools { 
position: absolute; 
z-index: 99999; 
bottom: 0px; 
height: 20px; 
border: 1px solid #ccc; 
background: #fff; 
width: 100%; 
} 

...またはあなたが必要とするスタイル設定を。

次に、各divの内容を取り出し、ギャラリーをナビゲートしながら対応するイメージに動的に追加します。 afterShowコールバックオプションを使用して

、あなたができる：

$(document).ready(function() { 
$(".fancybox").fancybox({ 
    afterShow: function(){ 
    var toolbar = "<div id='tools'>" + $("#appendContent div").eq(this.index).html() + "</div>"; 
    $(".fancybox-inner").append(toolbar); 
    } 
}); // fancybox 
}); // ready