Jquery for product's image zoom

hi
I want to use Jquery plugin(http://www.jqueryscript.net/zoom/Simple-Image-Hover-Zoom-Plugin-With-jQuery-spzoom.html)in nopcommerce 3.70.
finally my product's image zoom be like that.
how can I do this?


Regards

Hi, you need to go on below file and make changes according to this plugins documentation. They have already given details how to use this scripts.

Nop.Web/Views/Product/_ProductDetailsPictures.cshtml

You can also use either Magic Zoom or Magic Zoom Plus to zoom your images in NopCommerce.

The installation is easy, by making a small edit to \Views\Product\_ProductDetailsPictures.cshtml (nopCommerce 3.40) or Views\Catalog\_ProductDetailsPictures.cshtml (older nopCommerce versions).

It's described here:

Magic Zoom: https://www.magictoolbox.com/magiczoom/modules/nopcommerce/
Magic Zoom Plus: https://www.magictoolbox.com/magiczoomplus/modules/nopcommerce/

The difference between these 2 tools is that the first one zooms images on hover and the second also enlarges images on click.

thank you for your answers
But, #SuperNopCommerce please more guide me and explain for me the details of changes in Nop.Web/Views/Product/_ProductDetailsPictures.cshtml If possible.
I try to change that but it doesn't work. I think I don't understand the substructure of the nopcommerce _ProductDetailsPictures.cshtml file that I couldn't change them Correctly.

thanks for your help

[email protected] wrote:
Hi.
...you should check another one folder Nop.Web\Themes\NAMEYOURTheme\Views\Product/_ProductDetailsPictures.cshtml ... and make changes according  plugin documentation.
Best Regards.

abch wrote:

Yes abch, is right you need to do this changes in your active theme. Also you will need to follow and read this Jquery plugin document line by line and follow same thing in your theme above path abch has given.
It will surely work.

But in -no source- version in Themes\DefaultClean\Views\Shared I have just Head.chtml
and in -with source- version in Presentation\Nop.Web\Themes\DefaultClean\Views\Shared I have just Head.chtml too.

can you explain to me about this part of documentation, please?
4. Call the function to active the plugin.
  

$('[data-spzoom]').spzoom();

where I can use it?

please help me.
this is my theme folder.

abch wrote:

but in folder Nop.Web\Themes\NAMEYOURTheme\Views... I just have shared folder and just head.chtml is in shared folder.

What should I do???