Shopify Brooklyn theme: Main image with thumbnail

main_image_and_thumbs.md

Stolen from the wonderful @jake-olney

What you want:

How to get it:

Go to product.liquid and:

1. Find this section of code:

2. Replace it with this:

<div class="product-single__photos" id="mobile-gallery">
  {% assign featured_image = current_variant.featured_image | default: product.featured_image %}

  {% comment %}
    Display current variant image, or default first
  {% endcomment %}
  <div class="product-single__photo-wrapper" id="main-product-image">
    <img id="ProductPhotoImg" src="{{ featured_image | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %} alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
  </div>

  {% comment %}
    Display rest of product images, not repeating the featured one
  {% endcomment %}
  {% for image in product.images %}
    {% unless image contains featured_image %}
      <div class="product-single__photo-wrapper">
        <img src="{{ image.src | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
      </div>
    {% endunless %}
  {% endfor %}
</div>

<div class="product-single__photos" id="gallery">
  {% assign featured_image = current_variant.featured_image | default: product.featured_image %}

  <div class="product-single__photo-wrapper" id="main-product-image">
    <img id="ProductPhotoImg" src="{{ featured_image | img_url: 'large' }}" alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
          {% for image in product.images %}
            {% if forloop.first %}
                {% continue %}
            {% else %}
              <img class="product-single__photo" id="hidden-image" src="{{ image.src | img_url: 'large' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
            {% endif %}
          {% endfor %}
          {% for image in product.images limit: 1 %}
           <img class="product-single__photo" id="hidden-image" src="{{ image.src | img_url: 'large' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
          {% endfor %}
  </div>

  {% for image in product.images %}
    <div class="product-single__photo-wrapper" id="thumbnails">
      <a href="{{ image | product_img_url: 'large' }}" title="{{ product.title }}">
        <img src="{{ image.src | img_url: 'small' }}" alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
      </a>
    </div>
  {% endfor %}
</div>

3. Add this to the bottom of the file:

<script type="text/javascript" >
  $('#thumbnails a').click(function() {
  var newImage = $(this).attr('href');
  $( 'div#main-product-image img' ).attr({ src: newImage }); 
  return false;
  });
</script>

<style>
  #mobile-gallery {
    display: none; 
  }

  #thumbnails {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin-bottom: 15px;
  }

  #main-product-image {
    position: relative;
  }

  #hidden-image {
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }

  @media (max-width: 590px) {
    #mobile-gallery {
      display: block;
    }

    #gallery {
      display: none;
    }
  }
</style>

Go to the theme.js.liquid file and:

1. Find the section of the timber.productPage function that changes the product image when a variant is selected:

2. Replace it with this:

// Update variant image, if one is set
if (variant.featured_image) {
  var newImg = variant.featured_image.src;
  $( 'div#main-product-image img' ).attr({ src: newImg });
}

Hello, Thank you for really helpful code, Everything is working fine except product zoom feature,
https://www.luxaccess.net/collections/designers-dresses/products/black-printed-sheath-dress-1,
when you click on the displayed image , it needs to open a shadow slide show of all images,

Please tell me how can I do this.
Thanks