MAGETWO-96594: Image Position issue with Associated Products

Author: Sergey Shvets

app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js

@@ -291,6 +291,7 @@ define([
             images = this.options.spConfig.images[this.simpleProduct];
 
             if (images) {
+                images = this._sortImages(images);
                 if (this.options.gallerySwitchStrategy === 'prepend') {
                     images = images.concat(initialImages);
                 }
@@ -309,7 +310,17 @@ define([
                 $(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
             }
 
-            galleryObject.first();
+        },
+
+        /**
+         * Sorting images array
+         *
+         * @private
+         */
+        _sortImages: function (images) {
+            return _.sortBy(images, function (image) {
+                return image.position;
+            });
         },
 
         /**

app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js

@@ -695,7 +695,7 @@ define([
          */
         _sortImages: function (images) {
             return _.sortBy(images, function (image) {
-                return image.isMain === true ? -1 : image.position;
+                return image.position;
             });
         },
 
@@ -1243,9 +1243,6 @@ define([
                         dataMergeStrategy: this.options.gallerySwitchStrategy
                     });
                 }
-
-                gallery.first();
-
             } else if (justAnImage && justAnImage.img) {
                 context.find('.product-image-photo').attr('src', justAnImage.img);
             }

lib/web/mage/gallery/gallery.js

@@ -472,8 +472,16 @@ define([
                      * @param {Array.<Object>} data - Set of gallery items to update.
                      */
                     updateData: function (data) {
+                        var mainImageIndex;
                         if (_.isArray(data)) {
                             settings.fotoramaApi.load(data);
+                            mainImageIndex = getMainImageIndex(data);
+                            if (mainImageIndex) {
+                                settings.fotoramaApi.show({
+                                    index: mainImageIndex,
+                                    time: 0
+                                });
+                            }
 
                             $.extend(false, settings, {
                                 data: data,