diff --git a/CHANGELOG.md b/CHANGELOG.md index a3dfe02969..fa78171a3a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ # Changelog ## Draft +- Fix zoom behavior for small images in gallery (turn off zoom if image is too small). [#1325](https://github.com/bigcommerce/cornerstone/pull/1325) ## 2.3.1 (2018-08-03) - Fix for review tabs not appearing. [#1322](https://github.com/bigcommerce/cornerstone/pull/1322) diff --git a/assets/js/theme/product/image-gallery.js b/assets/js/theme/product/image-gallery.js index 1a17e93e51..ae833eb11b 100644 --- a/assets/js/theme/product/image-gallery.js +++ b/assets/js/theme/product/image-gallery.js @@ -41,7 +41,6 @@ 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 +66,22 @@ 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() {