image16.gif

 


 

 

MagicZoom™

Magic Zoom™ is a JavaScript zoom tool. It’s the best way to display images with ultimate detail. Users do not need to click anything – they just move their mouse over the image to see every detail of your product! Requires license from MagicZoom™.  Magic Zoom™ is enabled via the Add To Cart Plug-in. In addition to rendering a "Zoom" version of the product image, this tool also provides for visual selection of product configurations.  For instance, by supplying large, main, and thumb images for each available color configuration, the end-user is presented with a set of clickable thumbnails, in place of the standard configuration drop-down.  Additional image sets (alternate views) may be specified per configuration value.

 

This plug-in is typically used on the product details page. It can, however, be used wherever products are displayed.

 

ecxclamation.PNG Important: Before installing MagicZoom™, you must have licensed MagicZoom™ javascript before beginning implementation. Otherwise, you will be integrating it twice.

 

Pre-Plug-in Configuration (CORESense Tasks)

CORESense Implementation Team will complete the following steps for each version of MagicZoom as identified below.

 

MagicZoom Plus™

 

Step

Action

1

Receive the MagicZoom Plus™ zip file from the client.

2

Extract the MagicZoom Plus™ zip file.

3

Use FTP or SFTP to place these files in the following locations:

  • /static-interface_name/css/magiczoomplus.css

  • /static-interface_name/css/magiczoomplus.js

4

Using the website template editor, add the following HTML to the Global Head Include template:

        <!-- MagicZoom Plus -->

        <link rel="stylesheet" href="static/js/magiczoomplus/magiczoomplus.css" />

 <script src=""static/js/magiczoomplus/magiczoomplus.js" ></script>

5

Add following to styles.css

img.MagicZoomLoading {
    display: none;
}

6

Go to plugins/ product_page-magic_zoom to set MagicZoom configuration options.

 

 

Plug-in Configuration Steps (All Versions)

Follow the steps below once all pre-configuration tasks have been completed.

 

Step

Action

1

Size of Zoom Area (in Pixels, Required) - The size of the MagicZoom large image popup in pixels.

2

Position of Zoom Window (Required) - Where the MagicZoom large image popup will display relative to the main image. Options: Bottom, Left, Top, Right.

3

Loading Image - Specifies what loading image is displayed when MagicZoom is loading images. If left blank, a default loading image is used.

4

Loading Text - Displays a loading message to the user when MagicZoom is loading images. If left blank, no message is displayed.

5

Number of Image Sets (Required) - Tells MagicZoom how many additional Image Sets to configure. An Image Set is defined as a combination requiring thumbnail, small, and large images. Options: 1 - 20 sets.

6

Title for Image #N (Optional) - The title field from product general attributes. The value in this field is displayed as the Title of the MagicZoom large image popup.

7

Thumbnail Image #N (Required) - The thumbnail image field from product general attributes. The referenced field should be a path to a thumbnail image which renders thumbnails below the main image.

8

Small Image #N (Required) - The small image field from product general attributes. The referenced field should be a path to a small image which replaces the main image as thumbnails are clicked.

9

Large Image #N (Required) - The large image field from product general attributes. The referenced field should be a path to a large image which displays in the MagicZoom large image popup when the user hovers over the main image.

 

 

 

 

 

© 2015 CORESense · 1-866-229-2804 · info@coresense.com · 125 High Rock Avenue, Saratoga Springs, NY 12866