2013-03-08 156 views
1

我使用fancyBox 2来显示iframe内容组。我可以使用键盘上的箭头浏览内容,并通过点击内容的右侧或左侧,但无法显示箭头。我甚至将箭头设置为始终可见,而不是悬停,仍然没有运气。我将在某些iframe中使用可点击的内容,因此我需要关闭点击内容中导航的任何位置的功能。该选项也会干扰滚动条。Fancybox 2箭头不显示

这里是我的代码

<!-- Add jQuery library --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 

<!-- Add fancyBox --> 
<link rel="stylesheet" href="../../../scripts/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" /> 
<script type="text/javascript" src="../../../scripts/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script> 

<link rel="stylesheet" href="../../../scripts/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" /> 
<script type="text/javascript" src="../../../scripts/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    $(".fancybox").fancybox({ 
     fitToView : false, 
     autoSize : false, 
     closeClick : false, 
     openEffect : 'none', 
     closeEffect : 'none', 
     showArrows : true, 
     arrows  : true, 
     type  : 'iframe', 
    }); 
}); 
</script> 

和HTML

<a class="fancybox" rel="andyAdams" href="andyadams/one.html"><img src="thumbnailImages/adams1.jpg" height="150" width="150" alt="Andy Adams" /></a> 

<a class="fancybox" rel="andyAdams" href="andyadams/two.html"><img src="thumbnailImages/adams2.jpg" height="150" width="150" alt="Andy Adams" /></a> 

<a class="fancybox" rel="andyAdams" href="andyadams/three.html"><img src="thumbnailImages/adams3.png" height="150" width="150" alt="Andy Adams" /></a> 

<a class="fancybox" rel="andyAdams" href="andyadams/four.html"><img src="thumbnailImages/adams4.jpg" height="150" width="150" alt="Andy Adams" /></a> 

任何帮助表示赞赏!谢谢!

+1

可能链接在CSS定义图像不正确或图像不存在在指定的位置 – Rafay 2013-03-08 22:35:49

+0

的fancybox精灵png文件应位于fancybox css文件的相同目录 – JFK 2013-03-09 06:21:04

回答

0

是否显示关闭图标?箭头和关闭按钮都在fancybox_sprite.png。图像精灵的文件位置(在background-image.fancybox-close等文件中)很可能是不正确的。尝试使用绝对网址而不是相对网址。 (http://example.com/fancybox_sprite.png而不是../fancybox_sprite.png

+0

关闭图标显示。那是我认为导航没有出现的奇怪之处的另一个原因。是否还有其他信息可以帮助确定问题所在? – AimeeAnn3 2013-03-12 14:50:36

+0

你能够点击箭头应该在哪里?如果是,请打开Chrome并右键单击检查元素。它将允许您检查背景图像是否损坏。 – Mooseman 2013-03-12 16:09:03

0

我有同样的问题。我最初很厌倦把图像放在一个 不同的文件夹(不是css文件夹),并使用css url将它们链接起来... 它没有工作......但是当我把图像放在同一个css文件夹中时... 它的工作...你应该试试......