如何自動使網站上的所有YouTube鏈接中的fancybox 3燈箱開放

-2

我想知道是否/如何可能讓所有的YouTube鏈接在開放3的fancybox如何自動使網站上的所有YouTube鏈接中的fancybox 3燈箱開放

場景：一個網站有一堆鏈接到youtube。尋找一種自動將這些視頻點擊彈出到燈箱的方式，而不必在每個鏈接中添加「數據fancybox」。

例子：

<a href="https://www.youtube.com/watch?v=xxxxx"> </a>

我一直沒能找到獲得的fancybox-3自動捕獲從特定URL鏈接的任何例子...

UPDATE：

欣賞惡魔的答案，但我正在尋找一種方法來做到這一點，沒有任何標記更改實際的YouTube鏈接。

我找不到任何示例，但開始尋找圖像鏈接的自動捕獲。

這很接近，我覺得像這樣的東西可以工作，但似乎捕捉每一個鏈接，而不僅僅是那些「youtube」。

$('a').each(function() { 
    if ($(this).has('youtube')) { 
     $(this).fancybox(); 
    } 
});

來源

2017-06-15 Robert

到目前爲止您有試過任何東西嗎？ – CollinD

更新了我的代碼，不工作...但希望它的想法更好溝通 – Robert

不清楚你爲什麼如此苛刻的downvoted。你的軌道很好。你應該通過HREF值來挖掘元素。我不認爲'.has（）'是你正在尋找的，但你正在接近。 –

，所以我會簡單的jQuery拿到所有環節中的YouTube鏈接你可能會想要做像添加一個類錨<a class=" fancy-box video-link">LINK</a>

var $links = $('.video-link'); 

$links.on('click', function() { 

    $.fancybox.open($links, { 
     // Custom options 
     //add props to <a> where we have video-link set 
     $(this).props('data-fancybox'); 
    }, $links.index(this)); 

    return false;

來源

2017-06-15 16:24:35 Demon

我從來沒有使用花哨的盒子，但我只是看着他們的文檔和例子。 – Demon

這個答案很好，但可以通過刪除jQuery來改進，而不需要修改標記。您可以簡單地檢查「youtube」的'href'屬性或類似的東西。 – CollinD

這可能是個好主意。但OP可能想要使用其他鏈接可能是短鏈接或NOT youtube鏈接 – Demon

我想你應該只需要添加數據fancybox的鏈接，但這應該工作，如果你不能強迫自己做到這一點;-)。

$('a[href*="https://www.youtube.com/watch?"]').each(function() { 
    $(this).attr('data-fancybox',''); 
});

來源

2017-06-18 02:10:16 Macsupport

如何自動使網站上的所有YouTube鏈接中的fancybox 3燈箱開放

回答

相關問題