extensions
Make your images shine
AspDotNetStorefront 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.
- All latest versions
98% of shoppers say its their favourite zoom
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
- Download Magic Zoom Plus (free and fully functional demo version).
- 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.
- Download magiczoom-addons.js and copy this file to the same magiczoomplus folder
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 href="/magiczoomplus/magiczoomplus.css" rel="stylesheet"> <script src="/magiczoomplus/magiczoomplus.js"></script> <script src="/magiczoomplus/magiczoom-addons.js"></script> <script> 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>
- 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.
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.
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 href="/magiczoomplus/magiczoomplus.css" rel="stylesheet"> <script src="/magiczoomplus/magiczoomplus.js"></script> <script src="/magiczoomplus/magiczoom-addons.js"></script> <script> 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>
- Delete the magiczoomplus folder from the root of your web server.
- Magic Zoom Plus is now uninstalled.
Magic Zoom Plus for AspDotNetStorefront
- All latest versions
93% of users say it boosted their sales
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
- Download Magic Zoom (free and fully functional demo version).
- 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.
- Download magiczoom-addons.js and copy this file to the same magiczoom folder
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 href="/magiczoom/magiczoom.css" rel="stylesheet"> <script src="/magiczoom/magiczoom.js"></script> <script src="/magiczoom/magiczoom-addons.js"></script> <script> 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>
- 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.
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.
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 href="/magiczoom/magiczoom.css" rel="stylesheet"> <script src="/magiczoom/magiczoom.js"></script> <script src="/magiczoom/magiczoom-addons.js"></script> <script> 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>
- Delete the magiczoom folder from the root of your web server.
- Magic Zoom is now uninstalled.
Magic Zoom for AspDotNetStorefront
- All latest versions
92% of users say its the best image lightbox
Responsive
Fast loading
SEO friendly
Lazy loading
Supports video
Friendly support
One-off payment
Regularly updated
jQuery compatible
Swappable thumbnails
- Download Magic Thumb (free and fully functional demo version).
- 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.
- Download magicthumb-addons.js and copy this file to the same magicthumb folder
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 href="/magicthumb/magicthumb.css" rel="stylesheet"> <script src="/magicthumb/magicthumb.js"></script> <script src="/magicthumb/magicthumb-addons.js"></script> <script> 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>
- 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.
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.
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 href="/magicthumb/magicthumb.css" rel="stylesheet"> <script src="/magicthumb/magicthumb.js"></script> <script src="/magicthumb/magicthumb-addons.js"></script> <script> 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>
- Delete the magicthumb folder from the root of your web server.
- 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.