if you are using custom theme then make file (renderer.phtml) in Magento_Swatches\templates\product\view\
i.e.: Magento_Swatches\templates\product\view\renderer.phtml
and paste below code (only for magento 2.1.0)
<div class="swatch-opt" data-role="swatch-options"></div>
<script>
require(["jquery", "jquery/ui", "Magento_Swatches/js/swatch-renderer"], function ($) {
var oJsonConfig = <?php echo $block->getJsonConfig(); ?>;
$('.swatch-opt').SwatchRenderer({
jsonConfig: <?php /* @escapeNotVerified */ echo $block->getJsonConfig(); ?>,
jsonSwatchConfig: <?php /* @escapeNotVerified */ echo $block->getJsonSwatchConfig(); ?>,
mediaCallback: '<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>'
});
$('[data-gallery-role=gallery-placeholder]').on('gallery:loaded', function() {
// NOTE: Using .one() instead of .on() to prevent duplicate bindings.
$('.fotorama').one('fotorama:ready', function(e, fotorama, extra) {
// Update product images faster when clicking on color swatch
$('.swatch-option.color').click(function() {
var sOptionId = this.getAttribute('option-id');
for (var attributeId in oJsonConfig.attributes) {
console.log(oJsonConfig);
var oAttribute = oJsonConfig.attributes[attributeId];
if (oAttribute.code==='color') {
for (var i=0; i<oAttribute.options.length; ++i) {
var oOption = oAttribute.options[i];
if (oOption.id===sOptionId) {
// Gather images
var aImages = oJsonConfig.images[oOption.products[0]],
aFotoramaImages = [];
for (var j=0; j<aImages.length; ++j) {
if (aImages[j].isMain) {
// Main image (first position)
aFotoramaImages[0] = {
full: aImages[j].full,
img: aImages[j].img,
thumb: aImages[j].thumb
};
} else {
// Subsequent images
aFotoramaImages[aImages[j].position] = {
full: aImages[j].full,
img: aImages[j].img,
thumb: aImages[j].thumb
};
}
}
// Load images into Fotorama
// API reference: http://fotorama.io/customize/api/
fotorama.load(aFotoramaImages);
break;
}
}
break;
}
}
});
});
});
});
</script>