Отправлено от
Ribka (19 Август 2017 - 16:14) писал:
Добрый день!
Подскажите как сделать такую модификацию на своем сайте?
Подскажите как сделать такую модификацию на своем сайте?
<div class="product-image">
<div class="general-img">
<a href="{GOODS_IMAGE_LARGE}" id="zoom1" title="Увеличить {GOODS_NAME}">
<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" class="goods-image-medium" itemprop="image"/>
{% IF GOODS_IS_NEW %}
<span class="ico-new">Новинка</span>
{% ELSEIF GOODS_IS_TOP %}
<span class="ico-best">Хит</span>
{% ENDIF %}
{% IF GOODS_MOD_MAX_DISCOUNT %}
<span class="ico-sale">Скидка</span>
{% ENDIF %}
</a>
<div class="goodsImageZoom" data="{GOODS_IMAGE_ID}" style="display: none;"><a href="#" title="Увеличить изображение"></a></div>
{% IFNOT goods_images_empty %}
<div class="goodsImageList" style="display: none;">
{% FOR goods_images %}
<a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" rel="gallery"><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
{% ENDFOR %}
</div>
{% ENDIF %}
</div>
</div>
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
<div class="thumblist-box navigation" {% FOR goods_images %}{% IF goods_images.length <= 1 %}style="display:none;"{% ENDIF %}{% ENDFOR %}>
<span class="next"></span>
<span class="prev"></span>
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
{% IFNOT goods_images_empty %}
<div class="thumblist">
{% FOR goods_images %}
{% IFNOT goods_images.first %}
<li><a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="thumblisticon" rel="gallery"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li>
{% ENDIF %}
{% ENDFOR %}
</div>
{% ENDIF %}
</div><!-- END другие изображение товара -->
и замените его на
<div class="product-image">
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
<div class="thumblist-box navigation" style="display:none;">
<span class="slide-control next"></span>
<span class="slide-control prev"></span>
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
{% IFNOT goods_images_empty %}
<ul class="thumblist">
{% FOR goods_images %}
{% IFNOT goods_images.first %}
<li><a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="thumblisticon" rel="gallery"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li>
{% ENDIF %}
{% ENDFOR %}
</ul>
{% ENDIF %}
</div><!-- END другие изображение товара -->
<div class="general-img">
<a href="{GOODS_IMAGE_LARGE}" id="zoom1" title="Увеличить {GOODS_NAME}">
<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" class="goods-image-medium" itemprop="image"/>
{% IF GOODS_IS_NEW %}
<span class="ico-new">Новинка</span>
{% ELSEIF GOODS_IS_TOP %}
<span class="ico-best">Хит</span>
{% ENDIF %}
{% IF GOODS_MOD_MAX_DISCOUNT %}
<span class="ico-sale">Скидка</span>
{% ENDIF %}
</a>
<div class="goodsImageZoom" data="{GOODS_IMAGE_ID}" style="display: none;"><a href="#" title="Увеличить изображение"></a></div>
{% IFNOT goods_images_empty %}
<div class="goodsImageList" style="display: none;">
{% FOR goods_images %}
<a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" rel="gallery"><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
{% ENDFOR %}
</div>
{% ENDIF %}
</div>
</div>
Затем найдите код
.product-view .product-img-box {margin-bottom: 30px;}
.product-view .product-img-box .general-img {position: relative;text-align: center;min-height: 200px;}
.product-view .product-img-box .general-img img {max-width: 100%;}
.thumblist-box {position: relative;overflow: hidden;padding: 15px 0;margin-top: 15px;border-top: 3px double #e5e5e5;border-bottom: 3px double #e5e5e5;}
.thumblist-box .next, .thumblist-box .prev {display: none;position: absolute;top: 35%;right: 0px;margin: 0 0 0 5px;font-family: fontawesome;cursor: pointer;z-index: 2;}
.thumblist-box .prev {float:left;left: 0px;margin: 0 5px 0 0;}
.thumblist-box .prev:before {content: "\f104";}
.thumblist-box .next:before {content: "\f105";}
.thumblist li {display: block;float: left;margin: 0 30px;}
.thumblist li a {display: inline-block;text-align: center;width: {SETTINGS_GOODS_IMAGES_SIZE_ICON | divide("2")}px;height: {SETTINGS_GOODS_IMAGES_SIZE_ICON | divide("2")}px;line-height: {SETTINGS_GOODS_IMAGES_SIZE_ICON | divide("2")}px;}
и замените его на
.product-view .product-img-box {margin-bottom: 30px;}
.product-view .product-img-box .general-img {position: relative;text-align: center;min-height: 200px;margin: 0 0 0 110px; margin-top: 30px;}
.product-view .product-img-box .general-img img {max-width: 100%;}
.thumblist-box {width: 92px;position: relative;float: left;top: 0px;left: 0px;z-index: 1;}
.thumblist-box .slide-control {display: block;position: absolute;margin: 0;width: 100%;height: 21px;line-height: 20px;left: 0;right: auto;cursor: pointer;z-index: 9;background-color: #DCDCDC;color: #fff;text-align: center;font-family: fontawesome;font-size: 14px;}
.thumblist-box .slide-control:hover {background-color: #ADD8E6;}
.thumblist-box .slide-control.hide, .thumblist-box .slide-control.hide.hide2 {display: none;}
.thumblist-box .next:before {content: "\f078";}
.thumblist-box .prev:before {content: "\f077";}
.thumblist-box .prev {bottom: auto;top: 0;}
.thumblist-box .next {top: auto;bottom: 0;}
.lSSlideOuter {padding: 0;margin: 0;position: relative;overflow: hidden;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.lSSlideOuter .lSSlideWrapper {position: relative;margin: 30px 0;max-width: 100%;overflow: hidden;}
.lSSlideOuter .lSSlideWrapper .lSSlide {-webkit-transform: translate(0px, 0px);-ms-transform: translate(0px, 0px);transform: translate(0px, 0px);-webkit-transition: all 1s;-webkit-transition-property: -webkit-transform, height;-moz-transition-property: -moz-transform, height;transition-property: transform, height;-webkit-transition-duration: inherit;transition-duration: inherit;-webkit-transition-timing-function: inherit;transition-timing-function: inherit;}
.lSSlideOuter .lightSlider {overflow: hidden;margin: 0;height: auto !important;}
.lightSlider:before, .lightSlider:after {content: " ";display: table;}
.lSSlideOuter .lSSlideWrapper .lSAction {display: none !important;}
ul.thumblist {padding:0;}
.thumblist li {float: left; width: 100%;max-width: 100px;overflow: hidden;list-style:none;}
.thumblist li a { display: table-cell;vertical-align: middle;width: 92px;height: 92px;border: 1px solid transparent;}
.thumblist li a img {display:block;margin:0 auto;}.product-view .product-shop {margin-bottom: 30px;}
В файле main.js найдите блок
// Другие изображения товара
$(document).ready(function(){
var $ = jQuery;
if ($('.thumblist').length) {
$('.thumblist').carouFredSel({
prev : '.thumblist-box .prev',
next : '.thumblist-box .next',
width : '100%',
auto : false,
scroll : {
items: 1,
duration: 500,
pauseOnHover: true
},
swipe : {
onMouse : false,
onTouch : true
}
});
}
});
и замените его на
// Вертикальная карусель других изображений
jQuery(document).ready(function ($) {
setTimeout(function() {
var respHeight = $('.general-img').height() - 60;
$(".thumblist").lightSlider({
easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
speed: 600,
auto: false,
gallery: true,
loop: true,
rtl: false,
enableDrag: false,
enableTouch: true,
vertical: true,
verticalHeight: 350,
item: 3,
thumbMargin: 10,
slideMove: 1,
slideEndAnimation: false,
pager: false,
responsive: [
// RESPONSIVE CHO Vertical
{
breakpoint: 641,
settings: {item: 2,verticalHeight: 240,}
},
{
breakpoint: 481,
settings: {item: 1,verticalHeight: 110,thumbMargin: 0,}
}
],
onSliderLoad: function (el) {
$('.thumblist-box.navigation').show();
if(el.getTotalSlideCount() < 2){
$('.thumblist-box.navigation').hide();
$('.product-img-box .product-image').css("margin", "0");
}
if(el.getTotalSlideCount() < 3){
$('.thumblist-box.navigation .slide-control').addClass('hide2');
}
if(el.getTotalSlideCount() < 4){
$('.thumblist-box.navigation .slide-control').addClass('hide');
}
$('.thumblist-box.navigation').removeClass('fadeout');
$('.thumblist-box.navigation').addClass('fadein');
}
})
}, 0);
// Кнопки переключения других изображений
$(".thumblist-box.navigation .prev").click(function(){
$(".thumblist-box.navigation .prev").css("cursor", "wait");
setTimeout(function(){
$(".thumblist-box.navigation .lSAction .lSPrev").trigger('click');
$(".thumblist-box.navigation .prev").css("cursor", "pointer");
}, 600);
});
$(".thumblist-box.navigation .next").click(function(){
$(".thumblist-box.navigation .next").css("cursor", "wait");
setTimeout(function(){
$(".thumblist-box.navigation .lSAction .lSNext").trigger('click');
$(".thumblist-box.navigation .next").css("cursor", "pointer");
}, 600);
});
});
В конец файла forall.js добавьте код из прикрепленного файла.
Прикрепленные файлы
-
lightslider.txt 15,64К
328 Количество загрузок:
Еще нашлась ошибка, если через поиск искать товар, то на странице с результатом при наведении на товар, просто белый квадратик .. как исправить ?
