CODEWITHSUNDEEP
javascriptjqueryfancybox
kastru
kastru

Reputation: 317

Fancybox: Get id of clicked anchor/element

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?

Upvotes: 3

Views: 19785

Answers (5)

elMarquis
elMarquis

Reputation: 7730

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

Upvotes: 2

Krzysztof Jarosz
Krzysztof Jarosz

Reputation: 109

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.

Upvotes: 9

jhotterb
jhotterb

Reputation: 11

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

Upvotes: 0

Agey
Agey

Reputation: 931

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

Upvotes: 3

Nick Craver
Nick Craver

Reputation: 630449

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.

Upvotes: 11

Related Questions