Fancybox - две взаимозависимые задачи
1.
Имеется таблица, в которой каждая строка - это товар (изображение, название и пр. харрактеристики). В одной из ячеек есть iframe.fancybox-ссылка вида tovar.html Ссылка имеет атрибут data при помощи которого товары сгруппированы, для пролистывания в fancybox-окне. Задача: сделать кликабельной всю строку в таблице. Проблема: ошибка too much recursion
$('tbody tr').click(function() {
$(this).find('a').click();
});
В сети есть материал на эту тему но у меня так и не получилось разобраться. 2. Частично решил задачу следующим образом:
$('tbody tr').click(function (e) {
e.preventDefault();
$.fancybox({
href: $(this).find('a').attr('href'),
type: 'iframe'
});
});
Но данный метод не позволяет передать атрибут для группированных товаров. То есть все работает - при клике на строке открывается fancybox-окно, но пролистывать товары нельзя. Прошу подсказать решение либо для первого либо для второго варианта. |
spo,
для группировкки есть параметр rel="group" |
Цитата:
Если вы имели ввиду использование их тут:
$('tbody tr').click(function (e) {
e.preventDefault();
$.fancybox({
href: $(this).find('a').attr('href'),
type: 'iframe',
rel: 'tovar'
});
});
то это не работает. В этом и заключается моя проблема. |
spo,
а так ?
$('tbody tr').click(function (e) {
e.preventDefault();
$.fancybox.open( $('[rel="tovar"]'), {type: 'iframe'} )
});
|
А так один по кругу листается.
Переключения на другие товары не происходит. |
spo,
сделали бы макет с минимальным html |
Цитата:
|
spo,
и чем вас не устроил код в 4 посте?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script type='text/javascript' src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<script type='text/javascript'>
$(function() {
$("tbody tr").click(function(e) {
e.preventDefault();
$.fancybox.open($('[rel="block"]'), {
type: "iframe",
iframe: {
scrolling: "auto",
preload: true
},
width: "70%",
height: "70%"
})
})
});
</script>
</head>
<body>
<table>
<tr>
<td><a class="block-fancybox fancybox.iframe" href="http://ru.wikipedia.org/wiki/%D0%92%D0%BE%D0%B4%D0%BE%D1%80%D0%BE%D0%B4" rel="block"><img src="img/block.png" alt="" /></a></td>
<td>text</td>
<td><a class="block-fancybox fancybox.iframe" href="https://ru.wikipedia.org/wiki/%D0%9A%D0%B8%D1%81%D0%BB%D0%BE%D1%80%D0%BE%D0%B4" rel="block"><img src="img/block.png" alt="" /></a></td>
<td>text</td>
</tr>
<tr>
<td><a class="block-fancybox fancybox.iframe" href="https://ru.wikipedia.org/wiki/%D0%A5%D1%80%D0%BE%D0%BC" rel="block"><img src="img/block.png" alt="" /></a></td>
<td>text</td>
<td><a class="block-fancybox fancybox.iframe" href="https://ru.wikipedia.org/wiki/%D0%A6%D0%B8%D0%BD%D0%BA" rel="block"><img src="img/block.png" alt="" /></a></td>
<td>text</td>
</tr>
</table>
</body>
</html>
|
Большое спасибо, рони!
Действительно работает. Видимо я где то допустил ошибку когда тестировал. |
| Часовой пояс GMT +3, время: 16:42. |