Fatal编程技术网
  • jquery/
  • Jquery Fancybox 2赢得'；不加载谷歌地图？

Jquery Fancybox 2赢得'；不加载谷歌地图？

jquery html css

Jquery Fancybox 2赢得'；不加载谷歌地图？,jquery,html,css,fancybox,Jquery,Html,Css,Fancybox,我已经能够让Fancybox 2加载图像，没有任何问题。下面的代码允许我单击图像（barcode.gif），并在fancybox中打开图像，不会出现任何问题（我省略了大量页面内容，以便更容易查看图像）： $（文档）.ready（函数（）{ $（“单个图像”）.fancybox（）； }) 豪洗 然而，当我试图将谷歌地图嵌入iframe时，我什么也得不到。它只是导航到一个巨大的谷歌地图： <?php require_once('common/inc/default.php'); ?>

我已经能够让Fancybox 2加载图像，没有任何问题。下面的代码允许我单击图像（
barcode.gif
），并在fancybox中打开图像，不会出现任何问题（我省略了大量页面内容，以便更容易查看图像）：


$（文档）.ready（函数（）{
$（“单个图像”）.fancybox（）；
})
豪洗
然而，当我试图将谷歌地图嵌入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>


$（文档）.ready（函数（）{
$（“a.iframe”）.fancybox（）；
})
豪洗
有什么想法吗？

我在这里列出了一个简单的工作示例

唯一真正的区别是在
然后将fancybox调用调整为：
$（“.fancybox”）.fancybox（）相应地

在JSFIDLE中，如果我删除“fancybox.iframe”类，我会遇到与您看到的问题相同的问题。我还没有深入研究Fancybox代码，但我的第一个假设是它绑定到特定的类，并阻止默认操作


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