Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="col-xs-12 col-sm-6 product-img-box {% if settings.product_image_border%} grid-item-border {% endif %}">
- {% if product.images.size == 0 %}
- <div class="product-photo-container" style="padding: 30px">
- <img src="{{ '' | product_img_url: 'grande' }}" alt="">
- </div>
- {% else %}
- <div class="product-photo-container" style="padding: 30px">
- {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
- <a href="{{ featured_image | img_url: 'original' }}" >
- <img id="product-featured-image" src="{{ featured_image | img_url: 'grande' }}" alt="{{ featured_image.alt | escape }}" data-zoom-image="{{ featured_image.src | img_url: 'original' }}"/>
- </a>
- </div>
- {% if product.images.size > 1 %}
- <div class="more-view-wrapper ">
- <ul id="more-view-carousel" class="product-photo-thumbs row">
- {% for image in product.images %}
- <li class="grid-item col-xs-4 col-sm-3">
- <a href="javascript:void(0)" data-image="{{ image.src | product_img_url: 'grande' }}" data-zoom-image="{{ image.src | product_img_url: 'original' }}">
- <img src="{{ image.src | product_img_url: 'compact' }}" alt="{{ image.alt | escape }}">
- </a>
- </li>
- {% endfor %}
- </ul>
- </div>
- {% endif %}
- {% endif %}
- </div>
- {% comment %} Please at the bottom of product.liquid {% endcomment %}
- {% assign option_name = 'Color' %}
- {% if product.options contains option_name %}
- <script>
- // Grabbing product thumbnails
- // Covers: Editions, Launchpad Star, Lookbook, Kickstand, Startup, Simple, Radiance, Minimal, Supply, New Standard and many more.
- var thumbnails = jQuery('img[src*="/products/"]') /* All product images */
- .not('#related-products img') /* Except related products, thumbnails not clickable */
- .not('a[href^="/collections/"] img') /* Except related products */
- .not('a[href^="/products/"] img') /* Except mini-cart products */
- .not('header img') /* Except mini-cart products, thumbnails not clickable */
- .not('#drawer img') /* Except mini-cart products, thumbnails not clickable, in Simple theme. */
- .not(':first'); /* Except first one, i.e the main image */
- var optionSelect;
- {% assign option_index = 0 %}
- {% for option in product.options %}
- {% if option == option_name %}
- {% assign option_index = forloop.index0 %}
- {% endif %}
- {% endfor %}
- {% if product.options.size == 1 %}
- optionSelect = '.single-option-selector';
- {% else %}
- optionSelect = 'label:contains({{ option_name }}) + .single-option-selector';
- {% endif %}
- jQuery('form[action="/cart/add"]').on('change', optionSelect, function() {
- var optionValue = $(this).val();
- thumbnails.each(function() {
- var wrapper = $(this);
- while ( wrapper.parent().children().length === 1 ) {
- wrapper = wrapper.parent();
- }
- if ( jQuery(this).attr('alt') === optionValue ) {
- wrapper.show();
- }
- else {
- wrapper.hide();
- }
- });
- });
- </script>
- {% endif %}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement