Please help - remove zoom from hover over images

New Member
4 0 0

Hi Community,

 

I followed a lot of the posts on here and watched some videos, however my code seems to be a little different.  Is there someone out there that could review the below and advise what I need to change to remove the zoom functionality.  I'm finding when loading products on mobile, the user can't progress past the first product image due to the zoom function being enabled.

Thank you heaps for helping me out.

 

if(value=='hover'){self.options.zoomEnabled=!1}}};$.fn.elevateZoom=function(options){return this.each(function(){var elevate=Object.create(ElevateZoom);elevate.init(options,this);$.data(this,'elevateZoom',elevate)})};$.fn.elevateZoom.options={zoomActivation:"hover",zoomEnabled:"false",preloading:1,zoomLevel:1,scrollZoom:!1,scrollZoomIncrement:0.1,minZoomLevel:!1,maxZoomLevel:!1,easing:!1,easingAmount:12,lensSize:200,zoomWindowWidth:400,zoomWindowHeight:400,zoomWindowOffetx:0,zoomWindowOffety:0,zoomWindowPosition:1,zoomWindowBgColour:"#fff",lensFadeIn:!1,lensFadeOut:!1,debug:!1,zoomWindowFadeIn:!1,zoomWindowFadeOut:!1,zoomWindowAlwaysShow:!1,zoomTintFadeIn:!1,zoomTintFadeOut:!1,borderSize:4,showLens:!0,borderColour:"#888",lensBorderSize:1,lensBorderColour:"#000",lensShape:"square",zoomType:"window",containLensZoom:!1,lensColour:"white",lensOpacity:0.4,lenszoom:!1,tint:!1,tintColour:"#333",tintOpacity:0.4,gallery:!1,galleryActiveClass:"zoomGalleryActive",imageCrossfade:!1,constrainType:!1,constrainSize:!1,loadingIcon:!1,cursor:"default",responsive:!0,onComplete:$.noop,onDestroy:function(){},onZoomedImageLoaded:function(){},onImageSwap:$.noop,onImageSwapComplete:$.noop}})(jQuery,window,document)

0 Likes

Hello ,
Please share your site url.
So that i can check and provide you exact solution here.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes

Hello yalanjidreaming,

Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

.zoomLens {
    display: none!important;
}

You are working on which theme. 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
4 0 0
Thanks for the help. That code didn't seem to work. On mobile it won't allow a user to scroll down the page. I believe it's the zoom feature. I would have thought it would have been something within the jquery.elevatezoom.min.js asset.
0 Likes

Hello this will work for product page zoom hover.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
4 0 0

Thank you again.  It did work on desktop (chrome) product page.  However on mobile (chrome), the issue is still presenting.  I installed inspectlet into my site to view live sessions, and unfortunately as soon as a potential customer experiences that 'zoom' (potentially scroll issue), they leave quickly.  Hoping for any help - maybe it's a mobile code edit I need to do??

0 Likes