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的要追加）爲每個圖像像

<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有相同數量的圖像，例如：

<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