jquery - 改变 fancyBox 媒体的外观和感觉？

Question

我有一个安装了 fancyBox 的站点和一个包含图像和视频的画廊。然而，图像的外观与视频有很大不同。

这是有问题的画廊：http: //imaginefilmscommunication.com/site/#portfolio

（目前唯一的视频是画廊中的最后一个）我希望视频看起来像图像（底部的大白色边框而不是圆形黑色矩形......）

这是在 JavaScript 中还是在 css 中完成的？

Answer 1

如果您希望视频看起来像图像，则对图像和视频使用相同的类选择器，并添加media: {}到helpersAPI 选项，例如（使用您当前的代码）：

$(".fancybox").fancybox({
    helpers: {
        title: {
            type: 'inside'
        },
        media: {} //<== added for videos
    },
    padding: 0,
    beforeShow: function () {
        this.title = $(this.element).attr('title');
        this.title = '<h4>' + this.title + '</h4><hr class="gray">' + $(this.element).find('img').attr('alt');
        if (this.title) {
            // New line
            this.title += '<br />';
        }
    },
    afterShow: function () {
        // Render tweet button
        twttr.widgets.load();
    }
});

然后将（视频）html中的类选择器从fancybox-media更改为fancybox这样

<a class="project-wrp fancybox-media" title="Lorem ipsum dolor sit amet" rel="group7" href="https://vimeo.com/34134308">...</a>

变成了这个

<a class="project-wrp fancybox" title="Lorem ipsum dolor sit amet" rel="group7" href="https://vimeo.com/34134308">...</a>

请注意

helpers: {
    ...
    media: {} //<== added for videos
}

不会对图像产生任何影响，因此您可以安全地组合该选项。

请参阅JSFIDDLE （第二个拇指打开视频）