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

替换Fancybox中附加div的内容

1 个答案: