Fancybox 2不会加载Google地图？

我一直可以得到Fancybox 2加载图像没有任何问题。下面的代码可以让我点击图像（barcode.gif）上，并把它在一个的fancybox没有任何问题打开（我严重忽略页面内容，使其更容易看到的图像）：Fancybox 2不会加载Google地图？

<?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>

任何想法？

来源

2012-12-15 drewwyatt

我放在一起这方面的工作这里

唯一的区别是使用的类“的fancybox”和“fancybox.iframe”您<a>例如一个简单的例子

<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").fancybox();。

刚刚在那个JSFiddle中玩，如果我删除“fancybox.iframe”类，我遇到了同样的问题，你看到。我还没有通过Fancybox代码挖掘，但我的第一个假设是它绑定到该特定的类，并防止默认操作。

来源

2012-12-15 22:08:29

繁荣！你统治！ – drewwyatt

@anwyatt：只是一点解释http://stackoverflow.com/a/13869696/1055987 – JFK

Fancybox 2不会加载Google地图？

回答

相关问题