jquery - 替换 Fancybox 中附加 div 的内容

Question

我正在使用 FancyBox 构建一个网络应用程序图像库。现在我正在追加弹出窗口(图像)的自定义 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