Fancybox: Get the ID of the bound item / item

Question

I am trying to get the id of the clicked / displayed item in fancybox. I tried both "this.id" and "this.attr (" id "), but none of them work.

$("a.lightbox_image").fancybox({
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'speedIn': 600,
            'speedOut': 200,
            'content': 'Id of element clicked'+this.attr("id")
 });

Any suggestions?

Answer 1

You can do it as follows:

$("a.lightbox_image").each(function() {
  $(this).fancybox({
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'speedIn': 600,
        'speedOut': 200,
        'content': 'Id of element clicked' + this.id
  });
});

thisprobably refers to windowwhere you are currently attached (or documentif readyyou cannot be sure of the event without seeing more code). For thisas <a>, as you want, you should use a loop .each()and assign it there ... inside the .each()closure, thisrefers to the anchor.

Answer 2

Nick Craver onClosed, :

$("a.lightbox_image").each(function() {
  var tthis = this;
  $(this).fancybox({
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'speedIn': 600,
        'speedOut': 200,
        onClosed : function() {
           alert(this.id);
     }
  });
});

, , fancybox, .

Answer 3

, :)

<div class="thumbnail">
    <a class="fancybox" title="MyTitle" rel="group" href="#" id="fiid_4">
        <img src="/dir/image4.png" alt="x" style="width:200px;height:160px;"  />
    </a>
    <a class="fancybox" title="MyTitle" rel="group" href="#" id="fiid_5">
        <img src="/dir/image5.png" alt="x" style="width:200px;height:160px;"  />
    </a>
    <a class="fancybox" title="MyTitle" rel="group" href="#" id="fiid_6">
        <img src="/dir/image6.png" alt="x" style="width:200px;height:160px;"  />
    </a>
</div>

javascript:

    $(document).ready(function() {

    $(".fancybox").attr('rel', 'gallery').fancybox({
            loop : false,
            afterLoad: function(current, previous) {
                console.log(this.element[0].id)
                console.info( 'Current: ' + current.href );        
                console.info( 'Previous: ' + (previous ? previous.href : '-') );

                if (previous) {
                    console.info( 'Navigating: ' + (current.index > previous.index ? 'right' : 'left') );


                    //When navigating, we want to add the next set of images! :)
                    new_images = getNextFancyImages(current.index > previous.index ? 'right' : 'left')
                }
            }
        });
});

firebug :)

Answer 4

, , , - (beforeShow, beforeLoad, onUpdate ..), .

, . fancybox, fancybox. , this , , . , .

$('.fancybox').each(function() {
   var that = this;
   $(this).fancybox({
      beforeLoad: function() {
          var id = $(that).attr('id');
          console.log("id of element clicked is: "+id)
       }
    });
});

Answer 5

each(function() ( , Next Prev).

, , , , - fancyBox div.

:

$(document).ready(function() {
    $(".fancybox").click(function() { $("#<unique_div>").data("clickedid", this.id); }).fancybox({
        beforeShow: function () {
            this.title += '<br />';
            this.title += 'Clicked id: ' + $("#<unique_div>").data("clickedid");
        },
        prevEffect: 'none',
        nextEffect: 'none',
        loop: false,
        fitToView: false,
        helpers: { title: { type: 'inside' }  }
    });
});