<div class="
gallery
gallery--vertical
">
<div class="
gallery__stage
gallery__stage--vertical
">
<div class="gallery__frame">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="" data-src="/images/product/product_432x648.jpg" alt="">
</div>
</div>
</div>
<div class="
gallery__nav
gallery__nav--vertical
">
<div class="
gallery__thumb-dot
">
<div class="gallery__dot"></div>
</div>
<div class="
gallery__thumb-dot
">
<div class="gallery__dot"></div>
</div>
<div class="
gallery__thumb-dot
">
<div class="gallery__dot"></div>
</div>
<div class="
gallery__thumb-dot
">
<div class="gallery__dot"></div>
</div>
</div>
</div>
<div
class="
gallery
{{ class }}
{{#if typeHorizontal }}
gallery--horizontal
{{else}}
gallery--vertical
{{/if}}
"
{{{ attributes }}}
>
<div
class="
gallery__stage
{{ stage.class }}
{{#if typeHorizontal }}
gallery__stage--horizontal
{{else}}
gallery__stage--vertical
{{/if}}
"
>
<div class="gallery__frame">
{{ render '@image' imageMain }}
</div>
</div>
<div
class="
gallery__nav
{{#if typeHorizontal }}
gallery__nav--horizontal
{{else}}
gallery__nav--vertical
{{/if}}
{{ nav.class }}
"
>
{{#unless dots}}
{{#if typeHorizontal }}
{{ render '@button--icon' thumbArrowLeft }}
{{else}}
{{ render '@button--icon' thumbArrowUp }}
{{/if}}
{{#each thumbs }}
<div class="
gallery__thumb
{{#if ../typeHorizontal }}
gallery__thumb--horizontal
{{else}}
gallery__thumb--vertical
{{/if}}
{{#if imageThumb.active}}
gallery__thumb--active
{{/if}}
"
>
{{ render '@image' imageThumb }}
</div>
{{/each}}
{{#if typeHorizontal }}
{{ render '@button--icon' thumbArrowRight }}
{{ else }}
{{ render '@button--icon' thumbArrowDown }}
{{/if}}
{{/unless}}
{{#if dots}}
{{#each thumbs}}
<div
class="
gallery__thumb-dot
{{#if dotThumb.active}}
gallery__thumb-dot--active
{{/if}}
"
>
<div class="gallery__dot"></div>
</div>
{{/each}}
{{/if}}
</div>
</div>
{
"typeVertical": true,
"dots": true,
"imageMain": {
"dataSrc": "/images/product/product_432x648.jpg"
},
"thumbArrowLeft": {
"tag": "button",
"class": "gallery__thumb-arr",
"attributes": "type=\"button\" aria-label=\"check more images\"",
"icon": {
"id": "angle-up",
"class": "gallery__icon-arrow gallery__icon-arrow--horizontal",
"hidden": true
}
},
"thumbArrowUp": {
"tag": "button",
"class": "gallery__thumb-arr",
"attributes": "type=\"button\" aria-label=\"check more images\"",
"icon": {
"id": "angle-up",
"class": "gallery__icon-arrow gallery__icon-arrow--vertical",
"hidden": true
}
},
"thumbArrowRight": {
"tag": "button",
"class": "gallery__thumb-arr",
"attributes": "type=\"button\" aria-label=\"check more images\"",
"icon": {
"id": "angle-down",
"class": "gallery__icon-arrow gallery__icon-arrow--horizontal",
"hidden": true
}
},
"thumbArrowDown": {
"tag": "button",
"class": "gallery__thumb-arr",
"attributes": "type=\"button\" aria-label=\"check more images\"",
"icon": {
"id": "angle-down",
"class": "gallery__icon-arrow gallery__icon-arrow--vertical",
"hidden": true
}
},
"thumbs": [
{
"imageThumb": {
"dataSrc": "/images/product/product_64x96.jpg",
"active": true
}
},
{
"imageThumb": {
"dataSrc": "/images/product/product_64x96.jpg"
}
},
{
"imageThumb": {
"dataSrc": "/images/product/product_64x96.jpg"
}
},
{
"imageThumb": {
"dataSrc": "/images/product/product_64x96.jpg"
}
}
]
}
$fotorama__background_image : url("https://falcon.hypernode.io/static/frontend/FalconMedia/Base/nl_NL/images/fotorama/gallery/gallery.png") !default;
$fotorama__thumbs-margin-top : 20px !default;
$fotorama__thumbs-border-color : 1px !default;
$fotorama__thumbs-border-width : #e5e5e5 !default;
@import 'gallery-variables';
.gallery {
display: flex;
flex-flow: nowrap;
justify-content: flex-start;
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
flex-direction: column;
&--vertical {
@include mq($screen-m) {
flex-direction: row;
}
}
&__frame {
position: relative;
background-color: #ecf5f4;
padding: $spacer--1;
margin-bottom: $spacer--15;
& .lazyload-wrapper {
background-color: transparent;
}
}
&__stage {
order: 1;
margin-bottom: $spacer--medium;
&--vertical {
margin-bottom: 0;
@include mq($screen-m) {
order: 2;
width: calc(100% - (#{$spacer--medium} + #{48px}));
}
@include mq($screen-l) {
width: calc(100% - (#{20px} + #{80px}));
}
}
&--horizontal {
order: 1;
}
}
&__nav {
order: 2;
display: flex;
align-items: center;
&--vertical {
@include mq($screen-m) {
margin-right: $spacer--medium;
flex-direction: column;
order: 1;
}
@include mq($screen-l) {
margin-right: $spacer--2;
}
}
}
&__thumb {
background-color: #ecf5f4;
padding: $spacer--05;
overflow: hidden;
margin-right: $spacer--medium;
border: none;
width: 48px;
height: 48px;
@include mq($screen-m) {
margin-bottom: $spacer--medium;
margin-right: 0;
}
@include mq($screen-l) {
width: 80px;
height: 80px;
}
&:hover,
&:focus {
cursor: pointer;
}
&--active {
border: 1px solid $green;
}
& .lazyload-wrapper {
background-color: transparent;
}
}
&__thumb-arr {
display: flex !important; // sass-lint:disable-line no-important
justify-content: center;
align-items: center;
width: 48px;
height: 48px;
margin: 0 auto;
&:hover,
&:focus {
cursor: pointer;
}
}
&__icon-arrow {
width: 12px;
height: 12px;
transform: rotate(-90deg);
fill: $gray;
&--small {
width: 12px;
}
&--vertical {
@include mq($screen-m) {
transform: none;
}
}
}
&__product-label {
position: absolute;
left: $spacer;
top: $spacer--medium;
}
&-placeholder {
position: relative;
.loader {
position: absolute;
background: transparent;
}
}
}
.fotorama {
.fotorama {
&__thumb-border {
border: 1px solid $red;
border-radius: 5px;
}
&__wrap {
background: #fff;
}
&__thumb {
cursor: pointer;
&--icon {
background-image: $fotorama__background_image;
}
&__arr {
background: rgba(255, 255, 255, 0.9);
}
}
&__stage__frame.fotorama__active.fotorama_vertical_ratio.fotorama__loaded.fotorama__loaded--img {
border: $fotorama__thumbs-border-width solid $fotorama__thumbs-border-color;
}
&__dot {
height: 12px;
width: 12px;
background-color: $color-seondary-light;
}
&__active {
& .fotorama__dot {
background-color: $theme-second;
border-color: $theme-second;
}
}
&__stage {
padding: 0 0 $fotorama__thumbs-margin-top 0;
margin-left: 0;
&__shaft .fotorama__grab {
// sass-lint:disable no-important
max-width: 593px !important;
// sass-lint:enable no-important
}
}
&__arr {
background: rgba(255, 255, 255, 0.8);
margin: auto;
height: 80px;
.fotorama__arr__arr {
background-image: $fotorama__background_image;
}
&--next {
@include mq($screen-m) {
// sass-lint:disable no-important
right: 94px !important;
// sass-lint:enable no-important
}
}
&--prev {
// sass-lint:disable no-important
left: 2px !important;
// sass-lint:enable no-important
}
}
&__nav {
&__frame {
&--thumb {
margin-top: $fotorama__thumbs-margin-top;
border: $fotorama__thumbs-border-width solid $fotorama__thumbs-border-color;
}
}
}
&__fullscreen {
.fotorama__fullscreen-icon {
background-image: $fotorama__background_image;
background-position: -80px 0;
background-color: transparent;
background-repeat: no-repeat;
z-index: 1001;
}
.fotorama {
&__grab {
border: 0;
}
&__zoom-in,
&__zoom-out {
background-image: $fotorama__background_image;
left: 50px;
}
&__stage {
.fotorama__fullscreen-icon {
background: $fotorama__background_image -80px 0 no-repeat;
}
.fotorama__arr {
background: transparent;
margin: auto;
height: 80px;
.fotorama__arr__arr {
background-image: $fotorama__background_image;
}
&--next {
@include mq($screen-m) {
// sass-lint:disable no-important
right: 80px !important;
// sass-lint:enable no-important
}
}
&--prev {
@include mq($screen-m) {
// sass-lint:disable no-important
left: 200px !important;
// sass-lint:enable no-important
}
}
}
&__shaft {
.loader.loader--visible {
background: transparent;
}
.fotorama__stage__frame {
border: none;
}
}
}
&__stage__frame.fotorama__active.fotorama_vertical_ratio.fotorama__loaded.fotorama__loaded--img {
border: none;
}
&__nav-wrap .fotorama__nav--thumbs {
margin: 0;
}
}
}
}
&--fullscreen {
.fotorama {
&__grab {
border: 0;
}
&__zoom-in,
&__zoom-out {
background-image: $fotorama__background_image;
left: 50px;
}
&__stage {
.fotorama__fullscreen-icon {
top: 80px;
@include mq($screen-m) {
top: 0;
}
background: $fotorama__background_image -80px 0 no-repeat;
}
.fotorama__arr {
background: transparent;
margin: auto;
height: 80px;
.fotorama__arr__arr {
background-image: $fotorama__background_image;
}
&--next {
@include mq($screen-m) {
// sass-lint:disable no-important
right: 80px !important;
// sass-lint:enable no-important
}
}
&--prev {
@include mq($screen-m) {
// sass-lint:disable no-important
left: 200px !important;
// sass-lint:enable no-important
}
}
}
&__shaft {
.loader.loader--visible {
background: transparent;
}
.fotorama__stage__frame {
border: none;
}
}
}
&__stage__frame.fotorama__active.fotorama_vertical_ratio.fotorama__loaded.fotorama__loaded--img {
border: none;
}
&__nav-wrap .fotorama__nav--thumbs {
margin: 0;
}
}
}
.loader.loader--visible {
background: transparent;
}
}
Gallery in Magento 2 is built based on Fotorama. More information about Gallery widget you can find in Magento 2 documentation.
Alpaca’s Gallery use following styles:
.less styles, can be found in: theme-frontend-alpaca/styles/gallery-styles.scss - this file is generated as a separate css file and loaded only on product page, where gallery is used.theme-frontend-alpaca/Magento_Catalog/styles/modules/_fotorama.scsstheme-frontend-alpaca/Snowdog_Components/components/Organisms/gallery/_gallery.scsstheme-frontend-alpaca/Snowdog_Components/docs/styles/docs-only-styles/_gallery.scssSome classes of fractal component are extended in theme-frontend-alpaca/Magento_Catalog/styles/modules/_fotorama.scss:
.gallery__thumb with variants.gallery__thumb-dot with variants.gallery__thumb-arr with variants.gallery__icon-arrow with variants.gallery__dot with variantsIt is still a bit complicated. The complication level is caused by the Magento implementation, hope it will be refactor and simplified in future released
All styles can be overwritten in the child theme.
Gallery variants are set in vendor/snowdog/theme-frontend-alpaca/etc/view.xml. Variants can differ depending on breakpoints and variant’s class (&--horizontal, &--vertical) is added dynamically to different elements inside the gallery.
Variants’ presentation in fractal is mainly demonstrative. Please take it under consideration customising your Alpaca’s child theme.