Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.02.2015, 16:50
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

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-окно, но пролистывать товары нельзя.

Прошу подсказать решение либо для первого либо для второго варианта.
Ответить с цитированием
  #2 (permalink)  
Старый 08.02.2015, 17:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

spo,
для группировкки есть параметр rel="group"
Ответить с цитированием
  #3 (permalink)  
Старый 08.02.2015, 18:02
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

Сообщение от рони Посмотреть сообщение
для группировкки есть параметр rel="group"
Совершенно верно, rel="group" или data-fancybox-group="group"
Если вы имели ввиду использование их тут:
$('tbody tr').click(function (e) {
	e.preventDefault();
	$.fancybox({
		href: $(this).find('a').attr('href'),
		type: 'iframe',
		rel: 'tovar'
	});
});

то это не работает. В этом и заключается моя проблема.
Ответить с цитированием
  #4 (permalink)  
Старый 08.02.2015, 18:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

spo,
а так ?
$('tbody tr').click(function (e) {
e.preventDefault();
$.fancybox.open( $('[rel="tovar"]'), {type: 'iframe'} )
});
Ответить с цитированием
  #5 (permalink)  
Старый 08.02.2015, 19:06
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

А так один по кругу листается.
Переключения на другие товары не происходит.
Ответить с цитированием
  #6 (permalink)  
Старый 08.02.2015, 19:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

spo,
сделали бы макет с минимальным html
Ответить с цитированием
  #7 (permalink)  
Старый 09.02.2015, 17:55
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

Сообщение от рони Посмотреть сообщение
сделали бы макет с минимальным html
Чтото не очень получилось http://jsfiddle.net/hnew3ms2/1/
Ответить с цитированием
  #8 (permalink)  
Старый 09.02.2015, 18:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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>

Последний раз редактировалось рони, 09.02.2015 в 18:50.
Ответить с цитированием
  #9 (permalink)  
Старый 10.02.2015, 11:40
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

Большое спасибо, рони!
Действительно работает. Видимо я где то допустил ошибку когда тестировал.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Две формы в fancybox Paatrick jQuery 0 30.10.2014 16:40
Fancybox при клике на метку Яндекс.Карт не работает с параметрами imax57 jQuery 0 04.10.2014 09:18
Существует ли плагин на подобие fancybox без использования jquery protexon jQuery 1 01.06.2014 19:33
контент fancybox mazur417 jQuery 1 15.03.2014 12:19
Нужно решить две не сложных задачи eropov Работа 1 23.06.2012 17:09