替换Fancybox中附加div的内容 [英] Replace content of appended div in Fancybox

问题描述

我正在使用FancyBox构建网络应用程序图片库.现在我要附加 自定义div到弹出式窗口(图像)，我需要在该窗口中放置图像特定的链接.

I am building a web app image gallery using FancyBox. Right now I am appending a custom div to the popup (image) where I need to place image specific links.

如何在每次单击另一张图像旁边的时候替换div工具的内容? 还是更好，是否可以从弹出窗口中附加此div?

How can I replace the content of the tools div everytime I click next to another image? Or better yet, is it possible to append this div from inside the popup?

这是我的代码:

$(".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'

});

推荐答案

我认为您可以在文档的单独(隐藏)部分中为每个图像创建(要添加的div的)内容，例如

I think you can create the content (of the div to be appended) for each image in a separated (hidden) section of your document like

<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的图像数量均应相同，例如:

The structure above assumes that you should have an equal number of images for each div in your gallery like:

<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()方法(如您在其他问题中所建议的那样)，例如:

Additionally you can create a css selector for the appended div within your css stylesheet rather than using the .css() method (as suggested in your other question) like:

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

...或您需要的样式设置.

...or the style settings you need.

然后拉出每个div的内容，并在浏览图库时动态将其附加到相应的图像上.

Then pull the content of each div and append it dynamically to the corresponding image while navigating through the gallery.

使用afterShow回调选项，您可以执行以下操作:

using the afterShow callback option, you could do:

$(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的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！