[英]FancyBox navigation on certain links
嗨,那里的StackOverfow好人,我需要FancyBox导航箭头的可见性帮助。 我需要它们在图像组上始终可见 (不仅在悬停时),在FancyBox窗口中打开的视频上不可见 。
我的图像代码是:
$("a[rel=images]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'showNavArrows' : 'true',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image <strong>'
+ (currentIndex + 1)
+ ' </strong>/ '
+ currentArray.length
+ (title.length ? ' ' + title : '')
+ '</span>';
}
});
并且我添加了两行CSS,以使箭头始终在图像上可见:
#fancybox-left-ico {left: 20px;}
#fancybox-right-ico {right: 20px;}
在FancyBox窗口中打开视频的代码是:
$(".video").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 700,
'height' : 450,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'showNavArrows' : 'false',
'allowfullscreen' : 'true'
}
});
//$('.fancy-ico').hide();
return false;
});
当我单击视频链接时,fancybox窗口会显示两个导航箭头,这是可以理解的,因为这是我添加的2行CSS所针对的。 当我添加一行代码时,就像这样:
$('.fancy-ico').hide();
视频窗口打开,没有任何箭头,仍然很好。 问题是当我再次单击图像时,箭头没有显示,因为我用最后一个jquery行隐藏了箭头。
现在我的问题是我该如何进行这项工作? 我在哪里可以插入一段看起来像这样的代码:
$('.fancy-ico').show();
有一些更聪明的方式来做这样的事情吗?
谢谢大家的帮助
您可以对图像使用onStart函数进行编码:这样,每次在图像fancybox加载时,它也会显示箭头。
$("a[rel=images]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'showNavArrows' : 'true',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image <strong>' + (currentIndex + 1) + ' </strong>/ ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
// onStart: "Will be called right before attempting to load the content"
'onStart' : function() {$('.fancy-ico').show();}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.