将fancybox标题样式更改为“仅适用于视频的外部”。

Question

将fancybox标题样式更改为“仅适用于视频的外部”。

3

我有一个图像库和一个视频。我希望图像具有“悬停”类型的标题，而视频具有“内部”类型的标题。我尝试了下面的代码，但视频标题仍然是“悬停”，单击视频缩略图只会导致fancybox叠加层闪烁。如果我删除fancybox-media定义，视频缩略图就可以正常工作。

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox({
            margin: 10,
            padding: 10,

            helpers : {
                title : {
                    type : 'over'
                },
                media : {}
            }
        });

        $('.fancybox-media').fancybox({
            helpers : {
                title : {
                    type : 'inside'
                }
            }
        });

    });
</script>

然后在 HTML 中：

<a class="fancybox fancybox-media" href="http://www.youtube.com/v/EIyixC9NsLI?hd=1&autoplay=1" data-fancybox-group="gallery" title="Here is a video."><img class="thumb" src="tn_video.png" alt="" /></a>

这个答案是否与 .attr('rel', 'gallery') 有关？我不是很理解它的作用。

- Kris Hunt

+1 这是一个非常好的问题。在以前的版本中，使用不同的选择器似乎是可能的，但是使用相同的 rel 属性...不再行得通了。 - JFK

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- xavier.seignard · Answer 1

你尝试过创建两个单独的fancybox函数调用吗？一个是fancybox，另一个是fancybox-media，因为它们可能会重叠。

像这样（未经测试）：

    $(".fancybox").fancybox({
        margin: 10,
        padding: 10,

        helpers : {
            title : {
                type : 'over'
            },
            media : {}
        }
    });
    $(".fancybox-media").fancybox({
        margin: 10,
        padding: 10,

        helpers : {
            title : {
                type : 'inside'
            },
            media : {}
        }
    });