Question

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'

});

Answer 1

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