在iframe的父窗口中顯示jQuery prettyPhoto lightbox

我知道這個問題已經在前面討論過了，但我似乎無法完成它的工作。我有一個帶有iframe的主HTML頁面。我正在使用jQuery prettyphoto，我想知道如何在點擊iframe中的鏈接時讓燈箱顯示在父窗口中？在iframe的父窗口中顯示jQuery prettyPhoto lightbox

母版頁：

<!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>Master Page</title> 
</head> 

<body> 
<iframe src="iframe.html" width="300" height="300px" frameborder="0"></iframe> 
</body> 
</html>

的iFrame頁：

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

感謝提供任何幫助。

來源

2010-02-01 Kurt

這隻有在父框架和子框架的域相同時纔有效。

您需要在父框架中加載必要的JavaScript。然後嘗試這樣的事情在iframe：

$(document).ready(function(){ 
    $('a').click(function(){ 
     window.parent.$.prettyPhoto.open($(this).attr('src'), $(this).attr('title'), $(this).children('img').attr('alt')); 
     return false; 
    }); 
});

您可能必須在$('a')選擇更改爲其他。我不認爲你應該在鏈接上放置rel，因爲你可能會在父級和iframe中打開漂亮的照片。

這應該都在理論上起作用。我沒有測試過它。

來源

2010-02-01 21:06:59 CalebD

嗨，我想你的建議，但仍在iframe中顯示相同的結果，而不是父頁面。你會有進一步的建議嗎？ Thanks – Kurt

是否有JavaScript錯誤？您是否從標籤中刪除了rel屬性？如果您將其作爲測試手動調用，那麼漂亮的照片是否會從父框架中工作？你使用的是最新版的漂亮照片嗎？ – CalebD

CalebD的回答是正確的（請參閱帖子瞭解更多詳情）。然而，爲了有機會獲得你必須在父添加以下初始化代碼中的iFrame，母公司的API，以便任何的這個工作

$.fn.prettyPhoto({ social_tools: false });

來源

2012-09-17 19:05:58

在iframe的父窗口中顯示jQuery prettyPhoto lightbox

回答

相關問題