Задать вопрос

Как заставить выполняться Fancybox по клику на фотораме?

Добрый день!

Есть сайт с картинками и Фоторамой 3, по клику срабатывал callback "onClick" и обрабатывал fancybox.

if ($('div#fotorama').length>0) {
        	$.fn.noop = function(){return this};
            var fotorama = $('div#fotorama')
            ,	fancy_data = [];
			fotorama.find('img').each(function(){
				fancy_data.push({href:$(this).data('b')});
			});

            fotorama.fotorama({
               onClick: function(data) {
				var fotoramaClasses = fotorama.attr('class');
				var fotoramaTouchStyle = fotorama.data('options').touchStyle;
				// fancybox manual call
				$.fancybox(/*fotorama.data('options').*/fancy_data, {
					type: 'image',
					index: data.index,
					changeFade: 333,
					transitionIn: 'elastic',
					transitionOut: 'elastic',
					padding: 0,
					orig: $('.fotorama__wrap', fotorama),
					onStart: function(fancybox, i) {
						$.extend(fotorama.data('options'), {touchStyle: false});
						fotorama
								.trigger('showimg', [i, 333])
								.removeClass('fotorama_csstransitions')
								.find('.fotorama__wrap')
								.removeClass('fotorama__wrap_style_touch')
								.addClass('fotorama__wrap_style_fade')
								.find('.fotorama__frame').not('.fotorama__frame_active')
								[fotoramaTouchStyle ? 'fadeTo': 'noop'](0, 0);
					},
					onClosed: function() {
						$.extend(fotorama.data('options'), {touchStyle: fotoramaTouchStyle});
						fotorama
							.trigger('showimg', [undefined, 0])
							.attr({'class': fotoramaClasses})
							.find('.fotorama__wrap')
							[fotoramaTouchStyle ? 'addClass' : 'removeClass']('fotorama__wrap_style_touch')
							[!fotoramaTouchStyle ? 'addClass' : 'removeClass']('fotorama__wrap_style_fade')
							.find('.fotorama__frame')
							[fotoramaTouchStyle ? 'fadeTo': 'noop'](0, 1);
					}
				});
				// stop fotorama
				return false;
			  }
            });
        }


Нужно перейти на Фотораму 4, сам скрипт встал отлично, но теперь по клику ничего не происходит.
В документации к Фотораме 3 есть описание колбека "onClick" а в описании фоторама 4 его почему то нет.

Опытным путем выяснил, что в onClick: function(data) {} скрипт даже не заходит.
Пробовал код fancybox'а вставить в fotorama.click(function(){}), тогда скрипт туда заходит, но на сайте по-прежнему по клику fancybox'а не появляется.
Подскажите, как заставить выполняться Fancybox по клику на фотораме.
  • Вопрос задан
  • 7577 просмотров
Подписаться 3 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 2
kudesa
@kudesa
Проектирую и верстаю адаптивные сайты
В 4 версии все проще.
<div class="fotorama" data-nav="thumbs" data-width="470" data-height="360" data-thumbwidth="111" data-thumbheight="84" data-thumbborderwidth="0" data-thumbmargin="10">
    <div class="fotorama__wrap-link" data-img="pic/photo-5.jpg"><a href="pic/photo-5-big.jpg" class="fancybox"></a></div>
    <div class="fotorama__wrap-link" data-img="pic/photo-6.jpg"><a href="pic/photo-6-big.jpg" class="fancybox"></a></div>
    <div class="fotorama__wrap-link" data-img="pic/photo-7.jpg"><a href="pic/photo-7-big.jpg" class="fancybox"></a></div>
    <div class="fotorama__wrap-link" data-img="pic/photo-8.jpg"><a href="pic/photo-8-big.jpg" class="fancybox"></a></div>
</div>
Ответ написан
mutaev_murad
@mutaev_murad
У тебя в скрипте написано ($('div#fotorama') а в верстке class="fotorama", поменяй решетку на точку.чтоб было вот так ($('div.fotorama')
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы