AspDotNetStorefront

If you use AspDotNetStorefront, these instructions will help you add our tools to your website for advanced product image display.

Choose your favourite tool and integrate it yourself using the instructions below. Or hire us and we will install it for you (normally £29-£55).

Instructions

The following instructions are for Magic Zoom Plus™, but are identical for Magic Zoom™, Magic Magnify™, Magic Magnify Plus™, Magic Thumb™ and Magic Touch™. Just replace the references to magiczoomplus with whichever tool you wish to use.

1. Download the zip file for the tool you wish to install:
   • Magic Zoom Plus™ Download Examples
   • Magic Zoom™ Download Examples
   • Magic Thumb™ Download Examples
   • Magic Magnify Plus™ Download Examples
   • Magic Magnify™ Download Examples
2. Unzip the file and copy the contents of the magiczoomplus folder to the root of your web server
3. Download magiczoomplus-addons.js and copy this file to the 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:
   <script type="text/javascript" src="/magiczoomplus/magiczoomplus.js" ></script>
   <script type="text/javascript" src="/magiczoomplus/magiczoomplus-addons.js" ></script>
   <link type="text/css" href="/magiczoomplus/magiczoomplus.css" rel="stylesheet"/>
   <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();
       MagicZoomPlus.update(
           document.getElementById('MagicZoomPlusImage'),
           boardpicslg_<xsl:value-of select="ProductID" disable-output-escaping="yes"/>[scidx],
           boardpics_<xsl:value-of select="ProductID" disable-output-escaping="yes"/>[scidx]
       );
   }
   </script>
5. To upgrade from the demo version, either buy a license or get a free license (for non-commercial sites such as personal blogs and charities). Then overwrite the demo magiczoomplus.js file with the one from your licensed version.

Please contact us with any questions you have about installing our tools with BlueVoda Website Builder.

Installation of Magic Slideshow™ or Magic Scroll™

There are no step-by-step instructions for Magic Slideshow™ or Magic Scroll™.

Both these tools can be added to your AspDotNetStorefront site manually. Please refer to the installation guides and contact us if you get stuck. We can answer questions or we can do the whole installation for you.

• Magic Scroll™ installation instructions
• Magic Slideshow™ installation instructions

Contact us if you need help.

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.