Question

我正在尝试在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>

Answer 1

I want to remove the white boarder around content, 
have the background overlay be transparent and 
have the navigation arrows visible on the outside 
of the box all of the effects at the same time

然后你只需要一个脚本（不需要为每个效果添加一个新脚本）和一些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;
}

参见 JSFIDDLE

多重效果Fancybox V2

1 个答案: