Làm cách nào để tạo fancybox href động?

Question

Tôi có đoạn code Fancybox sau:

$('.fancybox').fancybox({ 
      'autoScale' : false, 
      'href' : $('.fancybox').attr('id'), 
      'type':'iframe', 
      'padding' : 0, 
      'closeClick' : false, 

//some other callbacks etc 

vấn đề là tôi có hai mươi khác nhau Thẻ id của trên trang và tôi muốn Fancybox thuộc tính href để lấy id của phần tử nhấp, tức là một trong đó kích hoạt sự kiện.

Tôi đã thử một vài điều, không ai trong số họ đã làm việc!

'href' : $(this).attr('id'), 
'href' : $(this.element).attr('id'), 

Điều này có vẻ rất đơn giản nhưng bất cứ lúc nào tôi cắm 'này' hoặc tương tự không có tác phẩm nào.

Answer 1

Without each() hoặc click() chỉ cần thêm beforeLoad callback để kịch bản của bạn như thế này

$(".fancybox").fancybox({ 
    autoScale: false, 
    // href : $('.fancybox').attr('id'), // don't need this 
    type: 'iframe', 
    padding: 0, 
    closeClick: false, 
    // other options 
    beforeLoad: function() { 
     var url = $(this.element).attr("id"); 
     this.href = url 
    } 
}); // fancybox 

LƯU Ý: này là dành cho Fancybox v2.0.6 +

Mặt khác, một hơn giải pháp thanh lịch là sử dụng (HTML5) data-* thuộc tính để thiết lập href (nó sẽ trông lạ để thiết id="images/01.jpg" khác), do đó bạn có thể làm:

<a href="#" id="id01" data-href="images/01.jpg" ... 

và gọi lại của bạn

beforeLoad: function(){ 
var url= $(this.element).data("href"); 
this.href = url 
} 

và sử dụng thuộc tính id cho ý nghĩa của nó.

---

EDIT: Điều tốt nhất là sử dụng data-fancybox-href thuộc tính đặc biệt trong neo của bạn như:

<a id="item01" data-fancybox-href="http://jsfiddle.net" class="fancybox" rel="gallery" href="javascript:;">jsfiddle</a> 

và sử dụng một kịch bản đơn giản mà không gọi lại như

$(".fancybox").fancybox({ 
    // API options 
    autoScale: false, 
    type: 'iframe', 
    padding: 0, 
    closeClick: false 
}); 

Xem JSFIDDLE

Answer 2

Hãy thử điều này

$('.fancybox').each(function() { 
    var elem = jQuery(this); 
    elem.fancybox({ 
      'autoScale' : false, 
      'href' : elem.attr('id'), 
      'type':'iframe', 
      'padding' : 0, 
      'closeClick' : false, 
      }); 
    } 
); 

Answer 3

Bạn có thể duyệt qua bộ sưu tập các .fancybox các mặt hàng và lấy id.

$('.fancybox').each(function(){ 
    $(this).fancybox({ 
      'autoScale' : false, 
      'href' : $(this).attr('id'), 
      'type':'iframe', 
      'padding' : 0, 
      'closeClick' : false, 
      //some other callbacks etc 
    }); 
}); 

Answer 4

Bạn đã thử cái này chưa?

$('.fancybox').each(function(){ 
    $(this).fancybox({ 
     'autoScale' : false, 
     'href' : this.id, 
     'type':'iframe', 
     'padding' : 0, 
     'closeClick' : false, 
      //some other callbacks etc 
    }); 
}); 

Answer 5

Hãy thử điều này:

$(".fancybox").click(function(){ 
    var url = $(this).attr('id'); 
    $.fancybox({ 
     'autoScale' : false, 
     'href' : url , 
     'type':'iframe', 
     'padding' : 0, 
     'closeClick' : false, 
     //some other callbacks etc 
    }); 
})