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.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować i kompilować
Uwaga
Zapis nazwa_folderu/nazwa_pliku.rozszerzenie oznacza, że aby znaleźć dany plik należy udać się do folderu o nazwie podanej przed ukośnikiem. Przykładowo: order/thx.html oznacza plik thx.html w folderze order
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ę:
<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">
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:
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>');
$("body").addClass("modal-opened");
$(".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");
this.setGallerySlider(t);
$(".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");
this.setSlider();
},
setGallerySlider: function (t) {
$(".product-details__image").slick ({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false,
nextArrow: '',
prevArrow: '',
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);
}),
$("body").on("click", ".close-gallery-button", function(e) {
productDetailsFunctions.closeGallery(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:
.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;
}
.slider-hidden {
display: none;
}
.opened-gallery {
position: fixed;
display: flex;
z-index: 20;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #ffffff;
width: 100%;
.slick-next:last-child {
right: 20px;
}
.slick-next:first-child {
left: 20px;
}
.slick-next {
height: 35px;
width: 35px;
}
img {
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;
}
Czy ten artykuł był pomocny?
Inne w kategorii
-
1
- 1276
-
Posiadam gotowy szablon Comarch. Jak mogę go dostosować do kryteriów WCAG 2.1/2.2?
-
1
- 2232
-
-1
- 2099
-
1
- 2273
-
-1
- 2669
-
-26
- 1636