Product Image Zoom

[zipurman]

This hook will get your product images to zoom on mouse over.

https://phoenixaddons.com/knowledgebase ... mage-zoom/

[zeeshop]

@zipurman Thanks for providing this addon.

I am wondering if it is possible to make it to work with multiple images on existing popup image system. Thanks

[zipurman]

@zeeshop You could add another target to the javascript, you would just need to look at the source code of your existing site.

For example, you could change:

Code: Select all

$('.pi-gallery a')

to

Code: Select all

$('.pi-gallery a, a img, .another-class img, .something-else')

[radhavallabh]

Hi dear;
Thank you for the beautiful addon..
Is it possible to zoom the image we hover--- in a different box that would appear on the right only when we hover. A concept like drift zoom....;
That would make it more cool I guess...
Regds./
radhavallabh

[zipurman]

Anything is possible. The addon was built around https://www.jacklmoore.com/zoom/. You'd have to create a div, and then upon hovering the image, the div would get the image x,y x magnification and the image would have to be set to the background image for the target div. All doable ... but it's a totally different addon/solution.

[gsmiley007]

nice add-on for zoom, just I noticed that if you have more than 1 picture, the additional picture, does not open in a new popup anymore. It just zooms in on the smaller picture

[zipurman]

just I noticed that if you have more than 1 picture, the additional picture, does not open in a new popup anymore. It just zooms in on the smaller picture

If using with multiple images, or with other mods, it may require adjusting the javascript to match the layout of your image library. I'd have to see the site's product page to suggest any edits.

[gsmiley007]

No other mods standard osc and adding more than one image to the store

[zipurman]

You can change the mod to be as follows:

Code: Select all

    class hook_shop_product_info_imageZoom {
        function listen_injectBodyEnd() {
            $magnify = 3;
            $sitepath = DIR_WS_CATALOG;
            $script = <<<script
<script src="{$sitepath}ext/zoom/jquery.zoom.js"></script>
<script>
$(document).ready(function(){
  $('.pi-gallery > a')
    .wrap('<span style="display:inline-block"></span>')
    .css('display', 'block')
    .parent()
    .zoom({magnify: {$magnify}});
  }); 
</script>

script;
            return $script;
        }
    }

That will restore the pop-up, but zooming additional images would require some extra work.

[gsmiley007]

From what I can see in the code change from the original and what you suggested now is that I remove
});

The popup came back, but the zoom does not work for the main picture.