个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我已经能够让 Fancybox 2 毫无问题地加载图像。下面的代码允许我单击图像 (barcode.gif) 并在 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#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").fancybox();相应地。
只是玩那个 JSFiddle，如果我删除 "fancybox.iframe"类，我会遇到与您看到的相同的问题。我没有仔细研究 Fancybox 代码，但我的第一个假设是它绑定(bind)到那个特定的类，并阻止默认操作。
关于jquery - Fancybox 2 不会加载谷歌地图？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13896340/
25
4
0
我有三个 html 页面，index.html、first.html 和 second.html。在索引页中，我有一个按钮 B1。当我单击该按钮时，会打开一个精美的框，其中包含 first.html
在我的网站上，我有一个 fancybox，其中包含隐藏的 的内容。在页面上。这个隐藏包含指向外部站点的链接。 是否可以在已经打开的 fancybox 中打开此链接？ 我目前的代码如下: $("#li
Here我的链接是花哨的盒子，在笔记本电脑和台式机的所有浏览器中都可以正常工作，但是当您在移动设备(尤其是 I-PAD 这样的移动设备)中打开它时，叠加层会隐藏整个内部 html 内容。非常感谢您的回
我正在使用带有自定义模板的 fancybox-3 插件: $().fancybox({ selector : '[data-fancybox="images"]', animati
我正在尝试通过 Fancybox 内容中的链接关闭 Fancybox 实例。我正在按照 this question 中的建议使用 parent.jQuery.fancybox.close(); .它第
我使用 fancybox 作为联系表单。并在页面加载时打开。所以我使用了以下代码。 jQuery.fancybox.open('#fancy'); 我已经尝试过这个，但 fancybox 在加载时无法
如果脚本仅在 Fancybox 打开的页面上加载，CKEditor + Fancybox 似乎可以工作。然而，如果父页面已经初始化了 CKEditor，那么任何 Fancybox 打开的带有 CKEd
我有关于 Fancybox 3 的问题。我的网页有很多(10-15)个图片库，每个图片库大约有 50 张图片。每个画廊在主页上都有一个图片链接。 什么fancybox使用更好/更有效？: 不带缩略图使
从 2.x 升级到 3.0 后，我的应用程序崩溃了。新版本有没有类似的功能 $.fancybox.showLoading(); $.fancybox.helpers.overlay.open(); 最
转到:http://fancybox.net/打开任何示例(在底部页面) 当鼠标悬停在 fancybox 内的内容上时，浏览器主窗口无法滚动。当鼠标在其他地方时它就可以工作。我不想要这种行为。你会如何
How do I open fancybox via manual call for a gallery in the html not via the jquery options? 这回答了手动打
当用户关闭 Fancybox 对话框时如何重新加载当前页面？ 最佳答案 使用 fancybox onClosed 处理程序； $('#some_element').fancybox({ onClo
我想要一个按钮来打开带有特定图片的 fancybox rel-group。我不太确定这是否有效，但我会试一试。我的问题是，如果用户单击链接，我想执行 jQuery。这是我的代码 var js = "j
我遇到了 fancybox 加载缓存图像的问题。我想确保图像在出现在页面上之前不被缓存，但是我试图通过它的各种回调(beforeShow、afterShow、afterLoad、beforeLoad)
我正在尝试编写一段代码，在用户单击 fancybox 中的其中一个选项后(选择一个选项后 fancybox 将关闭) 这是我的代码 索引.php Field: 选择字段.php
我坚持为我的照片设置 Fancybox 窗口，我是这样做的: $(document).ready(function() { $('.fancybox').fancybox(); }); 这是Fa
我想打开一个花哨的盒子，但是它给出了一个类型错误，你能帮我解决这个问题吗 查看页面包含以下代码 $(document).ready(function() { $('.fancybox').fancy
我有 2 个 fancyboxes，我试图从第一个打开第二个(通过按钮或关闭第一个).. I'm the first Fancybox! Close first Fancybox
嗨，我正在尝试将变量从子 iframe fancybox 发送到父级。但我似乎无法掌握如何做到这一点。有没有人有想法。我已经尝试过用js了。有 friend 建议用php来做，但还没有找到解决方案。我
我想知道一种加载我的 fancybox 并将 fancybox 附加到此 fancybox 中的链接之一的方法。我从今天开始使用最新版本的 fancybox (2.0.1)。 这是我尝试过但没有成功的
我是一名优秀的程序员,十分优秀！