Alluring images to seduce your customers.

Show beautiful zoomed images on hover

  • Users love the smooth movement and high quality zoom.
  • Fast and free email support.

Install | Download

Customers' trust is crucial for any business, especially when it comes to buying online.

Make your AspDotNetStoreFront store instantly trustworthy by showing customers the smallest details of your products with a product image zoom.

Magic Zoom works well because a zoomed window appears to the side to show a glorious close-up of each item, its smooth transition feels part of your website, and it's fully responsive which means images scale down and up depending on the shoppers screen size.

Need images to completely fill every screen size? Try Magic Zoom Plus. It too is fully responsive but has the added bonus of also using a lightbox effect. Perfect for iPads and smaller screens.

Installation

  1. Download Magic Zoom (free and fully functional demo version).
  2. Unzip the file on your computer and FTP the magiczoom 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 magiczoom 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="/magiczoom/magiczoom.css" rel="stylesheet"/>
    <script type="text/javascript" src="/magiczoom/magiczoom.js" ></script>
    <script type="text/javascript" src="/magiczoom/magiczoom-addons.js" ></script>
    <script type="text/javascript">
        
    initMagicZoom(<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 To upgrade your free and fully functional trial version of Magic Zoom (which removes the "Trial version" text), buy Magic Zoom. Then overwrite the demo magiczoom.js file with the one from your licensed version.

Uninstallation

Thanks for trying Magic Zoom on your AspDotNetStorefront site! What did you hope Magic Zoom 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="/magiczoom/magiczoom.css" rel="stylesheet"/>
    <script type="text/javascript" src="/magiczoom/magiczoom.js" ></script>
    <script type="text/javascript" src="/magiczoom/magiczoom-addons.js" ></script>
    <script type="text/javascript">
        
    initMagicZoom(<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 magiczoom folder from the root of your web server.
  3. Magic Zoom 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 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.