Engage customers instantly

Zoom or enlarge, the choice is theirs

  • Mobile - works beautifully on iPad, iPhone, Android.
  • Responsive - images scale up/down to fit users screen.

Install | Download

  • nopCommerce 3.xx
  • nopCommerce 2.xx

Relied upon by nopCommerce store owners, Magic Zoom Plus has been the professional choice since 2009 for effortless on-hover image zooming and on-click full-screen effects.

This nopCommerce image tool makes it easy to apply these effects to your pages.

With free new versions regularly released, your products will always look gorgeous with Magic Zoom Plus.

Installation

  1. Download Magic Zoom Plus (free and fully functional demo version).
  2. Unzip the file and copy the magiczoomplus folder to the Scripts folder in the root of your web server.
  3. Download this file: magic-nopcommerce.js (right click it and "Save as"), then copy that file to the magiczoomplus folder.
  4. Insert the following at the end of the \Views\Product\_ProductDetailsPictures.cshtml (nopCommerce 3.40) or Views\Catalog\_ProductDetailsPictures.cshtml (older nopCommerce versions):

    <script type="text/javascript">var MagicToolbox_toolName = 'MagicZoom';</script>
    <script src="/Scripts/magiczoomplus/magiczoomplus.js" type="text/javascript"></script>
    <script src="/Scripts/magiczoomplus/magic-nopcommerce.js" type="text/javascript"></script>
    <link type="text/css" rel="stylesheet" href="/Scripts/magiczoomplus/magiczoomplus.css"/>
  5. Now your images should zoom! Contact us if you need help.
  6. Enjoy!
  7. Buy Magic Zoom Plus To upgrade your free and fully functional trial version of Magic Zoom Plus (which removes the "Trial version" text), buy Magic Zoom Plus. Then overwrite the demo magiczoomplus.js file with the one from your licensed version.

Uninstallation

Thanks for trying Magic Zoom Plus on your nopCommerce site! What did you hope Magic Zoom Plus could do? How can we improve it? Let us know, we're always improving our tools based on customer feedback.

  1. Delete the following code from the end of the \Views\Product\_ProductDetailsPictures.cshtml (nopCommerce 3.40) or Views\Catalog\_ProductDetailsPictures.cshtml (older nopCommerce versions):

    <script type="text/javascript">var MagicToolbox_toolName = 'MagicZoom';</script>
    <script src="/Scripts/magiczoomplus/magiczoomplus.js" type="text/javascript"></script>
    <script src="/Scripts/magiczoomplus/magic-nopcommerce.js" type="text/javascript"></script>
    <link type="text/css" rel="stylesheet" href="/Scripts/magiczoomplus/magiczoomplus.css"/>
  2. Delete the magiczoomplus folder from the Scripts folder in the root of your web server.
  3. Magic Zoom Plus is now uninstalled.

FAQ

  1. Can I remove bounce effect from mobile devices?

    Yes! To disable the bounce effect from small screen devices, add the following CSS to your magiczoomplus.css file:

    .mobile-magic .mz-figure > img {
    opacity: 1 !important;
    }
    .mobile-magic .mz-figure > img + img {
    transform: scale(1) !important;
    }

    .mobile-magic .mz-figure {
    -webkit-perspective: none !important;
    perspective: none !important;
    }
    .mobile-magic .mz-figure > img {
    opacity: 1 !important;
    }
    .mobile-magic .mz-figure:not(.mz-ready) > img:last-child {
    -webkit-transform: scale(1) !important;
    transform: scale(1) !important;
    }

Customer reviews

  Rating: 0 (0 reviews)

There are no reviews yet. Be the first!

Submit your review


Thank you!
Your review has been received and will be posted soon.
Used only to verify your review is genuine.

Other nopCommerce extensions

Try our other great image effects!


These instructions are for nopCommerce, the open source e-commerce shopping cart. They will help you integrate our JavaScript image tools by referencing external JS files on your product pages.