React's raw zoom JS

shop.js

window.timber = window.timber || {};

timber.cacheSelectors = function () {
  timber.cache = {
    // Product Page
    $productImageWrap: $('#productPhoto'),
    $productImage: $('#productPhotoImg'),
    $thumbImages: $('#productThumbs').find('a.product-photo-thumb')
  }
};

timber.init = function () {
  timber.cacheSelectors();

  {% if settings.product_image_zoom %}
  timber.productImageZoom();
  {% endif %}
};

timber.productPage = function (options) {
  var moneyFormat = options.moneyFormat,
      variant = options.variant,
      selector = options.selector;

  // Selectors
  var $addToCart = $('#addToCart'),
      $productPrice = $('#productPrice'),
      $comparePrice = $('#comparePrice'),
      $variantQuantity = $('#variantQuantity'),
      $quantityElements = $('.quantity-selector, label + .js-qty'),
      $addToCartText = $('#addToCartText'),
      $featuredImage = $('#productPhotoImg');

  if (variant) {

    if (variant.featured_image) {
      var newImg = variant.featured_image,
          el = $featuredImage[0];
      Shopify.Image.switchImage(newImg, el, timber.switchImage);
    }

    // Select a valid variant if available
    if (variant.available) {
      // We have a valid product variant, so enable the submit button
      $addToCart.removeClass('disabled').prop('disabled', false);
      $addToCartText.text({{ 'products.product.add_to_cart' | t | json }});

      // Show how many items are left, if below 10
      if (variant.inventory_management) {
        if (variant.inventory_quantity < 10 && variant.inventory_quantity > 0) {
          $variantQuantity.html({{ 'products.product.only_left' | t: count: '1' | json }}.replace('1', variant.inventory_quantity)).show();
        } else {
          $variantQuantity.hide();
        }
      }

      $quantityElements.show();
    } else {
      // Variant is sold out, disable the submit button
      $addToCart.addClass('disabled').prop('disabled', true);
      $addToCartText.text({{ 'products.product.sold_out' | t | json }});
      $variantQuantity.hide();
      $quantityElements.hide();
    }

    // Regardless of stock, update the product price
    $productPrice.html(Shopify.formatMoney(variant.price, moneyFormat));

    // Also update and show the product's compare price if necessary
    if (variant.compare_at_price > variant.price) {
      $comparePrice
        .html(Shopify.formatMoney(variant.compare_at_price, moneyFormat))
        .show();
    } else {
      $comparePrice.hide();
    }

  } else {
    // The variant doesn't exist, disable submit button
    $addToCart.addClass('disabled').prop('disabled', true);
    $addToCartText.text({{ 'products.product.unavailable' | t | json }});
    $variantQuantity.hide();
    $quantityElements.hide();
  }
};

timber.productImageSwitch = function () {
  if (timber.cache.$thumbImages.length) {
    // Switch the main image with one of the thumbnails
    // Note: this does not change the variant selected, just the image
    timber.cache.$thumbImages.on('click', function(evt) {
      evt.preventDefault();
      var newImage = $(this).attr('href');
      timber.switchImage(newImage, null, timber.cache.$productImage);
    });
  }
};

timber.switchImage = function (src, imgObject, el) {
  // Make sure element is a jquery object
  var $el = $(el);
  $el.attr('src', src);

  {% if settings.product_image_zoom %}
    // Update new image src to grande
    var zoomSrc = src.replace('_medium','_grande').replace('_large','_grande');
    $el.attr('data-zoom', zoomSrc);

    $(function() {
      timber.productImageZoom();
    });
  {% endif %}
};

timber.productImageZoom = function () {
  {% if settings.product_image_zoom %}

    if (!timber.cache.$productImageWrap.length) {
      return;
    };

    // Destroy zoom (in case it was already set), then set it up again
    timber.cache.$productImageWrap.trigger('zoom.destroy');

    timber.cache.$productImageWrap.addClass('image-zoom').zoom({
      url: timber.cache.$productImage.attr('data-zoom')
    })
  {% endif %}
};

// Initialize Timber's JS on docready
$(timber.init)