如何自动使网站上的所有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灯箱开放

回答

相关问题