Fancybox: Get id of clicked anchor/element

Question

I am trying to get the id of the clicked/shown element in fancybox. I have tried both "this.id" and "this.attr("id")" - but none of them works.

$("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 like this:

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

this refers probably to window where you're binding currently (or document if in the ready event, can't be sure without seeing more code). For this to be the <a> like you want, you should use a .each() loop and assign it there...inside the .each() closure, this refers to the anchor.

Answer 2

This seems to work for me :)

<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>

The 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')
                }
            }
        });
});

In firebug, you can see the logging :)

Answer 3

The answers which suggest using an each loop are correct, but if you're using any of the callbacks (beforeShow, beforeLoad, onUpdate etc) there's one important detail to understand.

In the context of your each loop, this refers to the element which will get clicked. But as soon as you're inside the fancybox callback, this refers to the fancybox object. The trick is to store the elements this into another variable, e.g that. Then refer to that in your callback.

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

Answer 4

The each(function() solution breaks the gallery (in other words, no more Next and Prev button).

A solution that seems to work and saves the gallery is to assign a function to the click event on the element before fancyBox is called and save the id to a unique div.

For instance:

$(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' }  }
    });
});

Answer 5

I had problems using Nick Craver's solution together with "onClosed" function and after some tests I found working solution:

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

This, in my case, was used to reload row with data after closing fancybox window where that data was edited.