0

Magento2 default magnifier not working , so i am trying to implement my own zoom option in website. I got elevatezoom ref as https://codepen.io/baagii95/pen/zPOeMB

I followed same script in my magento app/design/frontend/Smartwave/Porto/Magento_Catalog/product/view/gallery.phtml

Placed following code. but zoom option is not coming to my image. there is no errors in console as well.

<script type="text/javascript">
require(['jquery','elevatezoom'], function($){ 
  $(document).ready(function(){
    var img_src=$('.slick-track .slick-current .slick-active img').attr('src');
  $('.slick-track .slick-current .slick-active img').elevateZoom({
      zoomType: "inner",
      scrollZoom: "true",
      cursor: "crosshair"
  });
});
});

</script>

When i tried view.xml settings as below

<var name="magnifier">
            <var name="fullscreenzoom">5</var>  <!-- Zoom for fullscreen (integer)-->
            <var name="top"></var> <!-- Top position of magnifier -->
            <var name="left"></var> <!-- Left position of magnifier -->
            <var name="width">400</var> <!-- Width of magnifier block -->
            <var name="height">400</var> <!-- Height of magnifier block -->
            <var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
            <var name="enabled">true</var> <!-- Turn on/off magnifier (true/false) -->
        <var name="mode">inside</var> <!-- Turn on/off magnifier (true/false) -->
        </var>

I am unable to see the zoomed image. please check attached screenshot for ref.enter image description here

0

Why are you using external JS for zoom ? Magento comes with zoom feature for product images.

To enable this you have to change couple of lines of node in theme xml. see below how you can enable it.

Add below code to your custom theme as for you it will be porto, Inside view.xml file.

<var name="magnifier">
        <var name="fullscreenzoom">20</var>  <!-- Zoom for fullscreen (integer)-->
        <var name="top"></var> <!-- Top position of magnifier -->
        <var name="left"></var> <!-- Left position of magnifier -->
        <var name="width"></var> <!-- Width of magnifier block -->
        <var name="height"></var> <!-- Height of magnifier block -->
        <var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
        <var name="enabled">false</var> <!-- Turn on/off magnifier (true/false) -->
        <var name="mode">outside</var> <!-- Zoom type (outside/inside) -->
</var>

You can also setup zoom feature for like, zoom inside, left,right etc. Update it according to your needs.

Don't forget to clear cache after adding this to your file to see your changes.

Read more here: https://devdocs.magento.com/guides/v2.3/javascript-dev-guide/widgets/widget_gallery_mg.html

  • I tried and updated my question – Dinesh Dec 18 '19 at 7:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.