Question

我想知道是否可以使用Vimeo组代替使用Fancy Box App的图像而不是属性效果：http://fancyapps.com/fancybox/。我尝试将HTML和Javascript中的“fancybox”类交换为“fancybox-media”，但无济于事。我还将HTML改为“fancybox-media”。

下面的Jfiddle链接如果从花哨的盒子网站上如何实现使用图像的技巧。我甚至不确定这种技术是否适用于Vimeo Media。目标是在标题框中播放时，在标题旁边的Vimeo视频下方显示一个按钮。

http://jsfiddle.net/cWNw9/

  $(".fancybox-media")
 .attr('rel', 'gallery')
.fancybox({
beforeLoad: function() {
    var el, id = $(this.element).data('title-id');
    if (id) {
        el = $('#' + id);

        if (el.length) {
            this.title = el.html();
        }
    }
}
});

以下是我尝试过的HTML：

<a class="fancybox-media" data-title-id="title-1” href="http://vimeo.com/36031564"><img      src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
<div id="title-1" class="hidden">
This is 1st title. <a href="http://google.com">Some link</a>
</div>

<a class="fancybox" data-title-id="title-2"   href="http://vimeo.com/36031564"><img   src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>

<div id="title-2" class="hidden">
This is <b>2nd title</b>. <a href="http://google.com">Some link</a>
</div>

Answer 1

当你说

时

"Use element instead of attribute" for vimeo videos using FancyBox

我猜您指的是fancybox demo ==＆gt;第2号，第三个例子。

如果是这样，答案是肯定的。在以下考虑因素下，可以使用与jsfiddle引用中相同的代码：

您需要将要绑定到fancybox的所有元素的 class 属性与fancybox初始化脚本中使用的选择器匹配，例如

<a class="fancybox-media" href="{vimeo 1}" ...
<a class="fancybox-media" href="{vimeo 2}" ...

// matching selector
$(".fancybox-media").fancybox()

您还需要加载位于fancybox下载的helpers目录中的fancybox媒体助手，如：

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

在您的自定义fancybox初始化脚本中初始化fancybox媒体助手，如：
```
helpers: {
    media: {}
}
```

此外，由于您想要使用视频库，您可能不希望fancybox的导航箭头与视频容器重叠（并使视频控件无法访问），因此我建议您也添加fancybox按钮帮助程序。注意您还需要包含按钮helper js和css文件。

因此，包含所有正确的js和css文件，您可以使用以下代码：

jQuery(document).ready(function ($) {
    $(".fancybox-media").attr('rel', 'gallery')
        .fancybox({
        beforeLoad: function () {
            var el, id = $(this.element).data('title-id');
            if (id) {
                el = $('#' + id);

                if (el.length) {
                    this.title = el.html();
                }
            }
        },
        // we are using button helpers so we don't need additional buttons
        modal: true, // disables default buttons
        helpers: {
            title: {
                type: 'inside' // optional
            },
            buttons: {}, // initialize buttons helper
            media: {} // initialize media helper
        }
    }); // fancybox
}); // ready

参见 JSFIDDLE

如何使用FancyBox为vimeo视频添加“使用元素而不是属性”

1 个答案: