Great design leads to greater business.

Move back and forth between your enlarged images.

  • Super fast Javascript lightbox.
  • Splendid image lightbox, easy to use and enjoy.

Install | Download

Using the standard AspDotNetStoreFront pop up to view product images? The unresponsive pop up which opens in a new window? Your images deserve better.

Want an image lightbox which works as part of your website, is completely responsive and supports swipe gestures on all handheld devices? Try Magic Thumb!

This product image lightbox opens on click, dimming the web page behind. Customers effortlessly move from one image to the next with navigation arrows, keyboard arrows or their finger on small screens.

Install the free trial and instantly experience the elegance Magic Thumb offers. Need a zoom effect and image lightbox? Try Magic Zoom Plus for the ultimate browsing experience.

Whichever image tool you choose, it's essential to use an image zoom which supports iOS and Android devices because more and more shoppers are choosing to buy online with handheld devices.

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.

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.