Fancybox的多个实例的自定义样式 [英] Custom styles for multiple instances of Fancybox

问题描述

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

I am using Fancybox 2.0.6 to display both images and video. When rolling over the image/video (when there are multiple images in a gallery), Fancybox displays the previous and next icons and links. The clickable area takes up 40% of the left and right side of the image/video, as it should according to jquery.fancybox.css. This is great for images, however for video, it blocks the play button so that the user goes to the next/prev video rather than being able to play or pause the video. I would like to change the width of the clickable area, but only for videos - I would like it to stay the same for images. I have researched Fancybox to find that I can use wrapCSS to create custom styles for multiple instances of Fancybox, but I cannot get it to work.

这是我的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中显示图片和视频的方式：

And here is how I have images and video displayed within my 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文件中添加内容或更改任何内容？我缺少什么？

Do I need to add something or change anything within the .js file? What am I missing?

推荐答案

首先您需要了解当您使用<$ c时$ c> wrapCSS 选项，新的类选择器将被添加到fancybox包装中（ .fancybox-wrap ）所以添加选项 wrapCSS：'fancybox-nav-video'意味着当你打开fancybox时你会得到

First you need to understand that when you use the wrapCSS option, a new class selector will be added to the fancybox wrap (.fancybox-wrap) so adding the option wrapCSS:'fancybox-nav-video' means that when you open fancybox you will get

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

第二，您需要声明您的特定fancybox按钮这种新选择器的CSS属性（加载fancybox css文件后的内联CSS声明）：

Second, you need to declare your specific fancybox buttons CSS properties for such new selector (an inline CSS declaration after you loaded the fancybox css file):

.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的播放按钮。因此，我们使导航箭头永久可见，否则访问者将不知道将鼠标悬停在哪里。

Notice that these new css properties will be applied only to the fancybox wrap with class fancybox-nav-video (where we used the wrapCSS option). These css will place the buttons as well as the clickable area outside the fancybox, clearing out the vimeos's play button. Because that, we made the navigation arrows permanently visible, otherwise the visitor won't know where to hover.

第三，您只需要将所有fancybox自定义脚本包装在一个 .ready（）方法中，如：

Third, you just need to wrap all your fancybox custom scripts within a single .ready() method like:

<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>

这篇关于Fancybox的多个实例的自定义样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！