我如何使fancybox href動態？

我有以下的fancybox代碼：我如何使fancybox href動態？

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

//some other callbacks etc

問題是我在網頁上有二十個不同的標籤ID的，我想的fancybox href屬性取單擊元素的ID，即觸發一個事件。

我嘗試了幾件事，他們都沒有工作！

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

這似乎很簡單，但任何時候我插入'這個'或類似的東西沒有用。

來源

2012-07-23 absentx

使用'id'屬性和'href'屬性有什麼區別？ ...讓html做的更好（不會過度使用jQuery）你可以在你的''標籤中有20個不同的ID，但它們都可以共享相同的'class =「fancybox」'，所以你的腳本可以無縫工作，沒有過分複雜的事情。 – JFK 2012-07-23 19:26:53

跟着我以前的評論，你只需刪除'href' API選項，fancybox將從''標籤中的'href'屬性中獲取它。 – JFK 2012-07-23 19:29:24

雖然我的href是非標準的，但客戶端並不需要頁面上的二十個不同的鏈接，所以我在他們中使用帶有「＃」的href，並且在代碼中的某個時刻，我需要JS將它發送給我真正的href存儲在ID中。打開建議！ – absentx 2012-07-23 19:38:18

沒有each()或click()只是beforeLoad回調添加到您這樣的腳本

$(".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

注意：這是對的fancybox v2.0.6 +

在另一方面，更優雅解決方案是使用（HTML5）data-*屬性設置href（它看起來怪異的設置id="images/01.jpg"其他方式），你可以這樣做：

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

和回調

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

並且使用id屬性來表示什麼意思。

編輯：最好是使用特殊data-fancybox-href屬性在你的錨一樣：

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

，並使用一個簡單的腳本，而不回調像

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

見JSFIDDLE

來源

2012-07-23 19:43:51 JFK

啊完美...我在前負荷回調中嘗試了一些東西，但我一定有點偏離。再次感謝這工作完美，你已經幫助我通過很多這種fancybox的東西！ – absentx 2012-07-23 20:00:14

謝謝你。我需要爲我的網址添加一個ajax標誌，這樣我就可以提供一個無鉻模式模板，同時保持抓取工具，屏幕閱讀器和_open在新window_ click中的網址。 – murraybiscuit 2014-03-07 06:48:12

試試這個

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

來源

2012-07-23 18:24:41 epascarello

可以遍歷您的.fancybox項目收集和搶ID。

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

來源

2012-07-23 18:27:03

你試過嗎？

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

來源

2012-07-23 18:27:21 Engineer

試試這個：

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

來源

2012-07-23 19:00:24 RAMe0

我如何使fancybox href動態？

回答

相關問題