javascript - Fancybox 的多个实例的自定义样式

Question

我正在使用 Fancybox 2.0.6 来显示图像和视频。当滚动图像/视频时(当图库中有多个图像时)，Fancybox 会显示上一个和下一个图标和链接。根据 jquery.fancybox.css，可点击区域占据图像/视频左右两侧的 40%。这对于图像非常有用，但是对于视频，它会阻止播放按钮，以便用户转到下一个/上一个视频，而不是能够播放或暂停视频。我想更改可点击区域的宽度，但仅限于视频 - 我希望图像保持不变。我研究了 Fancybox，发现我可以使用 wrapCSS 为 Fancybox 的多个实例创建自定义样式，但我无法让它工作。

这是我的 js 调用

<script type="text/javascript">
    $(document).ready(function() {
    $(".vimeo").fancybox({
    width: 781,
    height: 440,
    type: 'iframe',
    fitToView : false,
    wrapCSS    : 'fancybox-nav-video'
    });
    });
</script>
<script>
$(document).ready(function() 
{
$('.fancybox').fancybox(
    {
        padding : 0,
        openEffect  : 'elastic'
    }
    );
    $(".fancybox").fancybox(
    {
        wrapCSS    : 'fancybox-nav',
        closeClick : true,
        helpers : {
            overlay : {
                css : {
                    'background-color' : '#000'
                }
            },
            thumbs  : {
                width   : 50,
                height  : 50
            }
        }
    }
    );
}
);
$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();      
</script>

下面是我在 HTML 中显示图像和视频的方式:

<a class="fancybox" rel="gallery1" href="image1.jpg">
<a class="fancybox" rel="gallery1" href="image2.jpg">
<a class="vimeo" rel="gallery2" href="videoplayerlink1">
<a class="vimeo" rel="gallery2" href="videoplayerlink2">

我是否需要在 .js 文件中添加或更改任何内容？我错过了什么？

Answer 1

首先您需要了解，当您使用wrapCSS 选项时，一个新的class 选择器将添加到fancybox wrap (.fancybox-wrap) 所以添加选项 wrapCSS:'fancybox-nav-video' 意味着当你打开 fancybox 你会得到

<div class="fancybox-wrap fancybox-nav-video ....etc." ....

其次，您需要为此类新选择器声明特定的 fancybox 按钮 CSS 属性(加载 fancybox css 文件后的内联 CSS 声明):

.fancybox-nav-video .fancybox-nav {
    width: 60px;       
}
.fancybox-nav-video .fancybox-nav span {
    visibility: visible; /* arrows will be permanently visible */
}
.fancybox-nav-video .fancybox-next {
    right: -60px; /* move right outside fancybox area */
}
.fancybox-nav-video .fancybox-prev {
    left: -60px; /* move left outside fancybox area */
}

请注意，这些新的 css 属性将仅应用于类为 fancybox-nav-video 的 fancybox wrap(我们使用了 wrapCSS 选项)。这些 css 会将按钮和可点击区域放在 fancybox 之外，清除 vimeos 的播放按钮。因此，我们使导航箭头永久可见，否则访问者将不知道将鼠标悬停在哪里。

第三，您只需要将所有 fancybox 自定义脚本包装在一个 .ready() 方法中，例如:

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

// fancybox for vimeo
  $(".vimeo").fancybox({
    width: 781,
    height: 440,
    type: 'iframe',
    fitToView : false,
    wrapCSS : 'fancybox-nav-video' // add a class selector to the fancybox wrap
  });

// fancybox for images
  $(".fancybox").fancybox({
   // options for images here
  });

 }); // ready
</script>