Как сделать скролл пальцем на увеличенном фото в fancybox

Поведенческий фактор показывает, что люди, которые просматривают сайты с мобильных устройств и планшетов привыкли перелистывать изображения путем скролла(выражаясь техническим термином, использовать «swipe»). Swipe позволяет перелистывать «страницы» привычным движением пальца, а не щелкать по стрелкам «лево» «право», которые на мобильных устройствах не такие уж и удобные.

Так как по умолчанию в OkayCMS и Simpla CMS встроен скрипт fancybox, который не поддерживает по умолчанию функцию «Swipe» это может быть полезным для Вашего сайта, особенно если он адаптивный.

Приступим к установке:

Первый шаг, это подключение библиотеки, которая поддерживает технологию Swipe

Для этого найдите подключение скрипта fancybox(обычно файл index.tpl) и выполните следующее:

После строки:
<script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js"></script>  {*это подключение скрипта на сайте*}

Добавьте новый код: 
<script type="text/javascript" src="js/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.touchSwipe.js"></script>

После этого приступаем ко второму шагу и выполняем настройку скрипта, для этого найдите вызов функции fancybox( может находиться в файле по адресу design/название темы/html/product.tpl или же в одном из скриптов в папке design/js ) :

//Зум картинок
	$("a.zoom").fancybox({
		prevEffect	: 'fade',
		nextEffect	: 'fade'
	});

И замените эту часть кода на вот эту:

$("a.zoom").fancybox({
		prevEffect	: 'fade',
		nextEffect	: 'fade',
		helpers	: {
			thumbs	: {
				width	: 50,
				height	: 50
			}
		},
		beforeShow: function () {
			var imgAlt = $(this.element).find("img").attr("alt");
			if (imgAlt) {
				$(".fancybox-image").attr("alt", imgAlt);
			} 
		},
        afterShow: function() {
            $('.fancybox-wrap').swipe({
                swipe : function(event, direction) {
                    if (direction === 'left' || direction === 'up') {
                        $.fancybox.prev( direction );
                    } else {
                        $.fancybox.next( direction );
                    }
                }
            });
        }
	});

Из конструкции
                    if (direction === 'left' || direction === 'up') {
                        $.fancybox.prev( direction );
                    } else {
                        $.fancybox.next( direction );
                    }

Следует что при движении влево и вверх, будет показываться предыдущее изображение, то есть перелистывание влево, а при движениях вниз и вправо – перелистывание вправо.

Спасибо за внимание! В случае вопросов обращайтесь к нам.