0
/******************************************************************************
Hover карусель
*******************************************************************************/
.hover-img-add:after {content: "";display: table;clear: both}
.hover-img-add {position: relative;display: block;}
.hover-img-add img {position: relative;display: none;top: 0;left: 0;margin-bottom: 10px}
.hover-img-add img:first-child {display: block}
.tmb-wrap {position: absolute;z-index: 2;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%}
.tmb-wrap .tmb-wrap-table {display: table;height: 100%;width: 100%}
.tmb-wrap-table div {display: table-cell;-webkit-transition: all .3s ease;transition: all .3s ease;-webkit-transition: all .25s ease;transition: all .25s ease;position: relative;border: 1px solid transparent;opacity: 1}
.tmb-wrap-table div:after {content: "";height: 4px;width: 100%;position: absolute;background-color: #e7e7e8;bottom: 3px;left: 0;border-radius: 3px;}
.tmb-wrap-table div.active:after {background-color: #02c1f5;}
.tmb-wrap .tmb-wrap-table:hover div {opacity: 1}
.tmb-wrap-table div:first-child:last-child.active:after {background-color: transparent}
.image-wrap {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;height: 100%;width: 100%}
В main.js и добавьте в самый конец шаблона код:
// Hover карусель изображений
$(function(){
$(".mouseHoverImgCarousel").HoverMouseCarousel();
})
В forall.js и добавьте в самый конец шаблона код:
// Hover карусель изображений
!function(s){s.fn.HoverMouseCarousel=function(){return this.addClass("hover-img-add").append("<div class='tmb-wrap'><div class='tmb-wrap-table'>").append("<div class='image-wrap'>").each(function(){var a=s(this);a.find("img").appendTo(a.find(".image-wrap")).each(function(e){0===e?a.find(".tmb-wrap-table").append("<div class='active'></div>"):a.find(".tmb-wrap-table").append("<div>")})}).find(".tmb-wrap-table").bind("touchmove",function(e){var a=e.originalEvent.changedTouches[0],i=document.elementFromPoint(a.clientX,a.clientY),t=s(i).parent(".tmb-wrap-table").closest(".hover-img-add").find("img"),n=s(i).parent(".tmb-wrap-table").find("div"),d=s(i).index();n.eq(d).hasClass("active")||(t.hide().stop().eq(d).fadeIn(),n.removeClass("active"),s(i).addClass("active"))}).find("div").on({mouseenter:function(){var e=s(this).parent(".tmb-wrap-table").closest(".hover-img-add").find("img"),a=s(this).parent(".tmb-wrap-table").find("div");index=s(this).index(),a.eq(index).hasClass("active")||(e.hide().eq(index).stop().fadeIn(),a.removeClass("active"),s(this).addClass("active"))},mouseleave:function(){var e=s(this).parent().children(),a=s(this).parent(".tmb-wrap-table").closest(".hover-img-add").find("img");0!==s(this).index()&&(a.hide().stop().eq(0).fadeIn("fast"),e.removeClass("active"),e.first().addClass("active"))}}).end()}}(jQuery);
В Редакторе шаблонов---Товары, найдите код:
<a href="{goods.URL_MIN_PRICE_NOW | url_amp}" title="{goods.NAME}" class="product-image">
<img class="goods-image-small lozad" data-src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=summer{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" alt="{goods.NAME}" title="{goods.NAME}" itemprop="image">
</a>
Замените его на:
<a href="{goods.URL_MIN_PRICE_NOW | url_amp}" class="product__image-link mouseHoverImgCarousel">
{% IF goods.IMAGE_EMPTY %}
<img class="lozad" data-src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{goods.NAME}" title="{goods.NAME}" itemprop="image">
{% ELSE %}
<img class="lozad" data-src="{goods.IMAGE_MEDIUM}" alt="{goods.NAME}" title="{goods.NAME}" itemprop="image">
{% FOR images %}
{% IF goods.IMAGE_MEDIUM != goods.images.MEDIUM %}
<img class="lozad" data-src="{goods.images.MEDIUM}" alt="{goods.NAME}" title="{goods.NAME}" itemprop="image">
{% ENDIF %}
{% ENDFOR %}
{% ENDIF %}
</a>
