Hot answers tagged

19

You need to replace the code of lib/web/magnifier/magnifier.js in your theme as below. $(document).on('mousemove', onMousemove); _init($box, gOptions); Replace it With. $box.on('mousemove', onMousemove); $box.on('mouseleave', mouseleave); function mouseleave(e) { onThumbLeave(); isOverThumb = false; $largeWrapper.addClass(MagnifyCls.magnifyHidden)...


8

Having experimented with more settings in the view.xml file, it seems changing <var name="allowfullscreen">true</var> to <var name="allowfullscreen">false</var> solved the problem.


8

For magento version 2.2.6 replace below code in your theme. File path lib/web/magnifier/magnifier.js Replace in app/design/frontend/vendor/module/web $box.on('mousemove', onMousemove); _init($box, customUserOptions); Replace it With. $box.on('mousemove', onMousemove); $box.on('mouseleave', mouseleave); function mouseleave(e) { ...


6

I upgrade to v2.2.6 and it doesn't work anymore after that I edit the code like this and it works : $box.on('mousemove', onMousemove); $box.on('mouseleave', mouseleave); function mouseleave(e) { onThumbLeave(); isOverThumb = false; $(largeWrapper).addClass(MagnifyCls.magnifyHidden); } // _init($box, gOptions); ...


4

You can used the following codes instead of link 1 code $smallImageUrl = Mage::getModel('catalog/product_media_config')->getMediaUrl($_product->getSmallImage()); or echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(350, 350);


4

Check app/design/frontend/{package}/{theme}/template/catalog/product/view/media.phtml. If your theme is somehow similar with the default one you should find something like this: <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,...


3

Looks like this is Magetno's bug. Check Here. Fix has been merged with Lattest Magetno 2.2.4. If you are running older version than you can modify below file as workarround. lib/web/magnifier/magnifier.js $box.on('mousemove', onMousemove); _init($box, gOptions); Reference :- Check This commit that is merged with Magento 2.2.4 Update:- ...


3

In the module Magento_Catalog there is the jquery.zoom.min.js file. Just set the magnify property to 0. (function ($) { var defaults = { url: false, callback: false, target: false, duration: 120, on: 'grab', // other options: grab, click, toggle touch: true, // enables a touch fallback onZoomIn: false, onZoomOut: false, ...


3

Set a smaller value for the z-index of the "Description" tab.


3

With the latest version, the above solution still didn't work, I had to specify the magnifier preview class specifically like this: $box.on('mousemove', onMousemove); $box.on('mouseleave', mouseleave); function mouseleave(e) { onThumbLeave(); isOverThumb = false; $('.magnifier-preview').addClass(MagnifyCls.magnifyHidden); } _init($box, ...


2

Open app/design/frontend/base/default/template/catalog/product/view/media.phtml Comment below code <!-- <script type="text/javascript"> //<![CDATA[ Event.observe(window, 'load', function() { product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint'); }); //]]> <...


2

Just for future reference if anyone else comes across to this question via google since it was the first google result when I searched for this problem what I did was change in file skin\frontend\rwd\default\js\app.js around line 614 IMAGE_ZOOM_THRESHOLD: 400, to fix the behaviour so it won't look bad. So the script will work now only for much larger ...


2

That class is added to the element depending upon the dimensions of product image. Check the dimensions of both images, one that can't magnify and one that can. You'll be able to see the difference easily. I remember seeing this hardcoded in somewhere in a JS file, my first guess would be app.js as that does most of the heavy job in that Magento version. ...


2

Very silly mistake. You just need to keep top and left values blank as below: <var name="top"></var> <!-- Top position of magnifier --> <var name="left"></var> <!-- Left position of magnifier -->


2

You can find the magnifier var and its child var into view.xml file of your theme's etc folder. <var name="magnifier"> <var name="fullscreenzoom">5</var> <!-- Zoom for fullscreen (integer)--> <var name="top"></var> <!-- Top position of magnifier --> <var name="left"></...


2

I looked inside some files (/skin/frontend/rwd/default/js/app.js) and realized that image.elevateZoom(); was commented, so all I did was delete the comment, and runned it. it worked.


2

You have to create custom theme and add below code to your view.xml file. Code to enable magnifier: <var name="magnifier"> <var name="fullscreenzoom">20</var> <!-- Zoom for fullscreen (integer)--> <var name="top"></var> <!-- Top position of magnifier --> <var name="left"></var&...


1

$box.on('mousemove', onMousemove); $box.on('mouseleave', mouseleave); function mouseleave(e) { onThumbLeave(); isOverThumb = false; $largeWrapper.addClass(MagnifyCls.magnifyHidden); } _init($box, gOptions); This code Working fine. Thanks,


1

app/design/frontend/[theme]/[theme]/etc/view.xml Search for: <var name="allowfullscreen">true</var> change it to: <var name="allowfullscreen">false</var> And then clear the cache in the backend. Np compiling or deploying needed.


1

Create a view.xml file if you havent allready in app\design\frontend\YOUR_VENDOR\base\etc\view.xml <?xml version="1.0"?> <view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd"> <vars module="Magento_Catalog"> <var name="breakpoints"> ...


1

You have to override etc/view.xml and change this code. <var name="gallery"> <var name="allowfullscreen">false</var> <!-- Turn on/off fullscreen (true/false) --> ... </var> or you can also use this. <var name="magnifier"> <var name="enabled">false</var> <!-- Turn on/off magnifier (true/false) --...


1

One way we disabled this was to add following CSS ; .zoomImg { display: none !important; visibility: hidden; }


1

Try to modify <var name="top"></var> <var name="left"></var> <var name="width">300</var> <var name="height">300</var>


1

Hi You can add some custom jQuery for this as your zoom image is not changing Write below code at the end of your js file. jQuery(document).ready(function(){ jQuery('.product-image-thumbs a.thumb-link img').click(function(){ setTimeout(function(){ jQuery('.zoomImg').attr('src',jQuery('.gallery-image.visible').attr('data-zoom-image')); }, ...


1

You should convert <select><option>... to <ul><li>... list, and apply jQuery scipt as shown here in demo : http://html-tuts.com/jquery-dropdown-menu/ Full Solution: Change this phtml <?php if(count($this->getStores())>1): ?> <div class="form-language"> <label for="select-language"><?php echo $this-&...


1

Don't use the dollar, you will have issues since it's prototype's baby. Where you call $(...).jqzoom();, replace it with jQuery(...).jqzoom(); and this should fix your issue (keep the noConflict).


1

There are some JS Errors in Frontend. Try to fix them. This will probably solve your zoom. And your smaller images have CSS-Attribute: display:none


1

Go to your theme/template/catalog/view/media.phtml and change this <img id="image-main" itemprop="image" class="gallery-image visible" src="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>" alt="<?php echo $this->escapeHtml($this->getImageLabel()) ?>" ...


1

PT - Vê se funciona com você meu módulo, é possível alterar as dimensões etc EN - See if it works with you the my module, you can change the dimensions etc. http://www.magentocommerce.com/magento-connect/dexxtz-product-zoom.html


1

(I can't comment yet I don't have enough reputation) You can find the file by searching the files for some content of the page, i.e. you can do a search for "product-img-box" in your files, it should be somewhere in app/design/frontend/default/[yourtheme]/template/catalog maybe in catalog/product/view.phtml?


Only top voted, non community-wiki answers of a minimum length are eligible