Product Image Gallery

By Kevin

How do I use This?

Product Image Gallery for an eCommerce site to show multiple images of a product.

HTML

<div class="row align-center">
  <div class="product-image-gallery">
    <img class="pdp-product-image" id="main-product-image" src="https://placehold.it/350x350?text=Image+1" alt="">
    <br>
    <ul class="menu product-thumbs align-center">
      <li> <a class="sim-thumb" data-image="https://placehold.it/350x350?text=Image+1"><img src="https://placehold.it/50x50" alt=""></a> </li>
      <li> <a class="sim-thumb" data-image="https://placehold.it/350x350?text=Image+2"><img src="https://placehold.it/50x50" alt=""></a> </li>
      <li> <a class="sim-thumb" data-image="https://placehold.it/350x350?text=Image+3"><img src="https://placehold.it/50x50" alt=""></a> </li>
    </ul>
  </div>
</div>

.product-image-gallery {
  background-color: $white;
  padding: 1.5rem;
}

.pdp-product-image {
  margin-bottom: 20px;
}

.product-thumbs {
  
  a {
    margin-left: 8px;
    margin-right: 8px;
    padding: 0 !important;
    
    img {
      @include thumbnail;
      border-radius: 3px;
      width: 50px;
      height: 50px;
      border: none;
    }
  }
}

.product-image-gallery {
  background-color: #fefefe;
  padding: 1.5rem;
}

.pdp-product-image {
  margin-bottom: 20px;
}

.product-thumbs a {
  margin-left: 8px;
  margin-right: 8px;
  padding: 0 !important;
}

.product-thumbs a img {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 1rem;
  border: solid 4px #fefefe;
  border-radius: 0;
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2);
  line-height: 0;
  border-radius: 3px;
  width: 50px;
  height: 50px;
  border: none;
}

$('.sim-thumb').on('click', function() {
  $('#main-product-image').attr('src', $(this).data('image'));
})

Product Image Gallery

By Kevin

Wide Article Link

Simple Article Header

Flexible Article with Responsive Images

Product Image Gallery

By Kevin

Similar Building Blocks

Wide Article Link

Simple Article Header

Flexible Article with Responsive Images