我正在使用fancyBox 2来显示iframe内容组。我可以使用键盘上的箭头浏览内容,点击内容的右侧或左侧,但我无法显示箭头。我甚至设置箭头一直是可见的,而不仅仅是悬停,仍然没有运气。我将在某些iframe中拥有可点击的内容,因此我需要能够关闭内容中任何位置的点击导航功能。此选项也会干扰滚动条。
这是我的代码
<!-- 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>
任何帮助表示赞赏!谢谢!
答案 0 :(得分:0)
关闭图标是否显示?箭头和关闭按钮都在fancybox_sprite.png
中。图像精灵的文件位置(在background-image
上的.fancybox-close
的CSS中)很可能不正确。尝试使用绝对URL而不是相对URL。 (http://example.com/fancybox_sprite.png
代替../fancybox_sprite.png
)
答案 1 :(得分:0)
我遇到了同样的问题。我最初厌倦了将图像放入 不同的文件夹(不是css文件夹)并使用css url链接它们... 它没有用......但是当我把图像放在同一个css文件夹中时...... 它有用......你应该试试......