Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save aaliyan111/196f4a53ae4361e8deb508910c4a7b08 to your computer and use it in GitHub Desktop.
Save aaliyan111/196f4a53ae4361e8deb508910c4a7b08 to your computer and use it in GitHub Desktop.
[Shopify] Show multiple images per variant
<script>
jQuery(document).ready(function($){
var images = [];
{% for image in product.images %}
images.push({url: "{{ image | product_img_url: 'medium' }}", alt: "{{ image.alt }}"});
{% endfor %}
var thumbnails = $(".thumbs");
$('#product-select-option-0').change(function() {
var selected = $(this).val(), mainImage = jQuery('.featured img').attr('src').replace('_1024x1024', '_medium');
thumbnails.hide().html("");
arr = [];
var addImage = $.each( images, function( i, image ) {
var alt = images[i].alt, url = images[i].url;
if (alt == selected || url == mainImage) {
thumbnails.append('<div class="image span2"><a href="' + url.replace('_medium', '_1024x1024') + '" data-original-image="' + url.replace('_medium', '_1024x1024') + '"><img src="' + url + '" alt="' + alt + '"></a></div>');
}
});
arr.push(addImage);
$.when.apply($, arr).done(function () {
thumbnails.fadeIn();
$('#product .thumbs a').on('click', function(e) {
e.preventDefault();
switchImage($(this).attr('href'), null, $('.featured img')[0]);
});
});
});
});
</script>
<!-- Begin thumbnails -->
<div class="thumbs clearfix">
{% assign featured_alt = product.selected_or_first_available_variant.option1 %}
{% for image in product.images %}
{% if image.alt == featured_alt or image == featured_image %}
{% if settings.enable_product_image_zoom %}
<div class="image span2{% cycle 'last-in-row': '', '', ' last-in-row' %}">
<a href="{{ image | product_img_url: '1024x1024' }}" class="cloud-zoom-gallery">
<img src="{{ image | product_img_url: 'medium' }}" alt="{{ image.alt | escape }}" />
</a>
</div>
{% else %}
<div class="image span2{% cycle 'last-in-row': '', '', ' last-in-row' %}">
<a href="{{ image | product_img_url: '1024x1024' }}" data-original-image="{{ image | product_img_url: '1024x1024' }}">
<img src="{{ image | product_img_url: 'medium' }}" alt="{{ image.alt | escape }}" />
</a>
</div>
{% endif %}
{% endif %}
{% endfor %}
</div>
<!-- End thumbnails -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment