父页面中的Fancybox iframe画廊 [英] Fancybox iframe gallery in parent page
本文介绍了父页面中的Fancybox iframe画廊的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
可能重复:
从iframe调用父级Fancybox
我的主页上有iframe.它的内部是一个画廊，当我单击fancybox图片时，我想在父页面中打开图片.我尝试了任何操作，但只打开了一张照片，没有完整的图库，没有下一个和上一个按钮.
我的例子:
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>FancyBox 1.3.4 | Demonstration</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
function readyFancy(){
$("a#sample").trigger("click");
}
function callMe(site){
$("#sample").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'href' : ''+site+'',
'autoScale' : true,
'onStart' : function(){$("body").css({'overflow':'hidden'});},
'onClosed' : function(){$("body").css({"overflow":"visible"});}
});
readyFancy();
}
</script>
</head>
<body style="padding: 20px;">
<a href="#" id="sample"></a> <!-- here we set a decoy link for the frame to be triggered-->
<p>Below is an iframe</p>
<iframe src="sample.html" width="300" height="200"> <!--the link of the iframe-->
</body>
</html>
sample.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body >
<div>
<a onClick="parent.callMe('http://localhost/fan/1_b.jpg');" href="#" ><img src="1_s.jpg"></a>
<a onClick="parent.callMe('http://localhost/fan/2_b.jpg');" href="#" ><img src="2_s.jpg"></a>
</div>
</body>
</html>
解决方案
如果使用ID作为选择器$("#selector").fancybox();，则切换到类-$(".selector").fancybox();
Possible Duplicate:
call Fancybox in parent from iframe
Hi I have iframe on my home page. Inside it is a gallery and I want to open pictures in my parent page when I click on the fancybox picture. I tried anything but it opens only one picture and no full gallery with next and previous buttons.
My example:
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>FancyBox 1.3.4 | Demonstration</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
function readyFancy(){
$("a#sample").trigger("click");
}
function callMe(site){
$("#sample").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'href' : ''+site+'',
'autoScale' : true,
'onStart' : function(){$("body").css({'overflow':'hidden'});},
'onClosed' : function(){$("body").css({"overflow":"visible"});}
});
readyFancy();
}
</script>
</head>
<body style="padding: 20px;">
<a href="#" id="sample"></a> <!-- here we set a decoy link for the frame to be triggered-->
<p>Below is an iframe</p>
<iframe src="sample.html" width="300" height="200"> <!--the link of the iframe-->
</body>
</html>
sample.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body >
<div>
<a onClick="parent.callMe('http://localhost/fan/1_b.jpg');" href="#" ><img src="1_s.jpg"></a>
<a onClick="parent.callMe('http://localhost/fan/2_b.jpg');" href="#" ><img src="2_s.jpg"></a>
</div>
</body>
</html>
解决方案
If you are using ID as selector $("#selector").fancybox(); then switch to classes - $(".selector").fancybox();
这篇关于父页面中的Fancybox iframe画廊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
