Powiększanie zdjęć w szczegółach towaru w szablonie Topaz
W tym artykule dowiesz się jak dodać możliwość wyświetlania drugiego zdjęcia na liście towarów.
Na początku w pliku elements\product-details-1.html lub elements\product-details-2.html (w zależności od typu wyglądu), za pomocą narzędzia wyszukiwania, znajdź linijkę: Kolejnym krokiem jest przejście do pliku js\layout1.js. W pliku tym, za pomocą narzędzia wyszukiwania, znajdujemy frazę var productDetailsFunctions = {, a następnie bezpośrednio pod nią wklejamy następujący kod: $("body").addClass("modal-opened"); this.setGallerySlider(t); this.setSlider(); $("body").on("click", ".close-gallery-button", function(e) { Przejdź do pliku css\elements\product-deatils-1-g.css lub css\elements\product-deatils-2-g.css (w zależności od typu wyglądu). Na koncu pliku wklej następujący kod: .slider-hidden { .opened-gallery { .slick-next:last-child { .slick-next:first-child { .slick-next { img {
<img alt="{{image.Alt | H}}" src="css/img/alo.gif" data-lazy="img/grande/{{image.Id}}/{{image.Link}}.jpg">
W miejsce tej linijki wklej następujacy kod:
<img class="open-gallery" alt="{{image.Alt | H}}" src="css/img/alo.gif" data-lazy="img/{{image.Id}}/{{image.Link}}.jpg">
Następnie w tym samym pliku, za pomocą narzędzia wyszukiwania, znajdź linijkę:
<img alt="{{product.Images[0].Alt | H}}" src="css/img/alo.gif" data-lazy="img/grande/{{product.Images[0].Id}}/{{product.Images[0].Link}}.jpg">
W jej miejsce wklej następujący kod:
<img class="open-gallery" alt="{{product.Images[0].Alt | H}}" src="css/img/alo.gif" data-lazy="img/{{product.Images[0].Id}}/{{product.Images[0].Link}}.jpg">
openGallery: function (e) {
var t = $(".product-details__image").slick("slickCurrentSlide");
var i = $(e.currentTarget).parents(".product-details__images");
i.addClass("opened-gallery");
i.append('<svg class="svgIcon close-gallery-button"><use xlink:href="css/img/icons-sprite.svg#times-light"></use></svg>');
$(".open-gallery:not(.opened-gallery-switch)").addClass("opened-gallery-switch");
$(".product-details__image-list").addClass("slider-hidden");
$(".product-details__image").addClass("opened-gallery");
$(".product-details__image").slick("unslick");
$(".draggable").css("top", "25%");
},
closeGallery: function (e) {
$(".product-details__images").removeClass("opened-gallery");
$(".product-details__image").removeClass("opened-gallery");
$(".open-gallery.opened-gallery-switch").removeClass("opened-gallery-switch");
$(e.currentTarget).remove();
$(".product-details__image-list").removeClass("slider-hidden");
$("body").removeClass("modal-opened");
$(".product-details__image").slick("unslick");
$(".draggable").css("top", "0");
},
setGallerySlider: function (t) {
$(".product-details__image").slick ({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false,
nextArrow: '<button type="button" aria-label="nextArrow" class="slick-next"><svg class="svgIcon svgIcon--arrowRight"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg></button>',
prevArrow: '<button type="button" aria-label="prevArrow" class="slick-next"><svg class="svgIcon svgIcon--arrowLeft"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg></button>',
accessibility: false,
dots: false,
});
$(".product-details__image").slick("slickGoTo", t, true);
},
W tym samym pliku za pomocą narzędzia wyszukiwania znajdź frazę var body = $('body');
a bezpośrednio pod nią wklej następujacy kod:
body.on("click", ".open-gallery:not(.opened-gallery-switch)", function(e) {
productDetailsFunctions.openGallery(e);
}),
productDetailsFunctions.closeGallery(e);
}),
.close-gallery-button {
position: fixed;
right: 0;
top: 0;
background: transparent;
color: #656565;
z-index: 20;
border: 0;
font-size: 20px;
width: 50px;
height: 50px;
cursor: pointer;
}
display: none;
}
position: fixed;
display: flex;
z-index: 20;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #ffffff;
width: 100%;
right: 20px;
}
left: 20px;
}
height: 35px;
width: 35px;
}
max-height: none;
}
}
Ostatnim krokiem jest przeście do pliku css\base_layout-g.css. Znajdź frazę body { i bezpośrednio pod wyszukaną linijką wklej następujacy kod:
&.modal-opened {
overflow: hidden;
}