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

Question

我正在使用Fancybox 2.0.6来显示图片和视频。当鼠标悬停在图库中的多张图片/视频上时，Fancybox会显示前一个和后一个图标和链接。可点击区域占据了左侧和右侧40%的图像/视频区域，这符合jquery.fancybox.css的要求，对于图片很好，但是对于视频，则会阻挡播放按钮，导致用户无法播放或暂停视频而转到下一个/上一个视频。我想仅更改视频可点击区域的宽度，并使其保持图片的宽度不变。我已经研究了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文件中添加或更改什么内容？我漏掉了什么吗？

- jennetcetera

---

当您单击链接时，wrapCSS类是否显示在dom中？ - Bergi

嗨Bergi，我不确定我理解你的问题。 - jennetcetera

你为什么认为它不起作用？你检查了DOM，那个类没有显示出来吗？ - Bergi

Answer 1

首先需要明白，当你使用wrapCSS选项时，会给fancybox包装器（.fancybox-wrap）添加一个新的class选择器，因此添加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包装器（我们使用了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>

- JFK