Gallery

Utilização do Carrossel Increazy

Para utilizar o Carrossel Increazy é necessário importar o código dentro da IDE e seguir as orientações de uso.
Você pode encontrar tudo em Carousel.

Galeria com thumbnail na vertical

Preview

HTML

<div class="gallery-element">
  <div class="gallery-element__thumbnails">
    {% for media in activeVariation.media %}
      <input 
        type="radio" 
        name="thumb" 
        id="{{ loop.index0 }}" 
        data-index="{{ loop.index0 }}" 
        aria-label="Thumbnail {{ loop.index0 }}"
      />
      <label class="gallery-element__thumbnail" for='{{ loop.index0 }}' aria-label="Label da thumbnail {{ loop.index0 }}">
        <img
          src="{{ media.url }}"
          alt="{{ media.label }}"
          onerror="this.src = 'https://storage.test.increazy.com/base_pwa/images/no-image.webp'"
          {% if loop.index0 == 0 %}
              fetchpriority="high"
          {% else %}
              loading="lazy"
          {% endif %}
        />
      </label>
    {% endfor %}
  </div>

  <div class="gallery-element__gallery-container">
    <div class="gallery-element__gallery">
      <div class="gallery-element__inner">
        {% for media in activeVariation.media %}
            <img
              src="{{ media.url }}"
              alt="{{ media.label }}"
              onerror="this.src = 'https://storage.test.increazy.com/base_pwa/images/no-image.webp'"
              width="1000"
              height="1000"
              {% if loop.index0 == 0 %}
                  fetchpriority="high"
              {% else %}
                  loading="lazy"
              {% endif %}
            />
        {% endfor %}
      </div>
    </div>
  </div>
</div>

CSS

.gallery-element {
  width: 100%;
  max-width: 768px;
  height: auto;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
 
.gallery-element__thumbnails {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 72px;
  min-width: 72px;
  margin-inline: 0;
  position: relative;
}

.gallery-element__thumbnails .gallery-element__thumbnail {
  width: 100%;
  height: 72px;
  cursor: pointer;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}

.gallery-element__thumbnails input {
  width: 1px;
  height: 1px;
  position: absolute;
  opacity: 0;
}

.gallery-element__thumbnails .gallery-element__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.gallery-element__thumbnails input:checked + .gallery-element__thumbnail {
  cursor: auto;
  border: 1.5px solid #000000;
}

.gallery-element__gallery-container {
  width: 100%;
  max-width: 680px;
  height: auto;
  position: relative;
  overflow: hidden;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}

.gallery-element__gallery {
  width: 100%;
  height: 100%;
}

.gallery-element__inner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  will-change: transform;
  cursor: grab;
}

.gallery-element__inner img {
  width: 100%;
  height: auto;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
}

Javascript

_dom('UniversalIncreazyCarousel').waitVariable(function () {
  const increazyCarousel = new UniversalIncreazyCarousel({
      gallery: document.querySelector('.gallery-element__gallery'),
      galleryInner: document.querySelector('.gallery-element__inner'),
      thumbs: document.querySelectorAll('.gallery-element__thumbnails input'),
      gap: 5,
      orientation: 'horizontal' 
  });
});

Galeria com thumbnail na horizontal

Preview

HTML

