Product Gallery¶
Styles for a product gallery used in product_gallery module.
Structurally .product-gallery contains following elements:
.product-gallery.product-gallery__slider.product-gallery__thumbnail.product-gallery__thumbnail-item
It also contains following class modifiers:
.product-gallery__slider_main-image.product-gallery__slider_thumbnails.product-gallery__slider_thumbnails-left.product-gallery__slider_thumbnails-bottom
Example¶
Here is an example of product gallery element usage. We also use slider and splide carousel styles as well as h-slider webcomponent and product-gallery webcomponent here for presentation purposes.
HTML
<product-gallery on-interaction main="product-main-photo" thumbnails="product-thumbnails" class="product-gallery">
<h-slider
id="product-main-photo"
class="splide product-gallery__slider product-gallery__slider_main-image"
settings="{
'type':'slide',
'rewind': true,
'pagination': false,
'arrows': true,
'keyboard': 'global',
'lazyLoad': 'nearby',
'breakpoints': {
'768': {
'pagination': true,
'padding': '2rem'
}
}
}">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<a class="js__gallery-anchor-image" href="/link-to-image-1">
<picture>
<source srcset="https://example.com/example1.jpg" type="image/jpg">
<img
src="https://example.com/example1.jpg"
class="js__open-gallery"
alt="example1.jpg"
title="example1.jpg"
width="500"
height="500"
decoding="async"
lazy
data-gallery-name-to-open="productGallery"
data-gallery-name="productGallery"
/>
</picture>
</a>
</li>
<li class="splide__slide splide__slide_hide">
<a class="js__gallery-anchor-image" href="/link-to-image-2">
<picture>
<source srcset="https://example.com/example2.jpg" type="image/jpg">
<img
src="https://example.com/example2.jpg"
class="js__open-gallery"
alt="example2.jpg"
title="example2.jpg"
width="500"
height="500"
decoding="async"
lazy
data-gallery-name-to-open="productGallery"
data-gallery-name="productGallery"
/>
</picture>
</a>
</li>
</ul>
</div>
<div class="splide__arrows splide__arrows--ltr">
<div class="slider__arrow slider__arrow_left">
<button class="splide__arrow splide__arrow--prev slider__arrow_absolute slider__arrow_absolute-left">
<svg class="icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-chevron-left"></use>
</svg>
</button>
</div>
<div class="slider__arrow slider__arrow_right">
<button class="splide__arrow splide__arrow--next slider__arrow_absolute slider__arrow_absolute-right">
<svg class="icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-chevron-right"></use>
</svg>
</button>
</div>
</div>
</h-slider>
<h-slider
id="product-thumbnails"
class="
splide splide_non-floating-arrows-vertical
product-gallery__slider
product-gallery__slider_thumbnails
product-gallery__slider_thumbnails-left
"
settings="{
'direction': 'ttb',
'autoHeight': true,
'height': 'auto',
'pagination': false,
'isNavigation': true,
'lazyLoad': true
}">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<div class="product-gallery__thumbnail-item">
<picture>
<source srcset="https://example.com/examplethumbnail1.jpg" type="image/jpg">
<img
src="https://example.com/examplethumbnail1.jpg"
class="product-gallery__main-image"
alt="thumbnail1.jpg"
title="thumbnail1.jpg"
width="50"
height="50"
decoding="async"
lazy
/>
</picture>
</div>
</li>
<li class="splide__slide">
<div class="product-gallery__thumbnail-item">
<picture>
<source srcset="https://example.com/examplethumbnail2.jpg" type="image/jpg">
<img
src="https://example.com/examplethumbnail2.jpg"
class="product-gallery__main-image"
alt="thumbnail2.jpg"
title="thumbnail2.jpg"
width="50"
height="50"
decoding="async"
lazy
/>
</picture>
</div>
</li>
</ul>
</div>
<div class="splide__arrows">
<div class="slider__arrow slider__arrow_left">
<button class="splide__arrow splide__arrow--prev slider__arrow_absolute slider__arrow_absolute-left">
<svg class="icon>
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-chevron-left"></use>
</svg>
</button>
</div>
<div class="slider__arrow slider__arrow_right ">
<button class="splide__arrow splide__arrow--next slider__arrow_absolute slider__arrow_absolute-right">
<svg class="icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-chevron-right"></use>
</svg>
</button>
</div>
</div>
</h-slider>
</product-gallery>
Product Gallery tags¶
The .product-gallery classes were designed to be used with block elements like <div>. However, you can use them with any other element and customize it to your own needs.
LESS¶
You can modify any product gallery less variable in your User Less section to change a product gallery styles.
Product Gallery variables¶
Variables used to style product gallery.
@productGalleryThumbnailsWidth: 60px;
@productGalleryColumnGap: @globalSpacing;
@bottomThumbnailsGap: @globalSpacing * 0.5;
@thumbnailItemBorder: 1px solid @neutralColors600;
@thumbnailItemBorderRadius: 3px;
@thumbnailItemPadding: 6;
@thumbnailsGalleryGap: @globalSpacing * 0.5;
@verticalThumbnailsImageWidth: 65px;
@verticalThumbnailsImageHeight: 65px;
@horizontalThumbnailsPadding: @globalSpacing * 4;
If you want to change product gallery styles, you can just change the variables. To change a default column-gap just modify @productGalleryColumnGap variable.
Product Gallery styles¶
Here are standard product gallery styles.
.product-gallery {
display: flex;
gap: @productGalleryColumnGap;
align-items: stretch;
&__thumbnail-item {
width: 100%;
height: 100%;
.image {
img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
}
}
&_vertical {
flex-direction: column;
.splide__track {
width: auto;
max-width: 100%;
}
.product-gallery {
.splide__slide {
width: @verticalThumbnailsImageWidth;
height: @verticalThumbnailsImageHeight;
}
}
}
&__main-image {
width: 100%;
}
&__slider {
flex: 1 1 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
align-self: flex-start;
width: 100%;
&_main-image {
.splide {
&__slide {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
}
}
&_thumbnails {
flex-direction: column;
flex: 1 0 @productGalleryThumbnailsWidth;
min-width: @productGalleryThumbnailsWidth;
&-under {
flex-direction: row;
width: 0;
margin: 0 auto;
&.is-initialized {
width: auto;
}
}
&-left {
order: -1;
}
.splide {
&__list {
display: block;
&_horizontal {
display: flex;
}
}
&__slide {
img {
width: 100%;
}
&:not(:last-child) {
margin-bottom: @thumbnailsGalleryGap;
}
opacity: 0.5;
&.is-active {
opacity: 1;
}
}
}
&-bottom {
margin-top: @thumbnailsGalleryGap;
flex-direction: row;
width: auto;
.splide {
&__list {
display: flex;
}
&__slide {
&:not(:last-child) {
margin-right: @thumbnailsGalleryGap;
}
}
}
}
}
}
&__thumbnail-item {
display: flex;
align-items: center;
justify-content: center;
.pixel-to-rem(padding, @thumbnailItemPadding);
border: @thumbnailItemBorder;
border-radius: @thumbnailItemBorderRadius;
cursor: pointer;
}
&__thumbnail-arrow {
position: absolute;
background-color: @globalBodyBackgroundColor;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.3s ease;
opacity: 1;
&_hidden {
opacity: 0;
visibility: hidden;
}
&_up {
top: 0;
left: 0;
right: 0;
padding-bottom: @globalSpacing * 0.5;
}
&_down {
bottom: 0;
left: 0;
right: 0;
padding-top: @globalSpacing * 0.5;
}
&_left {
top: 0;
bottom: 0;
left: 0;
padding-right: @globalSpacing * 0.5;
}
&_right {
top: 0;
bottom: 0;
right: 0;
padding-left: @globalSpacing * 0.5;
}
}
}