ekmPowershop integration

If you use ekmPowershop, use these instructions to add our tools to your ekmPowershop website.

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. Go to Design > File manager and upload buttons1.png and loader.gif in the Design images tab.
3. In the magiczoomplus.css replace all appearences of 'graphics/' with '../Design/'.
4. Upload magiczoomplus.js in the Other files tab and magiczoomplus.css in the Style Sheets tab.
5. Go to Design > Template and click Edit product page under Page Layouts.
6. On the next page click the Change Page Layout button.
7. On the next page, select the I wish to use a custom layout link and select the layout you wish to modify (or Edit current Page Layout if there is one).
8. 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.
9. 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]" class="MagicZoomPlus">
   <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.
10. 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 <= altimages.length; i++) {
      if (altimages[i]["small"] != "") {
        if (i == 1) {
          document.write('Alternate images:');
        }
        document.write('<a href="' + altimages[i]['large'] + '" rel="zoom-id:mainImage;" rev="' + altimages[i]['small'] + '"><img src="' + altimages[i]['thumb'] + '" alt=""/></a>');
        document.write(' ');
      }
    }
    </script>

Installation of Magic Slideshow™ or Magic Scroll™

To install Magic Slideshow™ or Magic Scroll™, contact us and we will look at your ekmPowershop site to determine what is required. There are no standard installation instructions - it depends which page you wish to slide images on, how many images, what size and so on.

About

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.