<div class="gallery-element">
  <div class="gallery-element__thumbnails">
    {% for media in activeVariation.media %}
      <input 
        type="radio" 
        name="thumb" 
        id="{{ loop.index0 }}" 
        data-index="{{ loop.index0 }}" 
        aria-label="Thumbnail {{ loop.index0 }}"
      />
      <label class="gallery-element__thumbnail" for='{{ loop.index0 }}' aria-label="Label da thumbnail {{ loop.index0 }}">
        <img
          src="{{ media.url }}"
          alt="{{ media.label }}"
          onerror="this.src = 'https://storage.test.increazy.com/base_pwa/images/no-image.webp'"
          {% if loop.index0 == 0 %}
              fetchpriority="high"
          {% else %}
              loading="lazy"
          {% endif %}
        />
      </label>
    {% endfor %}
  </div>

  <div class="gallery-element__gallery-container">
    <div class="gallery-element__gallery">
      <div class="gallery-element__inner">
        {% for media in activeVariation.media %}
            <img
              src="{{ media.url }}"
              alt="{{ media.label }}"
              onerror="this.src = 'https://storage.test.increazy.com/base_pwa/images/no-image.webp'"
              width="1000"
              height="1000"
              {% if loop.index0 == 0 %}
                  fetchpriority="high"
              {% else %}
                  loading="lazy"
              {% endif %}
            />
        {% endfor %}
      </div>
    </div>
  </div>
</div>

CSS

.gallery-element {
  width: 100%;
  max-width: 768px;
  height: auto;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  gap: 16px;
}
 
.gallery-element__thumbnails {
  display: flex;
  gap: 5px;
  width: max-content;
  min-width: max-content;
  margin-inline: 0;
  position: relative;
}

.gallery-element__thumbnails .gallery-element__thumbnail {
  width: 72px;
  height: 72px;
  cursor: pointer;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}

.gallery-element__thumbnails input {
  width: 1px;
  height: 1px;
  position: absolute;
  opacity: 0;
}

.gallery-element__thumbnails .gallery-element__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.gallery-element__thumbnails input:checked + .gallery-element__thumbnail {
  cursor: auto;
  border: 1.5px solid #000000;
}

.gallery-element__gallery-container {
  width: 100%;
  max-width: 680px;
  height: auto;
  position: relative;
  overflow: hidden;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}

.gallery-element__gallery {
  width: 100%;
  height: 100%;
}

.gallery-element__inner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  will-change: transform;
  cursor: grab;
}

.gallery-element__inner img {
  width: 100%;
  height: auto;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
}

Javascript

_dom('UniversalIncreazyCarousel').waitVariable(function () {
  const increazyCarousel = new UniversalIncreazyCarousel({
      gallery: document.querySelector('.gallery-element__gallery'),
      galleryInner: document.querySelector('.gallery-element__inner'),
      thumbs: document.querySelectorAll('.gallery-element__thumbnails input'),
      gap: 5,
      orientation: 'horizontal' 
  });
});

Galeria com thumbnail na vertical, botões de next e previous e paginação

Neste modelo de galeria a thumbnail fica oculta na versão mobile, mantendo apenas o carrossel de imagens com os botões e a paginação.

Preview

HTML

<div class="gallery-element">
  <div class="gallery-element__thumbnails">
    {% for media in activeVariation.media %}
      <input 
        type="radio" 
        name="thumb" 
        id="{{ loop.index0 }}" 
        data-index="{{ loop.index0 }}" 
        aria-label="Thumbnail {{ loop.index0 }}"
      />
      <label class="gallery-element__thumbnail" for='{{ loop.index0 }}' aria-label="Label da thumbnail {{ loop.index0 }}">
        <img
          src="{{ media.url }}"
          alt="{{ media.label }}"
          onerror="this.src = 'https://storage.test.increazy.com/base_pwa/images/no-image.webp'"
          {% if loop.index0 == 0 %}
              fetchpriority="high"
          {% else %}
              loading="lazy"
          {% endif %}
        />
      </label>
    {% endfor %}
  </div>

  <div class="gallery-element__gallery-container">
    <div class="gallery-element__gallery">
      <div class="gallery-element__inner">
        {% for media in activeVariation.media %}
            <img
              src="{{ media.url }}"
              alt="{{ media.label }}"
              onerror="this.src = 'https://storage.test.increazy.com/base_pwa/images/no-image.webp'"
              width="1000"
              height="1000"
              {% if loop.index0 == 0 %}
                  fetchpriority="high"
              {% else %}
                  loading="lazy"
              {% endif %}
            />
        {% endfor %}
      </div>
    </div>

    {% if activeVariation.media | length > 1 %}
      <div class="gallery-element__arrow gallery-element__arrow--next">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg>
      </div>

      <div class="gallery-element__arrow gallery-element__arrow--prev">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg>
      </div>
    {% endif %}
  </div>

  <div class="gallery-element__pagination"></div>
