1

我正在使用 fancybox 来弹出一个简单的 vimeo 弹出窗口：http: //fancyapps.com/fancybox/

这是我的 jQuery：

$(".fancybox").fancybox({
    openEffect: 'none',
    closeEffect: 'none',
    padding: 0
});

这是我的 HTML：

<a class="fancybox" href="http://vimeo.com/5319920">
    <img class="video_preview" src="/assets/home/video_preview.png">
</a>

问题是我得到一个The requested content cannot be loaded没有任何记录错误的错误。显然脚本被调用了。

这里可能会发生什么，有什么想法吗？我完全不知所措。

谢谢！

4

3 回答 3

6

你只需要另外两件事：

1）。添加 fancybox-media 帮助js文件，如（检查您自己的路径）：

<script type="text/javascript" src="{your_path}/helpers/jquery.fancybox-media.js"></script>

2）。将 helpers 媒体选项添加到您的脚本中：

$(".fancybox").fancybox({
    openEffect: 'none',
    closeEffect: 'none',
    padding: 0, //<-- notice I added a comma here ;)
    helpers : {
     media : {}
    }
});
于 2012-06-10T21:37:47.920 回答
0

可能存在一些问题，但我知道以下应该有效：将 href 更改为：

//player.vimeo.com/video/36031564?hd=1&autoplay=1&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1

或者

http://player.vimeo.com/video/36031564?hd=1&autoplay=1&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1

并添加data-fancybox-type="iframe"

演示：http: //jsfiddle.net/lucuma/9wAdV/180/

<a class="fancybox" href="//player.vimeo.com/video/36031564?hd=1&autoplay=1&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" data-fancybox-type="iframe"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

$(document).ready(function() {
    $('.fancybox').fancybox({

    });
});​
于 2012-06-10T06:04:36.177 回答
0

如果您在计算机上本地尝试此操作，则加载项可能正在尝试使用链接访问视频

file://player.vimeo.com/video/5319920?hd=1&autoplay=1&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1

您可以通过提供以http://player.vimeo.com开头的完整 URL （由 @lucuma 回答）或更改 $.fancybox.helpers.media.beforeLoad 方法来更改此设置。此方法为包括 vimeo 在内的许多网站提供支持。此方法覆盖您提供的 href 例如它转换

http://vimeo.com/5319920

到（如果您在本地运行）

file://player.vimeo.com/video/5319920?hd=1&autoplay=1&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1

尝试如下更改 media.beforeLoad 函数，将 http:// 附加到最后一行的 href，它应该可以工作..

$.fancybox.helpers.media.beforeLoad = function(opts, obj) {
    var href = obj.href || '',
        type = false,
        rez;

    if ((rez = href.match(/(youtube\.com|youtu\.be)\/(v\/|u\/|embed\/|watch\?v=)?([^#\&\?]*).*/i))) {
        href = '//www.youtube.com/embed/' + rez[3] + '?autoplay=1&autohide=1&fs=1&rel=0&enablejsapi=1';
        type = 'iframe';

    } else if ((rez = href.match(/vimeo.com\/(\d+)\/?(.*)/))) {
        href = '//player.vimeo.com/video/' + rez[1] + '?hd=1&autoplay=1&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1';
        type = 'iframe';

    } else if ((rez = href.match(/metacafe.com\/watch\/(\d+)\/?(.*)/))) {
        href = '//www.metacafe.com/fplayer/' + rez[1] + '/.swf?playerVars=autoPlay=yes';
        type = 'swf';

    } else if ((rez = href.match(/dailymotion.com\/video\/(.*)\/?(.*)/))) {
        href = '//www.dailymotion.com/swf/video/' + rez[1] + '?additionalInfos=0&autoStart=1';
        type = 'swf';

    } else if ((rez = href.match(/twitvid\.com\/([a-zA-Z0-9_\-\?\=]+)/i))) {
        href = '//www.twitvid.com/embed.php?autoplay=0&guid=' + rez[1];
        type = 'iframe';

    } else if ((rez = href.match(/twitpic\.com\/(?!(?:place|photos|events)\/)([a-zA-Z0-9\?\=\-]+)/i))) {
        href = '//twitpic.com/show/full/' + rez[1];
        type = 'image';

    } else if ((rez = href.match(/(instagr\.am|instagram\.com)\/p\/([a-zA-Z0-9_\-]+)\/?/i))) {
        href = '//' + rez[1] + '/p/' + rez[2] + '/media/?size=l';
        type = 'image';

    } else if ((rez = href.match(/maps\.google\.com\/(\?ll=|maps\/?\?q=)(.*)/i))) {
        href = '//maps.google.com/' + rez[1] + '' + rez[2] + '&output=' + (rez[2].indexOf('layer=c') ? 'svembed' : 'embed');
        type = 'iframe';
    }
    console.log(type);
    console.log(href);
    if (type) {
        obj.href = "http://" + href;
        obj.type = type;
    }
}​
于 2012-06-10T07:01:11.773 回答