Make your images shine

AspDotNetSorefront is a long-time favourite for building web stores in ASP. How do you make it even better? For a start, with beautiful product images. Add style and sophistication to your website with our image tools. Choose your favourite from 3 gorgeous image zoom plugins that are sure to delight your customers and your conversions.

Magic Zoom Plus for AspDotNetStorefront

Make your products look attractive and earn more money

  • A delightful way to experience product images, on mobile and desktop.
  • Enlarge - cool effects, captions, custom buttons and cursors.
Supported versions
    All latest versions

98%    of shoppers say its their favourite zoom

Downloads   
1000+

Key features


Responsive

Fast loading

SEO friendly

Supports video

Easy to customise

Switchable thumbnails

Friendly support

One-off payment

jQuery compatible

Regularly updated

Lazy loading

Optimised for mobile

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.

Magic Zoom Plus for AspDotNetStorefront

Magic Zoom for AspDotNetStorefront

Show beautiful zoomed images on hover

  • Showing beautiful big images in pure style.
  • Show every detail on any device, with responsive JavaScript zoom.
Supported versions
    All latest versions

93%    of users say it boosted their sales

Downloads   
700+

Key features


Responsive

Fast loading

SEO friendly

Supports video

Easy to customise

Switchable thumbnails

Friendly support

One-off payment

Regularly updated

jQuery compatible

On-demand loading

Optimised for mobile

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.

Magic Zoom for AspDotNetStorefront

Magic Thumb for AspDotNetStorefront

Move back and forth between your enlarged images.

  • Super fast Javascript lightbox
  • Splendid image lightbox, easy to use and enjoy.
Supported versions
    All latest versions

92%    of users say its the best image lightbox

Downloads   
480+

Key features


Responsive

Fast loading

SEO friendly

Lazy loading

Supports video

Friendly support

One-off payment

Regularly updated

jQuery compatible

Swappable thumbnails

Installation


  1. Download Magic Thumb (free and fully functional demo version).
  2. Unzip the file on your computer and FTP the magicthumb folder to the root of your web server, keeping the file and folder structure intact.
  3. Download magicthumb-addons.js and copy this file to the same magicthumb 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="/magicthumb/magicthumb.css" rel="stylesheet"/>
    <script type="text/javascript" src="/magicthumb/magicthumb.js" ></script>
    <script type="text/javascript" src="/magicthumb/magicthumb-addons.js" ></script>
    <script type="text/javascript">
        
    initMagicThumb(<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();
        MagicThumb.update(
         document.getElementById('MagicThumbImage'),
         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 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.

Uninstallation


Thanks for trying Magic Thumb on your AspDotNetStorefront 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. 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="/magicthumb/magicthumb.css" rel="stylesheet"/>
    <script type="text/javascript" src="/magicthumb/magicthumb.js" ></script>
    <script type="text/javascript" src="/magicthumb/magicthumb-addons.js" ></script>
    <script type="text/javascript">
        
    initMagicThumb(<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();
        MagicThumb.update(
         document.getElementById('MagicThumbImage'),
         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 magicthumb folder from the root of your web server.
  3. Magic Thumb is now uninstalled.

Magic Thumb for AspDotNetStorefront

About

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.