Jquery 多效Fancybox V2

我试图在Fancybox V2中添加多个效果，发现第一个效果覆盖了第二个效果。他们单独工作，但不在一起。如何向一个图像库添加多个效果？以下是我如何尝试将它们结合起来：

<script type="text/javascript">
    $(document).ready(function() {

        $('.fancybox').fancybox();

        // Change background color

        $(".fancybox").fancybox({
helpers : {
    overlay : {
        css : {
            'background' : 'rgba(255, 255, 255, 0.10)'
         }
    }
}
});

        // Remove white border around content

   $(".fancybox")
     .attr('rel', 'gallery')
     .fancybox({
      padding : 0
      });               

        });
</script>

$（文档）.ready（函数（）{
$（'.fancybox'）.fancybox（）；
//更改背景色
$（“.fancybox”）.fancybox({
助手：{
覆盖：{
css:{
'背景'：'rgba（255，255，255，0.10）'
}
}
}
});
//删除内容周围的白色边框
$（“.fancybox”）
.attr（'rel'，'gallery'）
.fancybox({
填充：0
});               
});

然后，您只需要一个脚本（无需为每个效果添加一个新脚本）和一点css就可以将箭头放置在框外，以便

$(document).ready(function () {
    $(".fancybox").fancybox({
        padding: 0, // remove the white boarder around content
        margin: [20, 60, 20, 60], // make room for the arrows outside the box
        helpers: {
            overlay: {
                css: {
                    'background': 'rgba(255, 255, 255, 0.10)' // background semi-transparent
                }
            }
        }
    });
});

和css将箭头放置在框外并可见

.fancybox-nav {
    width: 60px;
}
.fancybox-nav span {
    visibility: visible;
    opacity: 0.5;
}
.fancybox-nav:hover span {
    opacity: 1;
}
.fancybox-next {
    right: -60px;
}
.fancybox-prev {
    left: -60px;
}

---

请参见

如果将

padding:0

移动到早期的fancybox并删除最后一个，该怎么办？您可以对不同类型的内容或同时对库和单个元素使用相同的选择器，但您需要更具体地说明什么类型的内容会产生什么效果。展示你的html是什么样子这是我的html，我现在只是想修改Fancybox索引页面，我把它放在一个JSFIDLE中（我的第一个，希望是正确的）。奇怪的是，它在小提琴里工作，没有黑暗的背景，也没有图片周围的寄宿者，但当我把它上传到我的托管帐户时，它就不工作了。下面是一个新的JSFIDLE，它具有我正在尝试的三种效果。

.fancybox-nav {
    width: 60px;
}
.fancybox-nav span {
    visibility: visible;
    opacity: 0.5;
}
.fancybox-nav:hover span {
    opacity: 1;
}
.fancybox-next {
    right: -60px;
}
.fancybox-prev {
    left: -60px;
}