1) Добавляем блок ST315N и настраиваем чтобы он брал товары из каталога.

2) Переходим в настройки —> Дополнительно —> html-код для вставки внутрь head и добавляем код, который находится ниже.

3) В коде можно изменить кратность увеличения. Для этого нужно в первых строках изменить в строке
var scale = "1.5";
1.5 на нужное нам увеличение
Увеличение фотографий товара при наведении работает в блоке ST315N в POPUP при использовании каталога товаров.

Инструкция

Zoom при наведении в карточке товара

Код
<!-- Тильдошная увеличение в карточке товара при наведении -->
<script>
	var scale = "1.5";
	var h, w;
	
	function is_touch_device() {
		return (('ontouchstart' in window)
			|| (navigator.MaxTouchPoints > 0)
			|| (navigator.msMaxTouchPoints > 0));
	}

	$(window).click(function(e){
		if ($(e.target).parents("[href='#prodpopup']").length > 0 && !is_touch_device()) {

			setTimeout(function(){
				$(".t-slds__wrapper .t-slds__bgimg").each(function(i, item){
					$(item)
					.on('mouseover', function(){
						$(item).children('.photo').css({'transform': 'scale(' + scale +')'});
					})
					.on('mouseout', function(){
						$(item).children('.photo').css({'transform': 'scale(1)'});
					})
					.on('mousemove', function(e){
						$(item).children('.photo').css('transform-origin', ((e.pageX - $(item).offset().left) / $(item).width()) * 100 + '% ' + ((e.pageY - $(item).offset().top) / $(item).get(0).offsetHeight) * 100 +'%');
					})
					.each(function(){
						if (i == 0) {
							h = item.offsetHeight;
							w = item.offsetWidth;
						}
						$(item)
							.append('<div class="photo"></div>')
							.children('.photo').css({'background-image': 'url('+ $(item).attr('data-original') +')'}).css({"height":  h + "px", "width": w + "px"});
						$(item).css("background-image", "")
					})
				})
			}, 300);
		}
	})

	// Фикс размера при resize
	var parent, h, w;
	$(window).on("resize", function(){
		setTimeout(function(){
			parent = $(".photo").parent();
			if (parent.length > 0) {
				parent = parent.get(0);
			}
			h = parent.offsetHeight;
			w = parent.offsetWidth;
			$(".photo").css({"height": h + "px", "width": w + "px"})
		}, 200)
	})

	// Если сразу открыта карточка товара
	if (window.location.href.search("tproduct") > 0 && !is_touch_device()) {
		setTimeout(function(){
			$(".t-slds__wrapper .t-slds__bgimg").each(function(i, item){
				$(item)
				.on('mouseover', function(){
					$(item).children('.photo').css({'transform': 'scale('+ scale +')'});
				})
				.on('mouseout', function(){
					$(item).children('.photo').css({'transform': 'scale(1)'});
				})
				.on('mousemove', function(e){
					$(item).children('.photo').css('transform-origin', ((e.pageX - $(item).offset().left) / $(item).width()) * 100 + '% ' + ((e.pageY - $(item).offset().top) / $(item).get(0).offsetHeight) * 100 +'%');
				})
				.each(function(){
					if (i == 0) {
						h = item.offsetHeight;
						w = item.offsetWidth;
					}
					$(item)
						.append('<div class="photo"></div>')
						.children('.photo').css({'background-image': 'url('+ $(item).attr('data-original') +')'}).css({"height":  h + "px", "width": w + "px"});
					$(item).css("background-image", "")
				})
			})
		}, 300)
	}
</script>



<style>
	.photo {
		position: absolute;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}
	.t-slds__item:not(.t-slds__item_active) .photo {
		transform: scale(0) !important;
	}
	.t-slds__imgwrapper {
			overflow: hidden;
	}
</style>
Есть вопросы?
comments powered by HyperComments
Вот что есть еще
Made on
Tilda