Magento2 Swatch change Image does not slide to first Image

Question

I have a problem with product gallery changing swatch (f.e. color). I have a configurable product with different size and different color. each configurable product has it's own color image (I added "base, small, thumb, swatch to the image).

On product page first all images are loaded from parent product. If i click on swatch color (f. e. blue) the image for blue product is loaded and added on first position. but the product gallery is not starting/sliding to first image where color image is shown. Gallery shows same picture f.e. 5th position. Default behaviour of Magento is to slide automatically to first image, but it does not.

hope, somebody can help me to fix this issue. Thanks! martin

Answer 1

... I think, I found the bug. Magento removed sliding to first image in swatch-render.js:

 updateBaseImage: function (images, context, isInProductView) {
        var justAnImage = images[0],
            initialImages = this.options.mediaGalleryInitial,
            imagesToUpdate,
            gallery = context.find(this.options.mediaGallerySelector).data('gallery'),
            isInitial;

        if (isInProductView) {
            imagesToUpdate = images.length ? this._setImageType($.extend(true, [], images)) : [];
            isInitial = _.isEqual(imagesToUpdate, initialImages);

            if (this.options.gallerySwitchStrategy === 'prepend' && !isInitial) {
                imagesToUpdate = imagesToUpdate.concat(initialImages);
            }

            imagesToUpdate = this._setImageIndex(imagesToUpdate);

            if (!_.isUndefined(gallery)) {
                gallery.updateData(imagesToUpdate);
            }

            if (isInitial) {
                $(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
            } else {
                $(this.options.mediaGallerySelector).AddFotoramaVideoEvents({
                    selectedOption: this.getProduct(),
                    dataMergeStrategy: this.options.gallerySwitchStrategy
                });
            }
            gallery.first();
        } else if (justAnImage && justAnImage.img) {
            context.find('.product-image-photo').attr('src', justAnImage.img);
        }
    },

just add gallery.first(); in line 1253 in vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js

Copy js file to your theme /app/design/frontend/Vendor/default/Magento_Swatches/web/js