Improved again and again. Get version 4.5.

The world's finest image zoom for websites.

  • Frequently updated so your website stays fresh.
  • Beautiful experience on desktop and mobile alike.

Install | Download

Relied upon by ekmPowershop store owners, Magic Zoom Plus has been the professional choice since 2009 for effortless on-hover image zooming and on-click full-screen effects.

This ekmPowershop image tool makes it easy to apply these effects to your pages.

With free new versions regularly released, your products will always look gorgeous with Magic Zoom Plus.

Installation

  1. Download Magic Zoom Plus (free and fully functional trial version).
  2. Add following code to the end of the magiczoomplus.css file:

    button.mz-button { 
    font-family: 'Helvetica Neue', Helvetica, 'Lucida Grande', Tahoma, Arial, Verdana, sans-serif !important;
    font-weight: 100 !important; 
    } 
    button.mz-button.mz-button-prev:before { content: '‹'; }
    button.mz-button.mz-button-next:before { content: '›'; }
    button.mz-button.mz-button-close:before { content: '×'; }
    
  3. Upload magiczoomplus.js in the Other files tab and magiczoomplus.css in the Style Sheets tab.
  4. Go to Design > Desktop and click Edit Custom Layout under Product Page Layout.
  5. Add the following code somewhere in the editing template:

    <link href="/ekmps/shops/{your shop id}/resources/Styles/magiczoomplus.css" rel="stylesheet" type="text/css" media="screen"/>
    <script src="/ekmps/shops/{your shop id}/resources/Other/magiczoomplus.js" type="text/javascript"></script>

    The file paths to the .js and .css files above may be incorrect - you can find the actual paths in the tabs Other files and Style Sheets within the File manager section.

  6. Replace the main code image code [ekm:productimage]..[/ekm:productimage] with the following code:

    <a href="[ekm:productimage]width='auto';height='1000';images_layout='[image_1_url]';[/ekm:productimage]" id="mainImage" class="MagicZoom">
    <img src="[ekm:productimage]width='auto';height='450';images_layout='[image_1_url]';[/ekm:productimage]"/>
    </a>
    

    You can use your own values for width and height of the small and large images.

  7. Insert the code below if you want to show additional image thumbnails to swap between multiple images:

    <script type="text/javascript">
    var altimages = {
      1: {
        "thumb" : "[ekm:productimage]width='auto';height='80';images_layout='[image_1_url]';[/ekm:productimage]",
        "small" : "[ekm:productimage]width='auto';height='450';images_layout='[image_1_url]';[/ekm:productimage]",
        "large" : "[ekm:productimage]width='auto';height='1000';images_layout='[image_1_url]';[/ekm:productimage]"
      },
      2: {
        "thumb" : "[ekm:productimage]width='auto';height='80';images_layout='[image_2_url]';[/ekm:productimage]",
        "small" : "[ekm:productimage]width='auto';height='450';images_layout='[image_2_url]';[/ekm:productimage]",
        "large" : "[ekm:productimage]width='auto';height='1000';images_layout='[image_2_url]';[/ekm:productimage]"
      },
      3: {
        "thumb" : "[ekm:productimage]width='auto';height='80';images_layout='[image_3_url]';[/ekm:productimage]",
        "small" : "[ekm:productimage]width='auto';height='450';images_layout='[image_3_url]';[/ekm:productimage]",
        "large" : "[ekm:productimage]width='auto';height='1000';images_layout='[image_3_url]';[/ekm:productimage]"
      },
      4: {
        "thumb" : "[ekm:productimage]width='auto';height='80';images_layout='[image_4_url]';[/ekm:productimage]",
        "small" : "[ekm:productimage]width='auto';height='450';images_layout='[image_4_url]';[/ekm:productimage]",
        "large" : "[ekm:productimage]width='auto';height='1000';images_layout='[image_4_url]';[/ekm:productimage]"
      },
      5: {
        "thumb" : "[ekm:productimage]width='auto';height='80';images_layout='[image_5_url]';[/ekm:productimage]",
        "small" : "[ekm:productimage]width='auto';height='450';images_layout='[image_5_url]';[/ekm:productimage]",
        "large" : "[ekm:productimage]width='auto';height='1000';images_layout='[image_5_url]';[/ekm:productimage]"
      }
    }
    for (var i = 1; i <= Object.keys(altimages).length; i++) {
      if (altimages[i]["small"] != "") {
        document.write('<a href="' + altimages[i]['large'] + '" data-zoom-id="mainImage" data-image="' + altimages[i]['small'] + '"><img src="' + altimages[i]['thumb'] + '" alt=""/></a>');
        document.write(' ');
      }
    }
    </script>
    
  8. That's it.
  9. 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 ekmPowershop 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. Replace the following code with the main code image code [ekm:productimage]..[/ekm:productimage]:

    <a href="[ekm:productimage]width='auto';height='1000';images_layout='[image_1_url]';[/ekm:productimage]" id="mainImage" class="MagicZoom">
    <img src="[ekm:productimage]width='auto';height='450';images_layout='[image_1_url]';[/ekm:productimage]"/>
    </a>
    
  2. Delete the following code from the editing template:

    <link href="/ekmps/shops/{your shop id}/resources/Styles/magiczoomplus.css" rel="stylesheet" type="text/css" media="screen"/>
    <script src="/ekmps/shops/{your shop id}/resources/Other/magiczoomplus.js" type="text/javascript"></script>
  3. Go to Design > Desktop and click Edit Custom Layout under Product Page Layout.
  4. Delete magiczoomplus.js from the Other files tab and magiczoomplus.css from the Style Sheets tab.
  5. Magic Zoom Plus is now uninstalled.

FAQ

  1. Can I remove bounce effect from mobile devices?

    Yes! To disable the bounce effect from small screen devices, add the following CSS to your magiczoomplus.css file:

    .mobile-magic .mz-figure > img {
    opacity: 1 !important;
    }
    .mobile-magic .mz-figure > img + img {
    transform: scale(1) !important;
    }

    .mobile-magic .mz-figure {
    -webkit-perspective: none !important;
    perspective: none !important;
    }
    .mobile-magic .mz-figure > img {
    opacity: 1 !important;
    }
    .mobile-magic .mz-figure:not(.mz-ready) > img:last-child {
    -webkit-transform: scale(1) !important;
    transform: scale(1) !important;
    }

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 ekmPowershop extensions

Try our other great image effects!


These instructions are for ekmPowershop. 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.