afficher jQuery prettyPhoto lightbox dans la fenêtre parent de iframe

Je sais que ce problème a déjà été discuté mais je n'arrive pas à le faire fonctionner. J'ai une page HTML maître avec un iframe. J'utilise jQuery prettyphoto et je me demandais comment je peux obtenir la boîte à lumière à afficher dans la fenêtre parent lorsque je clique sur le lien dans l'iframe?afficher jQuery prettyPhoto lightbox dans la fenêtre parent de iframe

Maître 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>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>

Merci pour toute aide fournie.

Source

2010-02-01 Kurt

Cela ne fonctionnera que si le domaine des trames parent et enfant est le même.

Vous aurez besoin de charger le JavaScript nécessaire dans le cadre parent. Ensuite, essayez quelque chose comme ça dans le iframe:

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

Vous pourriez avoir à changer le sélecteur $('a') à autre chose. Je ne pense pas que vous devriez mettre rel sur les liens, car vous pourriez obtenir une jolie ouverture de photo à la fois dans le parent et l'iframe.

Tout devrait fonctionner en théorie. Je ne l'ai pas testé.

Source

2010-02-01 21:06:59 CalebD

Salut, J'ai essayé votre suggestion, mais encore obtenir le même résultat de l'affichage de la visionneuse dans l'iframe au lieu de la page parente. Auriez-vous d'autres suggestions? Merci – Kurt

Y a-t-il eu des erreurs JavaScript? Avez-vous supprimé l'attribut rel des balises ? La jolie photo fonctionne-t-elle à partir du cadre parent si vous l'appelez manuellement comme test? Utilisez-vous la version la plus récente de jolie photo? – CalebD

La réponse de CalebD est correcte (veuillez consulter le poste pour plus de détails). Toutefois, afin d'avoir accès à l'API dans le parent de l'iFrame vous devez ajouter le code d'initialisation suivante dans le parent, pour tout cela travailler

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

Source

2012-09-17 19:05:58

afficher jQuery prettyPhoto lightbox dans la fenêtre parent de iframe

Répondre

Questions connexes