diff --git a/assets/js/theme/product/image-gallery.js b/assets/js/theme/product/image-gallery.js index 1a17e93e51..f54c82bf6b 100644 --- a/assets/js/theme/product/image-gallery.js +++ b/assets/js/theme/product/image-gallery.js @@ -2,6 +2,7 @@ import $ from 'jquery'; import 'easyzoom'; import _ from 'lodash'; + export default class ImageGallery { constructor($gallery) { this.$mainImage = $gallery.find('[data-image-gallery-main]'); @@ -39,9 +40,9 @@ export default class ImageGallery { } } + selectNewImage(e) { e.preventDefault(); - const $target = $(e.currentTarget); const imgObj = { mainImageUrl: $target.attr('data-image-gallery-new-image-url'), @@ -67,8 +68,24 @@ export default class ImageGallery { }); } + + checkImage() { + const containerHeight = $('.productView-image').height(); + const containerWidth = $('.productView-image').width(); + const height = this.easyzoom.data('easyZoom').$zoom.context.height; + const width = this.easyzoom.data('easyZoom').$zoom.context.width; + if (height < containerHeight || width < containerWidth) { + this.easyzoom.data('easyZoom').hide(); + } + } + + setImageZoom() { - this.easyzoom = this.$mainImage.easyZoom({ errorNotice: '', loadingNotice: '' }); + this.easyzoom = this.$mainImage.easyZoom({ + onShow: () => this.checkImage(), + errorNotice: '', + loadingNotice: '', + }); } bindEvents() {