Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
711 views
in Technique[技术] by (71.8m points)

jquery - Replace content of appended div in Fancybox

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.

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?

This is my code:

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

});
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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>

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.

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.

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

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...