отобразить лайтбокс jquery prettyPhoto в родительском фрейме iframe
-
18-09-2019 - |
Вопрос
Я использую jquery prettyphoto 2.5.3, и мне было интересно, как я могу заставить световой блок отображаться в родительском окне iframe, когда выбрана ссылка на изображение внутри iframe?
Вот мой код:
Страница в iframe:
<html>
<head>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
</head>
<body>
<a href="animage.jpg" rel="prettyPhoto">
<img src="animage.jpg" height="200" width="200"/>
</a>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</body>
Когда я загружаю эту страницу сам по себе, лайтбокс работает нормально.
Код Iframe:
<html>
<head>
</head>
<body>
<iframe src="inner.html"/>
</body>
</html>
Однако, когда я загружаю страницу с помощью iframe и нажимаю на ссылку на изображение на странице, которая находится в iframe, я хочу, чтобы лайтбокс отображался в родительском окне, а не в iframe.
Решение
Попробуйте этот селектор: $("#myid", top.document)
Top.document указывает селектору выбрать элемент myid, который существует в самом верхнем документе (вашей родительской странице).Для того, чтобы это работало, jQuery должен быть загружен в файл, который просматривается через iframe.
Источник: http://groups.google.com/group/jquery-en/browse_thread/thread/5997ef4a60a123af?pli=1
Редактировать
Хорошо, единственный способ, которым это сработает, это:
Удалите следующий код из вашей реальной страницы (inner.html тот, содержащиеся в iframe):
<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); });
Теперь на вашей странице iframe добавьте:
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/> <script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
Также добавьте следующий JS-код:
$(function() { $("iframe").contents().find("a[rel^='prettyPhoto']").click(function() { $(this).prettyPhoto(); return false; } ); });
Это должно сработать, но тогда это будет работать ТОЛЬКО для страницы iframe, а не непосредственно с реальной страницы.
Другие советы
нашел это где-то
<base target="_parent" />
поместите это в заголовок IFRAME
Я решил проблему с iframe, используя копии данных.См. код сценария на главной странице:Примечание:В моем коде есть изображение, которое запускает галерею, но галерея не видна, идентификатор изображения — «btngaleria».
$("#iPrincipal").load(function(){
$("#iPrincipal").contents().find("#btngaleria").click(function() {
var temp=$("#iPrincipal").contents().find("#galeria").html();
$("#galeria").html(temp);
$("#galeria:first a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',slideshow:4000, autoplay_slideshow: true});
$("#galeria li:first a").click();
});
});
HTML-код iframe:
<iframe src="home.asp" name="iPrincipal" id="iPrincipal" frameborder="0" width="100%" height="540"></iframe>
И div внизу страницы, который получает скопированные данные:
<div id="falso" style="display:none; visibility:hidden"><ul id="galeria" class=""></ul></div>
Я сделал тесты для FF и IE и заработал нормально.
Изменения кода, которые я внес, были:
- Добавлен новый параметр true/false в настройках, которые начинаются со строки 18.то есть
displayIframeContentsInParent: false
, Примерно на линии 92 в
if(theGallery)
if block проверьте, установлено ли для нового параметра значение true, и если да, найдите в содержимом iframe дополнительные изображения в галерее:if(settings.displayIframeContentsInParent) { $("iframe").contents().find('a[rel*='+theGallery+']').each(function(i) { if($(this)[0] === $(link)[0]) setPosition = i; images.push($(this).attr('href')); titles.push($(this).find('img').attr('alt')); descriptions.push($(this).attr('title')); }); }
Примерно в строке 125 в открытой функции:в
if($.browser.msie && $.browser.version == 6)
if else Block, добавьте следующее, чтобы также скрыть поля со списком в iframe:if(settings.displayIframeContentsInParent) { $("iframe").contents().find('select').css('visibility','hidden'); }
Наконец, примерно на строке 300 в функции закрытия:в
if($.browser.msie && $.browser.version == 6)
if else Block, добавьте следующее, чтобы снова сделать поля со списком в iframe видимыми:if(settings.displayIframeContentsInParent) { $("iframe").contents().find('select').css('visibility','visible'); }
Конечно, теперь, когда вы используете красивую фотографию, вам нужно будет установить для нового параметра значение true, чтобы он выполнял поиск в содержимом iframe других изображений для отображения, т.е.
$("a[rel='prettyphoto']").each(function() {
$(this).prettyPhoto(displayIframeContentsInParent: true);
});
Я разместил ссылку на эти изменения на форуме поддержки PrettyPhoto, так что, надеюсь, эти изменения будут включены в исходный код PrettyPhoto.
Я закончил на этом:
<script type="text/javascript">
$('iframe').load(function(){
$(this).contents().find("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
Он просматривает все iframe на главной странице.JQuery внутри кода iframe не требуется.
Вот и все, что содержимое iFrame должно быть загружено, прежде чем вы попытаетесь получить к нему доступ:
http://grasshopperpebbles.com/ajax/using-jquery-to-access-iframe-content/