在 fancybox 上从图像过渡到视频

Question

我有一个带有图片和视频的精美盒子画廊。当我单击图像并使用鼠标滚轮时，我可以浏览各种图像，但它总是会跳过视频。如果我点击视频，它会播放得很好，一切都......

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

这是我在www.charbelnicolas.com 做的网站（请点击第二页查看我正在谈论的画廊）

现在...图像和视频具有相同的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>

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

我搜索了谷歌群组的讨论，并看到了来自 JFK 的各种答案，但我似乎无法让它发挥作用......也许如果你们查看我的网站，你可能会告诉我出了什么问题。

谢谢

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

附：不要忘记加载jquery.fancybox-media.js 文件。