我一直很想让Fancybox 2加载图像而没有任何问题。以下代码允许我单击图像(barcode.gif
)并在花哨的框中打开它,没有任何问题(我大量省略了页面内容,以便更容易看到图像):
<?php require_once('common/inc/default.php'); ?>
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="common/css/default.css" />
<link rel="stylesheet" type="text/css" href="common/css/typography.css" />
<link href='http://fonts.googleapis.com/css?family=Droid+Sans|Lobster' rel='stylesheet' type='text/css'>
<!-- Add jQuery library -->
<script type="text/javascript" src="common/js/lib/jquery-1.8.2.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="common/js/source/jquery.fancybox.js?v=2.1.3"></script>
<link rel="stylesheet" type="text/css" href="common/js/source/jquery.fancybox.css?v=2.1.2" media="screen" />
<link rel="stylesheet" type="text/css" href="common/js/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="common/js/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a#single_image").fancybox();
})
</script>
</head>
<body>
<div id="wrapper">
<header>
<div class="mast">Mighty Wash</div>
<div class="navigation">
<?=build_navigation();?>
</div>
</header>
<section id="main">
<a id="single_image" href="/common/img/barcode.gif"><img src="common/img/barcode.gif" /></a>
</section>
<footer>
</footer>
</div>
</body>
</html>
但是,当我尝试将谷歌地图嵌入iframe时,我一无所获。它只是导航到一个巨大的谷歌地图:
<?php require_once('common/inc/default.php'); ?>
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="common/css/default.css" />
<link rel="stylesheet" type="text/css" href="common/css/typography.css" />
<link href='http://fonts.googleapis.com/css?family=Droid+Sans|Lobster' rel='stylesheet' type='text/css'>
<!-- Add jQuery library -->
<script type="text/javascript" src="common/js/lib/jquery-1.8.2.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="common/js/source/jquery.fancybox.js?v=2.1.3"></script>
<link rel="stylesheet" type="text/css" href="common/js/source/jquery.fancybox.css?v=2.1.2" media="screen" />
<link rel="stylesheet" type="text/css" href="common/js/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="common/js/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.iframe").fancybox();
})
</script>
</head>
<body>
<div id="wrapper">
<header>
<div class="mast">Mighty Wash</div>
<div class="navigation">
<?=build_navigation();?>
</div>
</header>
<section id="main">
<a class="iframe" href="http://maps.google.com/?output=embed&f=q&source=s_q&hl=en&geocode=&q=London+Eye,+County+Hall,+Westminster+Bridge+Road,+London,+United+Kingdom&hl=lv&ll=51.504155,-0.117749&spn=0.00571,0.016512&sll=56.879635,24.603189&sspn=10.280244,33.815918&vpsrc=6&hq=London+Eye&radius=15000&t=h&z=17">Google maps (iframe)</a>
</section>
<footer>
</footer>
</div>
</body>
</html>
有什么想法吗?
我在这里整理了一个简单的例子
唯一真正的区别是在<a>
上使用类"fancybox"和"fancybox.iframe",例如
<a class="fancybox fancybox.iframe" href="https://maps.google.com/?output=embed&f=q&source=s_q&geocode=&q=London+Eye,+County+Hall,+Westminster+Bridge+Road,+London,+United+Kingdom&hl=lv&ll=51.504155,-0.117749&spn=0.00571,0.016512&sll=56.879635,24.603189&sspn=10.280244,33.815918&vpsrc=6&hq=London+Eye&radius=15000&t=h&z=17">Google Map</a>
然后将您的花式盒子调用调整为:相应地$(".fancybox").fancybox();
。
只是在那个JSFiddle中玩,如果我删除"fancybox.iframe"类,我会遇到你看到的同样的问题。我还没有深入研究 Fancybox 代码,但我的第一个假设是它绑定到该特定类,并阻止默认操作。