To men who want to take their online stores to the next level.

Let your images achieve their potential.

  • Customise it just as you want using CSS3.
  • Rapid and helpful support team, ready to assist you.

Install | Download

  • nopCommerce 3.xx
  • nopCommerce 2.xx

Looking for a nopCommerce lightbox plugin? Want customers to be able to enlarge your product images to fill the screen on any device? Try Magic Thumb!

This image lightbox has been enlarging product images since 2008. Created with the user in mind, Magic Thumb can be activated on hover or click. It includes over 30 customizations to fit perfectly with your store.

Need a nopCommerce plugin which zooms and enlarges, try Magic Zoom Plus. It's a 2-in-1 image zoom tool. Zoom on hover and enlarge on click. Give shoppers the choice how they view your products.

Installation

  1. Download Magic Thumb (free and fully functional demo version).
  2. Unzip the file and copy the magicthumb 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 magicthumb 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 = 'MagicThumb';</script>
    <script src="/Scripts/magicthumb/magicthumb.js" type="text/javascript"></script>
    <script src="/Scripts/magicthumb/magic-nopcommerce.js" type="text/javascript"></script>
    <link type="text/css" rel="stylesheet" href="/Scripts/magicthumb/magicthumb.css"/>
  5. Now your images should zoom! Contact us if you need help.
  6. Enjoy!
  7. Buy Magic Thumb To upgrade your free and fully functional trial version of Magic Thumb (which removes the "Trial version" text), buy Magic Thumb. Then overwrite the demo magicthumb.js file with the one from your licensed version.

Add 360 spins

Combine Magic Thumb and Sirv to display both lightbox images and 360 spin on the same product page. Used as a hosting, dynamic imaging as well as 360 degree spin, Sirv offers flexibility to your product pages.

  1. Install Magic Thumb.
  2. Create your Sirv account.
  3. Create a new folder in your Sirv account called products.
  4. Open the products folder and create another new folder. Name it to match the product ID in nopCommerce.
  5. Upload your set of product images to the new folder and a 360 spin will be generated.
  6. To activate Sirv, add following code to your page:
    <script type="text/javascript">
    var SirvID = 'YOUR-ACCOUNT-ID', SirvSpinsPath = 'products/{product-id}/{product-id}.spin';
    </script>
    

    (replacing YOUR-ACCOUNT-ID with your Sirv account ID).

  7. The 360 spin will now appear next to the other product images (you may need to refresh the page). If you need help, contact our support team.

Uninstallation

Thanks for trying Magic Thumb on your nopCommerce site! What did you hope Magic Thumb 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 = 'MagicThumb';</script>
    <script src="/Scripts/magicthumb/magicthumb.js" type="text/javascript"></script>
    <script src="/Scripts/magicthumb/magic-nopcommerce.js" type="text/javascript"></script>
    <link type="text/css" rel="stylesheet" href="/Scripts/magicthumb/magicthumb.css"/>
  2. Delete the magicthumb folder from the Scripts folder in the root of your web server.
  3. Magic Thumb is now uninstalled.

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.