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

У меня были проблемы с использованием решения 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') 
       } 
      } 
     }); 
}); 

В поджигатель, вы можете увидеть протоколирование :)

Answer 4

each(function() решение разбивает галерею (другими словами, не более кнопки Next и Prev).

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

Answer 5

Ответы, которые предлагают использовать в каждый цикл правильно, но если вы используете какой-либо из обратных вызовов (beforeShow, beforeLoad, OnUpdate и т.д.) есть одна важная деталь для понимания.

В контексте каждого цикла, этот относится к элементу, который будет нажат. Но как только вы находитесь в обратном вызове fancybox, этот относится к объекту fancybox. Хитрость заключается в хранении элементов этого в другую переменную, например , что. Затем обратитесь к , что в вашем обратном вызове.

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