0

我想知道是否/如何可以在 Fancybox 3 中打开所有 youtube 链接。

场景：一个网站有一堆指向 youtube 的链接。寻找一种方法来自动将这些视频点击弹出到灯箱中，而无需在每个链接中添加“data-fancybox”。

例子：

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

我还没有找到任何让 fancybox-3 自动捕获来自某个 URL 的链接的示例......

更新：

非常感谢恶魔的回答，但我正在寻找一种方法来做到这一点，而不需要对实际的 youtube 链接进行任何标记更改。

我找不到任何示例，但开始寻找图像链接的自动捕获。

这很接近，我觉得像这样的东西会起作用，但似乎捕获了每一个链接，而不仅仅是其中带有“youtube”的链接。

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

3 回答 3

3

我认为您应该将 data-fancybox 添加到链接中，但是如果您不能强迫自己这样做，这应该可以工作；-)。

 $('a[href*="https://www.youtube.com/watch?"]').each(function() {
  $(this).attr('data-fancybox','');
 });
于 2017-06-18T02:10:16.147 回答
2

所以我会简单的 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-15T16:24:35.287 回答
0

这可能对将来的某人有所帮助，所以这是我的快速实现，它也适用于 Vimeo 链接......

( function( $ ) {
    'use strict';

    /**
     * Define matching provider url sources
     * @type {Object}
     */
    var mediaPatterns = {
        youtube: [
            'https?:\/\/((m|www)\.)?youtube\.com\/watch.*',
            'https?:\/\/youtu\.be/.*'
        ],
        vimeo: [
            'https?:\/\/(.+\.)?vimeo\.com\/.*'
        ]
    };

    /**
     * Check we have Fancybox available
     */
    if ( $.fancybox ) {

        /**
         * Attach event listener to all link tags
         */
        $( document ).on( 'click', 'a', function() {

            /**
             * Clicked link element
             * @type {Object}
             */
            var $link = $( this );

            /**
             * Clicked link href value
             * @type {String}
             */
            var href = $link.attr( 'href' );

            /**
             * Loop through each defined pattern group
             */
            for ( var provider in mediaPatterns ) {

                /**
                 * Patterns for this provider
                 * @type {Array}
                 */
                var patterns = mediaPatterns[ provider ];

                /**
                 * Loop through each pattern for this provider
                 */
                for ( let i = 0; i < patterns.length; i++ ) {

                    /**
                     * Convert string patter to regular expression
                     * @type {RegExp}
                     */
                    var pattern = new RegExp( patterns[ i ], 'i' );

                    /**
                     * Check if the link href matches our pattern
                     */
                    if ( href.match( pattern ) ) {

                        /**
                         * Boom, open fancybox
                         */
                        $.fancybox.open( $link );

                        /**
                         * Prevent default
                         */
                        return false;
                    }
                }
            }
        } );
    }

} )( jQuery || window.jQuery );

这适用于动态创建的元素，例如在初始加载后添加到页面的元素。

请参阅此处的示例：https ://jsfiddle.net/hu8cjgk3/

仅在 Fancybox 3.5.7+ 上测试。

于 2019-10-01T13:44:39.483 回答