在没有手动打开的情况下,从Iframe调用父级中的Fancybox
call Fancybox in parent from Iframe with no manual open
我想我可以在这里得到答案->从iframe调用parent中的Fancybox,演示页面显示了我想要的东西(http://www.picssel.com/playground/jquery/fancyboxFromIframe_16Jan12.html)但问题是我没有相同的脚本。。。
而不是(我想这是手动打开):
$(".video").click(function() {
$.fancybox({
'padding' : 0,
// more options (v2.x) etc
我这样称呼这些图片:
$(document).ready(function() {
$(".fancybox-thumbs").fancybox({
padding: 0,
// etc
我试着这样更改我的代码(基于答案和演示):
$(document).ready(function() {
parent.$(".fancybox-thumbs").fancybox({
padding: 0,
// etc
但它不起作用。有人能告诉我应该如何更改我的代码,即iframe中的拇指,打开父页面上的图像,调整大小以适应屏幕吗?
提前感谢!
我找到了答案,不幸的是,我从未(!)在论坛上提出过自己的问题。。。我把它分享给你,也许它对某人有帮助:
1首先,我将.css和.js文件链接到parent html和iframe html。
2我的父母html
<body>
<div id="more">
<div class="container">
<div id="sensuality-div">
<iframe id="sensuality-frame" src="http://www.igorlaszlo.com/sensuality.html" width="100%" height="100%" style="overflow:hidden;height:100%;width:100%;" scrolling="no" allowTransparency="true" frameborder="0" sandbox="allow-same-origin allow-forms allow-scripts" ></iframe>
</div>
</div>
</div>
</body>
3我的iframe html
<body id="sensuality-body">
<div class="view view-add">
<img src="http://www.igorlaszlo.com/uploads/thumbs/41.jpg" alt="Thierry Mercier 16" />
<div class="mask">
<a href="http://www.igorlaszlo.com/uploads/images/41.jpg" class="fancybox-thumbs" rel="group1" alt="Model : Thierry Mercier - 2009 June" title="34 Dance in the Dark">
<h4>Dance in the Dark</h4>
<p>Model : Thierry Mercier</p>
<info>Click for zoom</info>
</a>
</div>
</div>
<div class="view view-add">
<img src="http://www.igorlaszlo.com/uploads/thumbs/41.jpg" alt="Thierry Mercier 16" />
<div class="mask">
<a href="http://www.igorlaszlo.com/uploads/images/41.jpg" class="fancybox-thumbs" rel="group1" alt="Model : Thierry Mercier - 2009 June" title="34 Dance in the Dark">
<h4>Dance in the Dark</h4>
<p>Model : Thierry Mercier</p>
<info>Click for zoom</info>
</a>
</div>
</div>
</body>
4我调用fancybox(不是手动打开)的原始代码如下(我在父页面和iframe页面上都有):
<script>
$(document).ready(function() {
$(".fancybox-thumbs").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
prevEffect : 'elastic',
nextEffect : 'elastic',
closeBtn : true,
arrows : true,
nextClick : true,
beforeShow: function () {
this.title = $(this.element).attr('title');
this.title = '<h3>' + this.title + '</h3>' + $(this.element).attr('alt') + '<br />';
},
afterShow: function() {
},
helpers : {
title : { type: 'inside' }
}
});
});
</script>
5哈克:我把我找到的代码组合在一起(http://www.dynamicdrive.com/forums/archive/index.php/t-56981.html)与我的,我在我的iframe页面上添加了一个附加脚本:
<script type="text/javascript">
jQuery(function($) {
if(top !== window){
var $$ = parent.jQuery;
$$('#sensuality-div').html($('#sensuality-body').html()).find('a').fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
prevEffect : 'elastic',
nextEffect : 'elastic',
closeBtn : true,
arrows : true,
nextClick : true,
beforeShow: function () {
this.title = $(this.element).attr('title');
this.title = '<h3>' + this.title + '</h3>' + $(this.element).attr('alt') + '<br />';
},
afterShow: function() {
},
helpers : {
title : { type: 'inside' }
}
});
$("#sensuality-body a").click(function(e){
$$('#' + this.class).click();
});
}
else {
$("#sensuality-body a").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
prevEffect : 'elastic',
nextEffect : 'elastic',
closeBtn : true,
arrows : true,
nextClick : true,
beforeShow: function () {
this.title = $(this.element).attr('title');
this.title = '<h3>' + this.title + '</h3>' + $(this.element).attr('alt') + '<br />';
},
afterShow: function() {
},
helpers : {
title : { type: 'inside' }
}
});
}
});
</script>
也许你可以让它变得更容易,也许我添加了很多不必要的代码,我知道它工作得很好。。。
我看到很多人都在为这种问题寻找解决方案,希望能帮助到你!
很快你就可以在www.igorlaszlo.com
相关文章:
- 从iframe调用Parent函数,然后更新iframe表单值
- 当用户滚动到 iframe 或 iframe 位于视口中时,从 iframe 调用 js 函数
- 从使用 jquery 创建的 iframe 调用父函数
- 在没有手动打开的情况下,从Iframe调用父级中的Fancybox
- IFrame调用父函数
- 从iframe调用javascript方法
- 使用firefox从iframe调用父函数
- 从iframe调用javascript函数
- 使用JavaScript为iframe调用链接
- 从iframe调用OnServerClick不工作
- 我想从页面上的外部iframe调用js函数之一
- 从iframe调用文档中的js方法
- 从html对象或iframe调用javascript
- 从iframe调用parent上的touch事件
- Javascript:从iframe调用parent中的函数
- Javascript从外部域iframe调用函数
- 如何在更新面板中从iframe调用父页面javascript
- 使用PhoneGap时,从iframe调用父jQuery函数
- ReferenceError:从iframe调用时未定义函数
- 如何理解我的网页从外部网站在iframe调用