Fancybox: Prepend each relative html content from a list

Question

I'm trying to prepend some html content into a fancybox iframe modal. The page in question has a list of documents each with its own extra html content to be passed to the fancybox modal:

<div class="doc">
  <a href="some_documentA.pdf" class="fancyDoc" data-fancybox-type="iframe">Document A</a>
  <div class="fancyShareButtons" style="display: none;"><a>Love me</a></div>
</div>
<div class="doc">
  <a href="some_documentB.pdf" class="fancyDoc" data-fancybox-type="iframe">Document B</a>
  <div class="fancyShareButtons" style="display: none;"><a>No, love me</a></div>
</div>
<div class="doc">
  <a href="some_documentC.pdf" class="fancyDoc" data-fancybox-type="iframe">Document C</a>
  <div class="fancyShareButtons" style="display: none;"><a>Actually, its me you want</a></div>
</div>

I've followed the advice from a previous post and modified it slightly for my needs:

$(".fancyDoc").click(function() {
 $.fancybox({
    fitToView   : false,
    width       : '90%',
    height      : '90%',
    autoSize    : false,
    openEffect  : 'none',
    closeEffect : 'none',
    closeClick : true,
    afterShow: function(){
       var shareLinks = "<div class='fancyTools clearfix'>" + $(".fancyShareButtons").html() + "</div>";
      $('.fancybox-inner').prepend(shareLinks);
},

    afterClose: function(){
     $(".fancybox-inner .fancyTools").remove();
    },

});

Problem is that only the content from the first document's hidden .fancyShareButtons div is prepended to all the listed documents. Obviously I need to specify that for each linked doc I want to prepend its relative content.

I've stabbed a bit with each.function and $(this) but to no avail.

Any pointers?

Thanks

Answer 1

Try something like this

$(".fancyDoc").click(function() {
    var that = $(this);
     $.fancybox({
        fitToView   : false,
        width       : '90%',
        height      : '90%',
        autoSize    : false,
        openEffect  : 'none',
        closeEffect : 'none',
        closeClick : true,
        afterShow: function(){
           var shareLinks = "<div class='fancyTools clearfix'>" + that.next("div.fancyShareButtons").html() + "</div>";
          $('.fancybox-inner').prepend(shareLinks);
    },

        afterClose: function(){
         $(".fancybox-inner .fancyTools").remove();
        },

    });