Question

我有一个带有图像和视频的fancybox画廊。当我点击图像并使用鼠标滚轮时，我可以浏览各种图像，但它总是会跳过视频。如果我点击视频，它会很好地播放所有内容......

我希望能够在浏览图库图片时转到我的视频...

这是我在www.charbelnicolas.com上做的网站（请点击第二页的II，查看我正在谈论的图库）

现在......图片和视频具有相同的rel，即"gallery2"，这是我用于图库的代码：

    <script type="text/javascript">

        $(document).ready(function() {
        $(".fancybox").fancybox({ helpers: { title: false } });});

    </script>


    <script type="text/javascript">

    $(document).ready(function() {
    $('.fancybox-media').fancybox({ 'minWidth': 720, 'minHeight': 480, helpers : { media : {}}});});

    </script>

我应该怎么做才能看到我视频上的导航箭头，当我在浏览图库时使用键盘或鼠标滚轮时，我可以看到视频和图像？（所以它不再跳过视频）

我搜索了谷歌小组的讨论，我看到了肯尼迪国际机场的各种答案，但我似乎无法使其发挥作用......也许如果你们检查我的网站，你可能会告诉我什么是错的。< / p>

谢谢

Answer 1

图片和视频只需要一个脚本。

如果您想为视频传递minWidth和minHeight等选项，请使用（HTML5）data-*属性（例如data-min-width="720"和data-min-height="480"进行操作}）你的链接像：

<a rel="gallery2" class="fancybox" href="http://vimeo.com/59469665" data-min-width="720" data-min-height="480"><img class="left" src="http://charbelnicolas.com/thumbs/anunciotedelimonthumb.png" alt="" /></a>

然后在beforeShow回调中获取这些值，如：

$(".fancybox").fancybox({
    beforeShow: function () {
        this.minWidth  = $(this.element).data("min-width");
        this.minHeight = $(this.element).data("min-height");
    },
    helpers: {
        media: {}
    }
});

参见 JSFIDDLE

P.S。不要忘记加载jquery.fancybox-media.js文件。

从fancybox上的图像过渡到视频

1 个答案: