0

我有一个带有图像和视频的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>

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

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

谢谢

4

1 回答 1

0

您只需要一个用于图像和视频的脚本。

如果您想为您的视频传递minWidth和之类的选项，请在您的链接 中使用 (HTML5)属性（例如和），例如：minHeightdata-*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

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

于 2013-02-27T07:50:00.227 回答