</div>

CSS

.gallery-element {
  width: 100%;
  max-width: 768px;
  height: auto;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
 
.gallery-element__thumbnails {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 72px;
  min-width: 72px;
  margin-inline: 0;
  position: relative;
}

.gallery-element__thumbnails .gallery-element__thumbnail {
  width: 100%;
  height: 72px;
  cursor: pointer;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}

.gallery-element__thumbnails input {
  width: 1px;
  height: 1px;
  position: absolute;
  opacity: 0;
}

.gallery-element__thumbnails .gallery-element__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.gallery-element__thumbnails input:checked + .gallery-element__thumbnail {
  cursor: auto;
  border: 1.5px solid #000000;
}

.gallery-element__gallery-container {
  width: 100%;
  max-width: 680px;
  height: auto;
  position: relative;
  overflow: hidden;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}

.gallery-element__gallery {
  width: 100%;
  height: 100%;
}

.gallery-element__inner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  will-change: transform;
  cursor: grab;
}

.gallery-element__inner img {
  width: 100%;
  height: auto;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

.gallery-element__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  border: none;
  border-radius: 100%;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.gallery-element__arrow--prev {
  left: 15px;
}

.gallery-element__arrow--next {
  right: 15px;
}

.gallery-element__arrow svg {
  width: 20px;
  height: 20px;
}

.gallery-element__pagination {
  display: none;
}

@media (max-width: 1024px) {
  .gallery-element {
    flex-direction: column;
  }
  
  .gallery-element__thumbnails {
    display: none;
  }

  .gallery-element__gallery-container {
    max-width: unset;
  }

  .gallery-element__pagination {
    width: max-content;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    height: 20px;
    margin-inline: auto;
  }

  .gallery-element__pagination .increazy-carousel-bullet {
    width: 16px;
    min-width: 16px;
    height: 16px;
    border: 1px solid #e6e6e6;
    border-radius: 100%;
    transition: all .3s ease;
    background-color: #ffffff;
  }

  .gallery-element__pagination .increazy-carousel-bullet-active {
    background-color: #000000;
    border-color: #000000;
  }
}

Javascript

_dom('UniversalIncreazyCarousel').waitVariable(function () {
  const increazyCarousel = new UniversalIncreazyCarousel({
      gallery: document.querySelector('.gallery-element__gallery'),
      galleryInner: document.querySelector('.gallery-element__inner'),
      thumbs: document.querySelectorAll('.gallery-element__thumbnails input'),
      prevBtn: document.querySelector('.gallery-element__arrow--prev'),
      nextBtn: document.querySelector('.gallery-element__arrow--next'),
      pagination: document.querySelector('.gallery-element__pagination'),
      gap: 5,
      orientation: 'horizontal' 
  });
});

Galeria com grid de imagens

Preview

HTML

<!--
  O código html deve ser inserido em:
  'Elementos > product page > images'
--> 

<div class="gallery">
  <div class="gallery__images">
    {% for media in activeVariation.media %}
        <img
          src="{{ media.url }}"
          alt="{{ media.label }}"
          onerror="this.src = 'https://storage.test.increazy.com/base_pwa/images/no-image.webp'"
        >
    {% endfor %}
  </div>
</div> 

CSS

/* Defina max-width em .gallery de acordo com sua necessidade */
.gallery{
  max-width: 1024px;
  max-height: auto;
  width: 100%;
  height: auto;
}

.gallery__images{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  row-gap: 16px;
  column-gap: 16px;
}

.gallery__images img{
  height: auto;
  width: calc(50% - 8px);
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #E6E6E6;
}

@media (max-width: 768px){
  .gallery__images {
    flex-direction: column;
  }
}