Fancybox - передать значение в iframe
На странице есть две ссылки с rel="a" и rel="b".
При клике на любую из них всплывает окно(fancybox iframe), внутри которого есть два абзаца p с классами class="a" и class="b" соотвественно. Задача заключается в том чтобы при клике по ссылкам, устанавливать для одного из абзацев класс "show". Возможно ли передать значение в iframe? Код приведенный ниже конечно же не работает, если попытаться вывести значение rel из iframe.
var rel;
$('a.fancybox').fancybox({
beforeLoad : function() {
if ($(this.element).attr('rel') == 'a') {
rel = 'a';
} else if ($(this.element).attr('rel') == 'b') {
rel = 'b';
}
}
});
|
<a rel="a" href="#">Первая ссылка</a>
<a rel="b" href="#">Вторая ссылка</a>
<iframe id="iframe" src="test.html">
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta charset="utf-8" />
<style>
.show{color:red;}
</style>
</head>
<body>
<p class="a">Первый параграф</p>
<p class="b">Второй параграф</p>
</body>
</html>
</iframe>
jQuery(function($) {
$('a[rel]').each(function() {
$(this).on('click', function() {
$( $('#iframe')[0].contentWindow.document )
.find('.' + $(this).attr('rel')).addClass('show');
return false;
});
});
});
|
Цитата:
|
Привычка :)
|
dd_smol, ссылки имеют вид
<a rel="a" class="fancybox.iframe" href="test.html">a</a>и никакого тега iframe на странице нет. Содержимое test.html и есть всплывающее окно. |
Цитата:
Извиняюсь возможно что-то не то говорю просто не работал с данным плагином и внутреннего устройства его не знаю. |
Цитата:
|
spo,
в afterLoad fancybox можно поставить код который вам показал dd_smol, вот тут понадобится each, чтобы обработать каждую ссылку индивидуально |
Цитата:
|
|
Спасибо, настроил и как обычно есть одно маленькое НО.
У меня сразу после загрузки DOM окна, запускается функция которая работает с этим классом "show". И получается что она срабатывает перед назначением класса. Я пробовал вместо afterLoad поставить beforeLoad, но тогда конечно приведенный вами пример не будет работать. В общем получается что клик по ссылке находится в index.html а функция обрабатывающая класс show в test.html |
Все то же что описано выше плюс можно немного уточнить какой именно фрейм брать если он на страницы не один.
$('iframe[src$=' + el.href + ']')
|
dd_smol, фрейм то один test.html
|
Цитата:
Можно пример функции, которая раньше времени отрабатывает. |
dd_smol, вот примерно так:
function init() {...}
google.maps.event.addDomListener(window, 'load', init);
|
События load не подходит для запуска функции так как класс еще не добавлен к параграфу.
Может попробовать запустить функцию после добавления класса?
jQuery(function($) {
$('a[rel]').each(function(i, el) {
$(this).fancybox( {
href : el.href,
type: "iframe",
afterLoad: function() {
var winFrame = $('iframe[src$="' + el.href + '"]')[0].contentWindow;
$( winFrame.document ).find('.' + $(el).attr('rel')).addClass('show');
// Запустить функцию после добавления класса
winFrame.init();
}
});
});
});
http://learn.javascript.ru/play/sOxOx |
dd_smol, событие load взято из примера google maps api.
В том то и дело что во фрейме код google map, который в зависимости от того какому элементу назначен класс curr, устанавливает на карте метки из одного или другого массивов. На главной странице (index.html) две ссылки "карта компании" и "диллеры", при клике на которые всплывает окно (map.html). В файле map.html находятся две ссылки аналогичные тем что в файле index.html и код добавляющий карту. В данном коде есть проверка какая из двух ссылок имеет класс curr. Таким образом в index.html <a rel="a" class="fancybox.iframe" href="map.html">a</a> <a rel="b" class="fancybox.iframe" href="map.html">b</a> и js
$('a[rel]').each(function(i, elem) {
$(this).fancybox({
afterLoad: function() {$($('iframe')[0].contentWindow.document).find('.' + $(elem).attr('rel')).addClass('curr')}
})
});
В map.html <a class="a" href="#">a</a> <a class="b" href="#">b</a> и js
function init() {
// google maps code
coords();
}
function coords() {if($('.a').hasClass('curr')) {coords1()} else {coords2()}}
google.maps.event.addDomListener(window, 'load', init);
|
spo,
google.maps.event.addDomListener(window, 'load', window.setTimeout(init, 1000)); |
рони, такое решение не хотелось использовать
|
А если обернуть вызов метода в промежуточную функцию и вызвать ее по тому принципу что я предложил выше?
function testFunc() {
google.maps.event.addDomListener(window, 'load', init);
}
jQuery(function($) {
$('a[rel]').each(function(i, el) {
$(this).fancybox( {
href : el.href,
type: "iframe",
afterLoad: function() {
var winFrame = $('iframe[src$="' + el.href + '"]')[0].contentWindow;
$( winFrame.document ).find('.' + $(el).attr('rel')).addClass('show');
// Запустить функцию после добавления класса
winFrame.testFunc();
}
});
});
});
|
Цитата:
google.maps.event.addDomListener(window, 'load', init); -- это лишнее тогда |
dd_smol, рони, огромное вам спасибо! Все работает просто чудесно.
|
| Часовой пояс GMT +3, время: 01:05. |