訪問「這個」的fancybox內選擇

我有一個鏈接，打開的fancybox盒如下：訪問「這個」的fancybox內選擇

<a class="fancybox" rel="gallery" href="<?php echo $image_src; ?>" data-id="<?php echo $post->ID; ?>">

鏈接已data屬性填充瞭如上的id。我想在Fancybox輔助函數中使數據屬性可用。我曾嘗試在下面的代碼中使用$(this.element).data('id')：

helpers: { 
    title: { 
     type: 'over' 
    }, 
    buttons: { 
     position: 'bottom', 
     tpl: '<div id="fancybox-buttons"><ul> \ 
              <li class="button"><a class="test-btn" data-id="' + $(this.element).data('id') + '" href="#"></a></li> \ 
             </ul></div>' 
    } 
}

但是它不起作用。獲取數據屬性始終在幫助程序函數中返回undefined。我如何得到這個工作。

來源

2012-06-21 John

@meagar提出了一個很好的解決方案，通常適用於大多數人。但是，由於用於調用Fancybox的鏈接通過Ajax請求加載到頁面上，所以他的解決方案對我無效。我通過聲明一個全局變量，然後將$(this.element).data('id')的值傳遞給Fancybox afterLoad回調中的全局變量來解決此問題。

afterLoad : function() { 
    my_global_var = $(this.element).data('id'); 
}

然後我簡單地在助手選項裏面使用了全局變量。

來源

2012-07-08 18:56:24 John

只要小心你的解決方案。缺點是'my_global_var'對於第一個元素仍然是'undefined'。然後它會將第一個元素的'$（this.element）.data（'id'）'的值應用到第二個元素等，等等。 – JFK

@JFK這就是我最初想到的。但是，這也適用於第一個元素，沒有任何問題。 – John

很難相信沒有看到它;） – JFK

$(this.element).data('id')正在您綁定回調時進行評估。當您撥打$.fancybox時，this將成爲您所處的任何環境。

如果您將Fancybox綁定到錨標籤，則您已經選擇了該錨標籤。這樣的事情應該工作：

$('a.fancybox').each(funcion() { 
    var $a = $(this); 
    $a.fancybox({ tpl: "..." + $a.data('id') + "..." }); 
});

來源

2012-06-21 14:56:08 meagar

Thx回覆。應用上述解決方案會導致在新窗口中打開圖像，而不是fancybox。有什麼建議麼？ – John

您可能在某處出現JavaScript錯誤。安裝Firebug並進行調試。 – meagar

我使用Firebug進行調試，並且沒有JS錯誤。當我在'each'函數中包裝fancybox函數時，圖像會在另一個窗口中打開，而不是在fancybox中打開。 – John

會不會更容易做到這一點像PHP？

buttons : { 
position: 'bottom', 
tpl: '...<a class="test-btn" data-id="<?php echo $post->ID; ?>" href="#"></a>...' 
}

的問題是，你不能使用$(this.element)了回調功能的...你想在模板中使用它來代替。

來源

2012-07-08 10:19:28 JFK

- 事實上，這可以在PHP中完成。但是，這將需要我使PHP的內聯（我不打算這樣做）。 Fancybox回調在單獨的JS文件中。我使用全局變量解決了這個問題。看到我的答案。感謝您的投入。 – John

訪問「這個」的fancybox內選擇

回答

相關問題