display jQuery prettyPhoto lightbox in parent window from iframe
I know this issue has been discussed before but I can't seem to get it to work. I have a master HTML page with an iframe. I am using jQuery prettyphoto and I was wondering how I can get the light box to display in the parent window when I click on the link in the iframe?
Master Page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/199开发者_JAVA百科9/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Master Page</title>
</head>
<body>
<iframe src="iframe.html" width="300" height="300px" frameborder="0"></iframe>
</body>
</html>
iFrame Page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iframe</title>
<style type="text/css" media="screen">
@import url("assets/css/infotech-iframes.css");
@import url("assets/css/infotech-popup.css");
</style>
<script src="assets/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/jquery.popup.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<a href="assets/images/screenshots/campaign-setup-lg.png" rel="prettyPhoto[gallery]"><img src="assets/images/screenshots/campaign-setup-sm.gif" /></a>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</body>
</html>
Thanks for any help provided.
CalebD's answer is correct (please see the post for more details). However in order to have access to the API in the parent of the iFrame you must add the following initialization code in the parent, in order for any of this to work
$.fn.prettyPhoto({ social_tools: false });
This will only work if the domain for the parent and child frames are the same.
You'll need to load the necessary JavaScript in the parent frame. Then try something like this in the iframe:
$(document).ready(function(){
$('a').click(function(){
window.parent.$.prettyPhoto.open($(this).attr('src'), $(this).attr('title'), $(this).children('img').attr('alt'));
return false;
});
});
You might have to change the $('a') selector to something else. I don't think you should put rel on the links because you might get pretty photo opening in both the parent and the iframe.
This should all work in theory. I have not tested it.
加载中,请稍侯......
精彩评论