Fancybox: Получить идентификатор кликающего элемента / элемента

Question

Я пытаюсь получить идентификатор элемента, на который щелкнули / показаны, в fancybox. Я пробовал оба "this.id" и "this.attr (" id ")" - но ни один из них не работает.

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

Есть предложения?

Answer 1

Вы можете сделать это так:

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

this относится, вероятно, к window, к которому вы привязываетесь в настоящее время (или document, если в событии ready не может быть уверенности, не увидев больше кода). Чтобы this было <a>, как вы хотите, вы должны использовать цикл .each() и назначить его там ... внутри замыкания .each(), this относится к якору.

Answer 2

У меня были проблемы с использованием решения Ника Крейвера вместе с функцией "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 в другой переменной, например, that . Затем обратитесь к , который в вашем обратном вызове.

$('.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() разрушает галерею (другими словами, больше нет кнопок «Вперед» и «Предыдущая»).

Решение, которое, кажется, работает и сохраняет галерею, заключается в назначении функции событию click на элементе перед вызовом 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' }  }
    });
});