Beautiful modules to make your Magento site look gorgeous!

Supported Magento versions

All versions of Magento are supported:
  • Magento Enterprise: 1.11.x - 1.12.x
  • Magento Community: 1.4.x - 1.9.x
Futureproof: we update the extension whenever new Magento versions are released.
Magic Zoom PlusMagic Zoom Plus™Magic ZoomMagic Zoom™Magic ScrollMagic Scroll™Magic 360Magic 360™Magic SlideshowMagic Slideshow™Magic TouchMagic Touch™Magic ThumbMagic Thumb™
Product details page
Category page
Home page
New products block
Recently viewed products
Manual install elsewhere

Supported features

  • Multiple images (uploaded with the default Magento image manager)
  • Multi-language (different locales)
  • Product options (use different images for each option value, by "Drop-down" and "Radio Buttons")
  • Different configs for different themes
  • Show additional selectors on category page
  • Magento image clipped can be ignored
  • Native Magento watermarks
  • Can be used with other our Magento modules

Image handling

All images can be uploaded via your Magento admin area.

Choose one image as the default. Change thumbnail sizes on the module configuration page. All thumbnails will be created via internal Magento classes.

Better Configurable Products

Our modules can work with the "Better Configurable Products" Magento extension (BCP) like so:

  1. Go to the BCP configuration page (System > Configuration > Catalog > Better Configurable Product Settings).
  2. Set the parameter 'Media Section JavaScript callback to reinitialize image functionality' to:
    • MagicZoomPlus.resfresh();
    See this screenshot. Change that line of code depending on which tool you are using:
    • Magic Zoom: MagicZoom.refresh();
    • Magic Thumb: MagicThumb.refresh();
    • Magic Touch: MagicTouch.refresh();

Temgra modules integration

Our tools can be used with some Temgra modules.

