javascript Fancybox 多个实例的自定义样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11655112/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Custom styles for multiple instances of Fancybox
提问by jennetcetera
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.
我使用 Fancybox 2.0.6 来显示图像和视频。当滚动图像/视频时（当画廊中有多个图像时），Fancybox 显示上一个和下一个图标和链接。可点击区域占图像/视频左右两侧的 40%，根据 jquery.fancybox.css 应该如此。这对图像非常有用，但是对于视频，它会阻止播放按钮，以便用户转到下一个/上一个视频，而不是能够播放或暂停视频。我想更改可点击区域的宽度，但仅限于视频 - 我希望它对图像保持不变。我研究了 Fancybox，发现我可以使用 wrapCSS 为 Fancybox 的多个实例创建自定义样式，但我无法让它工作。
Here are my js calls
这是我的 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>
And here is how I have images and video displayed within my HTML:
这是我在 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">
Do I need to add something or change anything within the .js file? What am I missing?
我是否需要在 .js 文件中添加或更改任何内容？我错过了什么？
回答by JFK
Firstyou need to understand that when you use the wrapCSSoption, a new classselector 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
首先你要明白，当你使用wrapCSS选项时，一个新的class选择器会被添加到fancybox wrap( .fancybox-wrap)中，所以添加选项wrapCSS:'fancybox-nav-video'意味着当你打开fancybox时你会得到
<div class="fancybox-wrap fancybox-nav-video ....etc." ....
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 按钮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 */
}
Notice that these new css properties will be applied only to the fancybox wrap with class fancybox-nav-video(where we used the wrapCSSoption). 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.
请注意，这些新的 css 属性将仅应用于带有 class 的fancybox wrap fancybox-nav-video（我们使用该wrapCSS选项的地方）。这些 css 会将按钮以及可点击区域放置在fancybox 之外，清除 vimeos 的播放按钮。因为那样，我们使导航箭头永久可见，否则访问者将不知道将鼠标悬停在何处。
Third, you just need to wrap all your fancybox custom scripts within a single .ready()method like:
第三，您只需要将所有的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>
