Designed to impress

Responsive design - auto scales to fit the user's screen

  • Mobile - works beautifully on iPad, iPhone, Android.
  • Enlarge - cool effects, captions, custom buttons and cursors.

Install | Download

As an aspdotnetstorefront user you know if you upload a large image to your product, aspdotnetstorefront automatically creates the medium and icon images for you. That's one great reason to upload large product images.

Another reason is you can use the large version of your product images to create a detailed view of your product. This is called an image zoom.

By default, aspdotnet has a built-in 'view larger image' link on the product web page. The pop up opens as a separate window, isn't responsive, and isn't zoomable.

Choose a product image zoom which feels part of your online store. Magic Zoom Plus has a lightbox effect which opens over your web page (no separate pop up window), is 100% responsive, and an additional zoom shows automatically when your large image is bigger than the screen size.

Want more? This image zoom tool also reveals a zoom window to the side when any main product image is hovered.

Try the Magic Zoom Plus free trial and see why it's head and shoulders better than the aspdotnetstorefront version.

Live demos

Installation

  1. Download Magic Zoom Plus (free and fully functional demo version).
  2. Unzip the file on your computer and FTP the magiczoomplus folder to the root of your web server, keeping the file and folder structure intact.
  3. Download magiczoom-addons.js and copy this file to the same magiczoomplus folder
  4. In the product details page template (for example, product.SimpleProduct.xml.config) find tag <xsl:value-of select="aspdnsf:LookupProductImage(..)" .. /> that displays main product image and paste following code just after this tag:

    <link type="text/css" href="/magiczoomplus/magiczoomplus.css" rel="stylesheet"/>
    <script type="text/javascript" src="/magiczoomplus/magiczoomplus.js" ></script>
    <script type="text/javascript" src="/magiczoomplus/magiczoom-addons.js" ></script>
    <script type="text/javascript">
        
    initMagicZoomPlus(<xsl:value-of select="ProductID" disable-output-escaping="yes"/>,"");
    function changecolorimg_<xsl:value-of select="ProductID" disable-output-escaping="yes"/>() {
        var scidx = ProductPicIndex_<xsl:value-of select="ProductID" disable-output-escaping="yes"/> + ',' + ProductColor_<xsl:value-of select="ProductID" disable-output-escaping="yes"/>.toLowerCase();
        MagicZoom.update(
         document.getElementById('MagicZoomImage'),
         boardpicslg_<xsl:value-of select="ProductID" disable-output-escaping="yes"/>[scidx],
         boardpics_<xsl:value-of select="ProductID" disable-output-escaping="yes"/>[scidx]
        );
    }
    </script>
    
  5. 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 AspDotNetStorefront 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. In the product details page template (for example, product.SimpleProduct.xml.config) find tag <xsl:value-of select="aspdnsf:LookupProductImage(..)" .. /> that displays main product image and delete following code just after this tag:

    <link type="text/css" href="/magiczoomplus/magiczoomplus.css" rel="stylesheet"/>
    <script type="text/javascript" src="/magiczoomplus/magiczoomplus.js" ></script>
    <script type="text/javascript" src="/magiczoomplus/magiczoom-addons.js" ></script>
    <script type="text/javascript">
        
    initMagicZoomPlus(<xsl:value-of select="ProductID" disable-output-escaping="yes"/>,"");
    function changecolorimg_<xsl:value-of select="ProductID" disable-output-escaping="yes"/>() {
        var scidx = ProductPicIndex_<xsl:value-of select="ProductID" disable-output-escaping="yes"/> + ',' + ProductColor_<xsl:value-of select="ProductID" disable-output-escaping="yes"/>.toLowerCase();
        MagicZoom.update(
         document.getElementById('MagicZoomImage'),
         boardpicslg_<xsl:value-of select="ProductID" disable-output-escaping="yes"/>[scidx],
         boardpics_<xsl:value-of select="ProductID" disable-output-escaping="yes"/>[scidx]
        );
    }
    </script>
    
  2. Delete the magiczoomplus folder from 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 AspDotNetStorefront extensions

Try our other great image effects!


These instructions are for AspDotNetStorefront to provide advanced product image display.

Use them to add effects to your website including image zoom on hover/mouseover; image lightbox (enlarge image to full screen); image slideshows in JavaScript; image carousels; and image magnifiers.