The following instructions work with Magic Zoom™, Magc Zoom Plus™, Magic Thumb™ or Magic Touch™.

  1. Install the Magento module. In this example, we use Magic Zoom Plus™.
  2. To install a different module e.g. Magic Zoom™, change all references of "MagicZoomPlus" in the instructions below to "MagicZoom" (or whichever other of our modules you wish to use).
  3. Open the media.phtml file and find this line:

    $main = $tool->template(compact("id", "title", "description", "shortDescription", "img", "thumb"));

    and add this line after it:

    $main = str_replace('<img ', '<img id="MagicZoomPlusImageMainImage" ', $main);
  4. Open the view.phtml file and find this line:

    require 'app/code/local/Temgra/ColorThumbnails/colorThumbnails.php';

    and after all color thumbnails code insert following:

    <?php echo '<'; ?>?php $helper = Mage::helper('magiczoomplus/settings'); $tool = $helper->loadTool('product'); ?>
    <script type="text/javascript">
    var mainImage = new Array();
    var mainAnchor = document.getElementById('MagicZoomPlusImageMain');
    mainImage[0] = mainAnchor.href;
    mainImage[1] = mainAnchor.firstChild.src;
    colorThumbnails.a20[0] = 'MagicZoomPlusImageMainImage';
    colorThumbnails.x5Orig = colorThumbnails.x5;
    colorThumbnails.x5 = function(a) {
        MagicZoomPlus.stop($mjs('MagicZoomPlusImageMain'));
        if(a == 0) {
            $mjs('MagicZoomPlusImageMainImage').style.height = 'auto';
            $mjs('MagicZoomPlusImageMainImage').style.width = 'auto';
        } else {
            $mjs('MagicZoomPlusImageMainImage').style.height = '<?php echo '<'; ?>?php echo $tool->params->getValue('thumb-max-height');?>px';
            $mjs('MagicZoomPlusImageMainImage').style.width = '<?php echo '<'; ?>?php echo $tool->params->getValue('thumb-max-width');?>px';
        }
        colorThumbnails.x5Orig(a);
        if(a == 0) {
            $mjs('MagicZoomPlusImageMain').href = mainImage[0];
            $mjs('MagicZoomPlusImageMainImage').src = mainImage[1];
        } else {
            $mjs('MagicZoomPlusImageMain').href = $mjs('MagicZoomPlusImageMainImage').src;
        }
        MagicZoomPlus.start($mjs('MagicZoomPlusImageMain'));
    }
    colorThumbnails.v3Orig = colorThumbnails.v3;
    colorThumbnails.v3 = function(a) {
        MagicZoomPlus.stop($mjs('MagicZoomPlusImageMain'));
        colorThumbnails.v3Orig(a);
        if(a == 0) {
            $mjs('MagicZoomPlusImageMain').href = mainImage[0];
            $mjs('MagicZoomPlusImageMainImage').src = mainImage[1];
        } else {
            $mjs('MagicZoomPlusImageMain').href = $mjs('MagicZoomPlusImageMainImage').src;
        }
        MagicZoomPlus.start($mjs('MagicZoomPlusImageMain'));
    }
    </script>
  1. Install the Magento module. In this example, we use Magic Zoom Plus™.
  2. To install a different tool, change "magiczoomplus" and "Magic Zoom Plus" in the instructions below to the name of the tool you are using.
  3. Find the file "media.phtml" in Color Last and back it up. Then replace it with the media.phtml file from Magic Zoom Plus™.
  4. Open the media.phtml file and find this line:

    $main = $tool->template(compact("id", "title", "description", "shortDescription", "img", "thumb"));

    and add this line after it:

    $main = str_replace('<img ', '<img id="image" ', $main);

    In the same file get rid of the following line:

    echo '<img id="image" scr="" style="display: none !important;" />'; 
  5. Add the following lines to the end of the file:

    <div id="more-views" style="display: none;"></div>
    <script type="text/javascript">
    colorlast.x1orig = colorlast.x1;
    colorlast.x1 = function(img) {
        MagicZoomPlus.stop($mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>'));
        $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').style.height = '<?php echo '<'; ?>?php echo $tool->params->getValue('thumb-max-height');?>px';
        $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').style.width = 'auto';
        $mjs('image').style.height = '<?php echo '<'; ?>?php echo $tool->params->getValue('thumb-max-height');?>px';
        $mjs('image').style.width = 'auto';
        colorlast.x1orig(arguments[0], arguments[1], arguments[2], arguments[3], arguments[4], arguments[5]);
        $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').href = $mjs('image').src;
        createMoreViews();
        MagicZoomPlus.start($mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>'));
    }
    colorlast.a10orig = colorlast.a10;
    colorlast.a10 = function(sel) {
        MagicZoomPlus.stop($mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>'));
        $mjs('image').style.height = '<?php echo '<'; ?>?php echo $tool->params->getValue('thumb-max-height');?>px';
        $mjs('image').style.width = 'auto';
        colorlast.a10orig(arguments[0]);
        $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').href = $mjs('image').src;
        createMoreViews();
        MagicZoomPlus.start($mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>'));
    }
    function createMoreViews() {
        var moreViews = document.getElementById('more-views');
        if(moreViews) {
            var newMoreViews = document.getElementsByClassName('more-views');
            if(!newMoreViews.length) {
                newMoreViews = document.createElement('div');
                newMoreViews.id = "MagicToolboxSelectorsContainer";
                newMoreViews.style.marginTop = "5px";
                newMoreViews.className = "more-views MagicToolboxSelectorsContainer";
                moreViews.parentNode.insertBefore(newMoreViews, moreViews);
            } else {
                newMoreViews = newMoreViews[0];
                if(newMoreViews.hasChildNodes()) {
                    while(newMoreViews.childNodes.length >= 1) {
                        newMoreViews.removeChild(newMoreViews.firstChild);
                    }
                }
            }
            var images = moreViews.getElementsByTagName('img');
            for(i = 0, l = images.length;i < l;i++) {
                var a = document.createElement('a');
                a.onclick = function() { return false; };
                a.onmouseover = function() {
                    MagicZoomPlus.stop($mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>'));
                    $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').href = this.firstChild.src;
                    $mjs('image').src = this.firstChild.src;
                    $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').style.height = '<?php echo '<'; ?>?php echo $tool->params->getValue('thumb-max-height');?>px';
                    $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').style.width = 'auto';
                    $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').style.maxWidth = '<?php echo '<'; ?>?php echo $tool->params->getValue('thumb-max-width');?>px';
                    $mjs('image').style.height = '<?php echo '<'; ?>?php echo $tool->params->getValue('thumb-max-height');?>px';
                    $mjs('image').style.width = 'auto';
                    $mjs('image').style.maxWidth = '<?php echo '<'; ?>?php echo $tool->params->getValue('thumb-max-width');?>px';
                    MagicZoomPlus.start($mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>'));
                };
                a.href = images[i].src;
                a.rev = images[i].src;
                a.style.width = '<?php echo '<'; ?>?php echo $tool->params->getValue('selector-max-width');?>px';
                a.style.height = '<?php echo '<'; ?>?php echo $tool->params->getValue('selector-max-height');?>px';
                var img = document.createElement('img');
                img.style.width = '<?php echo '<'; ?>?php echo $tool->params->getValue('selector-max-width');?>px';
                img.style.height = '<?php echo '<'; ?>?php echo $tool->params->getValue('selector-max-height');?>px';
                img.src = images[i].src;
                img.alt = images[i].alt;
                a.appendChild(img);
                newMoreViews.appendChild(a);
            }
        }
    }
    </script>
  1. Install the Magento module. In this example, we use Magic Zoom Plus™.
  2. To install a different tool, change "magiczoomplus" and "Magic Zoom Plus" in the instructions below to the name of the tool you are using.
  3. Find the file "media.phtml" in Color All and back it up. Then replace it with the media.phtml file from Magic Zoom Plus™.
  4. Open the media.phtml file and find this line:

    $main = $tool->template(compact("id", "title", "description", "shortDescription", "img", "thumb"));

    and add this line after it:

    $main = str_replace('<img ', '<img id="image" ', $main);

    In the same file get rid of the following line:

    echo '<img id="image" scr="" style="display: none !important;" />'; 
  5. Add the following lines to the end of the file:

        <div id="more-views"></div>
        <div id="colorall-additional-container">
        <div id="colorall-addimg-overlay"></div>
        <div id="colorall-additional"></div>
        </div>
        <div id="colorall-stock"></div>
        <script type="text/javascript">
        var colorAllOptionIndex;
        var colorAllA74Busy = false;
        var colorAllA76Done = false;
        var mainImage = new Array();
        var mainAnchor = document.getElementById('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>');
        mainImage['big'] = mainAnchor.href;
        mainImage['thumb'] = mainAnchor.firstChild.src;
        $mjs(window).je1('load', function() {
        if(typeof(colorall.a74) === 'function') {
        colorall.a74Origin = colorall.a74;
        colorall.a74 = function() {
        colorAllA74Busy = true;
        MagicZoomPlus.stop($mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>'));
        $mjs('image').style.width = '<?php echo '<'; ?>?php echo $tool->params->getValue('thumb-max-width');?>px';
        $mjs('image').style.height = 'auto';
        var r = colorall.a74Origin.apply(colorall, arguments);
        if(colorAllOptionIndex == 0) {
        $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').href = mainImage['big'];
        $mjs('image').src = mainImage['thumb'];
        } else {
        $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').href = $mjs('image').src;
        }
        MagicZoomPlus.start($mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>'));
        colorAllA74Busy = false;
        return r;
        };
        }
        if(typeof(colorall.a93) === 'function') {
        colorall.a93Origin = colorall.a93;
        colorall.a93 = function() {
        MagicZoomPlus.stop($mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>'));
        var r = colorall.a93Origin.apply(colorall, arguments);
        $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').href = $mjs('image').src;
        MagicZoomPlus.start($mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>'));
        return r;
        };
        }
        if(typeof(colorall.a68) === 'function') {
        colorall.a68Origin = colorall.a68;
        colorall.a68 = function() {
        colorAllOptionIndex = arguments[2];
        return colorall.a68Origin.apply(colorall, arguments);
        };
        }
        if(typeof(colorall.a73) === 'function') {
        colorall.a73Origin = colorall.a73;
        colorall.a73 = function() {
        if(!colorAllA74Busy && !colorAllA76Done) {
        MagicZoomPlus.stop($mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>'));
        $mjs('image').style.width = '<?php echo '<'; ?>?php echo $tool->params->getValue('thumb-max-width');?>px';
        $mjs('image').style.height = 'auto';
        }
        var r = colorall.a73Origin.apply(colorall, arguments);
        if(!colorAllA74Busy && !colorAllA76Done) {
        if(colorAllOptionIndex == 0) {
        $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').href = mainImage['big'];
        $mjs('image').src = mainImage['thumb'];
        } else {
        $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').href = $mjs('image').src;
        }
        MagicZoomPlus.start($mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>'));
        }
        return r;
        };
        }
        if(typeof(colorall.a76) === 'function') {
        colorall.a76Origin = colorall.a76;
        colorall.a76 = function() {
        colorAllA76Done = true;
        if(!colorAllA74Busy) {
        MagicZoomPlus.stop($mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>'));
        $mjs('image').style.width = '<?php echo '<'; ?>?php echo $tool->params->getValue('thumb-max-width');?>px';
        $mjs('image').style.height = 'auto';
        }
        var r = colorall.a76Origin.apply(colorall, arguments);
        if(!colorAllA74Busy) {
        if(colorAllOptionIndex == 0) {
        $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').href = mainImage['big'];
        $mjs('image').src = mainImage['thumb'];
        } else {
        $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').href = $mjs('image').src;
        }
        MagicZoomPlus.start($mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>'));
        }
        return r;
        };
        }
        if(typeof(colorall.n) === 'function') {
        colorall.nOrigin = colorall.n;
        colorall.n = function() {
        MagicZoomPlus.stop($mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>'));
        $mjs('image').style.width = '<?php echo '<'; ?>?php echo $tool->params->getValue('thumb-max-width');?>px';
        $mjs('image').style.height = 'auto';
        $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').style.width = '<?php echo '<'; ?>?php echo $tool->params->getValue('thumb-max-width');?>px';
        $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').style.height = 'auto';
        var r = colorall.nOrigin.apply(colorall, arguments);
        if($mjs('image').src == mainImage['thumb']) {
        $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').href = mainImage['big'];
        } else {
        $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').href = $mjs('image').src;
        }
        MagicZoomPlus.start($mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>'));
        return r;
        }
        }
        if(typeof(colorall.x) === 'function') {
        colorall.xOrigin = colorall.x;
        colorall.x = function() {
        MagicZoomPlus.stop($mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>'));
        $mjs('image').style.width = '<?php echo '<'; ?>?php echo $tool->params->getValue('thumb-max-width');?>px';
        $mjs('image').style.height = 'auto';
        $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').style.width = '<?php echo '<'; ?>?php echo $tool->params->getValue('thumb-max-width');?>px';
        $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').style.height = 'auto';
        var r = colorall.xOrigin.apply(colorall, arguments);
        if($mjs('image').src == mainImage['thumb']) {
        $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').href = mainImage['big'];
        } else {
        $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').href = $mjs('image').src;
        }
        MagicZoomPlus.start($mjs('MagicZoomPlusImage<?=$id?>'));
        return r;
        }
        }
        });
        </script>
  1. Install the Magento module. In this example, we use Magic Zoom Plus™.
  2. To install a different module e.g. Magic Magnify™, change all references of "MagicZoomPlus" in the instructions below to "MagicMagnify" (or whichever other of our modules you wish to use).
  3. Open the media.phtml file and find this line:

    $main = $tool->template(compact("id", "title", "description", "shortDescription", "img", "thumb"));

    and add this line after it:

    $main = str_replace('<img ', '<img id="image" ', $main);

    In the same file get rid of the following line:

    echo '<img id="image" scr="" style="display: none !important;" />'; 
  4. Add following code at the end of the same file:

    
    <script type="text/javascript">
    var mainImage = new Array();
    var mainAnchor = document.getElementById('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>');
    mainImage['big'] = mainAnchor.href;
    mainImage['thumb'] = mainAnchor.firstChild.src;
    $mjs(window).je1('load', function() {
    if(typeof(colorSwatchesPlus.x1) === 'function') {
    colorSwatchesPlus.x1Origin = colorSwatchesPlus.x1;
    colorSwatchesPlus.x1 = function() {
    MagicZoomPlus.stop($mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>'));
    $mjs('image').style.width = '<?php echo '<'; ?>?php echo $tool->params->getValue('thumb-max-width');?>px';
    $mjs('image').style.height = 'auto';
    var r = colorSwatchesPlus.x1Origin.apply(colorSwatchesPlus, arguments);
    $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').href = $mjs('image').src;
    MagicZoomPlus.start($mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>'));
    return r;
    };
    }
    if(typeof(colorSwatchesPlus.a10) === 'function') {
    colorSwatchesPlus.a10Origin = colorSwatchesPlus.a10;
    colorSwatchesPlus.a10 = function() {
    MagicZoomPlus.stop($mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>'));
    $mjs('image').style.width = '<?php echo '<'; ?>?php echo $tool->params->getValue('thumb-max-width');?>px';
    $mjs('image').style.height = 'auto';
    var r = colorSwatchesPlus.a10Origin.apply(colorSwatchesPlus, arguments);
    $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').href = $mjs('image').src;
    MagicZoomPlus.start($mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>'));
    return r;
    };
    }
    });
    </script>
  1. Install the Magento module. In this example, we use Magic Zoom Plus™.
  2. To install a different module e.g. Magic Zoom™, change all references of "MagicZoomPlus" in the instructions below to "MagicZoom" (or whichever other of our modules you wish to use).
  3. Open the media.phtml file and find this line:

    $main = $tool->template(compact("id", "title", "description", "shortDescription", "img", "thumb"));

    and add this line after it:

    $main = str_replace('<img ', '<img id="image" ', $main);

    In the same file get rid of the following line:

    echo '<img id="image" scr="" style="display: none !important;" />'; 
  4. Add following code at the end of the same file:

    <script type="text/javascript">
    colorViews.x1orig = colorViews.x1;
    colorViews.x1 = function(img) {
    MagicZoomPlus.stop($mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>'));
    $mjs('MagicZoomPlusImage<?php echo '<'; ?>?php echo '<'; ?>?=$id?>').style.width = '<?php echo '<'; ?>?php echo $tool->params->getValue('thumb-max-width');?>px';
    $mjs('MagicZoomPlusImage<?php echo '<'; ?>?php echo '<'; ?>?=$id?>').style.height = 'auto';
    $mjs('image').style.width = '<?php echo '<'; ?>?php echo $tool->params->getValue('thumb-max-width');?>px';
    $mjs('image').style.height = 'auto';                                                              
    colorViews.x1orig(arguments[0], arguments[1], arguments[2], arguments[3], arguments[4]);
    $mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>').href = $mjs('image').src;
    MagicZoomPlus.start($mjs('MagicZoomPlusImage<?php echo '<'; ?>?=$id?>'));
    }
    </script>

Magento Color Swatch

Our modules can work with the Magento Color Swatch like so:

  1. Open this file in an editor:

    app/design/frontend/base/default/layout/magiczoomplus.xml

    or this file, if it exists:

    app/design/frontend/{PACKAGE}/{THEME}/layout/magiczoomplus.xml

    and either comment-out or delete this code:

    <PRODUCT_TYPE_configurable>
        <reference name="product.info.options.configurable">
            <action method="setTemplate">
                <template>magiczoomplus/configurable.phtml</template>
            </action>
        </reference>
    </PRODUCT_TYPE_configurable>
  2. Open this file and make all the modifications in steps 3-6:

    app/code/community/SMDesign/ColorswatchProductView/controllers/GetController.php
  3. Insert this code:

     
    $magicToolboxHelper = Mage::helper('magiczoomplus/settings');
    $tool = $magicToolboxHelper->loadTool('product');
    $mainImageWidth = $tool->params->getValue('thumb-max-width');
    $mainImageHeight = $tool->params->getValue('thumb-max-height');

    between these lines:

    $images = array();

    and

    if (count($products) > 0) {
  4. Replace this code:

    <?php echo '<'; ?>?php if (Mage::getStoreConfig('smdesign_smdzoom/zoom/enabled') && $_product->getData('enable_zoom_plugin') == 1) :?>
    $('image-zoom').href = '<?php echo '<'; ?>?php echo $images[0]['big_image']?>?rand=' + Math.random();    
    <?php echo '<'; ?>?php endif; ?>
    
    $$('<?php echo '<'; ?>?php echo $imageSelector ?>').first().src = '<?php echo '<'; ?>?php echo $images[0]['image']?>?rand=' + Math.random();
    with this code:
    MagicZoomPlus.stop($mjs('MagicZoomPlusImage<?php echo '<'; ?>?php echo $productId; ?>'));
    $mjs('MagicZoomPlusImage<?php echo '<'; ?>?php echo $productId; ?>').style.width = '<?php echo '<'; ?>?php echo $tool->params->getValue('thumb-max-width');?>px';
    $mjs('MagicZoomPlusImage<?php echo '<'; ?>?php echo $productId; ?>').style.height = '<?php echo '<'; ?>?php echo $tool->params->getValue('thumb-max-height');?>px';
    $$('#MagicZoomPlusImage<?php echo '<'; ?>?php echo $productId; ?> img').first().style.width = '<?php echo '<'; ?>?php echo $tool->params->getValue('thumb-max-width');?>px';
    $$('#MagicZoomPlusImage<?php echo '<'; ?>?php echo $productId; ?> img').first().style.height = '<?php echo '<'; ?>?php echo $tool->params->getValue('thumb-max-height');?>px';
    $$('#MagicZoomPlusImage<?php echo '<'; ?>?php echo $productId; ?>').first().href = '<?php echo '<'; ?>?php echo $images[0]['big_image']?>?rand=' + Math.random();
    $$('#MagicZoomPlusImage<?php echo '<'; ?>?php echo $productId; ?> img').first().src = '<?php echo '<'; ?>?php echo $images[0]['image']?>?rand=' + Math.random();
  5. Replace this code:

    <?php echo '<'; ?>?php if (Mage::getStoreConfig('smdesign_smdzoom/zoom/enabled') && Mage::getStoreConfig('smdesign_smdzoom/zoom/more_view_change_main_image') && $_product->getData('enable_zoom_plugin') == 1 && ( 1 || $_product->getImage() != 'no_selection' && $_product->getImage() ) ) : ?>
    $(li).update("<a href=\"<?php echo '<'; ?>?php echo  $image['big_image']; ?>\"  rel=\"<?php echo '<'; ?>?php echo  $image['image']; ?>\" onclick=\"SMDUpdateMainImage(this);return false;\"><img src=\"<?php echo '<'; ?>?php echo  $image['thumb'] ?>\" width=\"<?php echo '<'; ?>?php echo $thumbImageWidth; ?>\" height=\"<?php echo '<'; ?>?php echo $thumbImageHeight; ?>\" alt=\"<?php echo '<'; ?>?php echo  $image['label'] ?>\" /></a>");
    <?php echo '<'; ?>?php else : ?>
    $(li).update("<a href=\"#\" onclick=\"popWin('<?php echo '<'; ?>?php echo Mage::getUrl('catalog/product/gallery', array('id'=>$image['product_id'], 'image'=>$image['id'], 'pid'=>$productId)) ?>', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;\" title=\"<?php echo '<'; ?>?php echo  $image['label'] ?>\"><img src=\"<?php echo '<'; ?>?php echo  $image['thumb'] ?>\" width=\"56\" height=\"56\" alt=\"<?php echo '<'; ?>?php echo  $image['label'] ?>\" /></a>");
    <?php echo '<'; ?>?php endif; ?>

    with this code:

    $(li).update("<a href=\"<?php echo '<'; ?>?php echo $image['big_image']; ?>\" rev=\"<?php echo '<'; ?>?php echo $image['image']; ?>\" rel=\"zoom-id: MagicZoomPlusImage<?php echo '<'; ?>?php echo $productId; ?>;caption-source: a:title;\" title=\"<?php echo '<'; ?>?php echo $image['label']; ?>\"><img src=\"<?php echo '<'; ?>?php echo $image['thumb']; ?>\" width=\"56\" height=\"56\" alt=\"<?php echo '<'; ?>?php echo $image['label']; ?>\" /></a>");

    Note: you'll find that code between these lines:

    li = document.createElement('LI');
    ...
    galleryView.appendChild(li);
  6. Replace this code:

    <?php echo '<'; ?>?php if (!(Mage::getStoreConfig('smdesign_smdzoom/zoom/enabled') && Mage::getStoreConfig('smdesign_smdzoom/zoom/more_view_change_main_image') && $_product->getData('enable_zoom_plugin') == 1 && ( $_product->getImage() != 'no_selection' && $_product->getImage() ) ) ): ?>
    SMDesignColorswatchPreloader.removePerload($('image'));
    <?php echo '<'; ?>?php endif; ?>

    with this code:

    MagicZoomPlus.start($mjs('MagicZoomPlusImage<?php echo '<'; ?>?php echo $productId; ?>'));
  7. You've finished!