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.

Supported pages and blocks

Magic Zoom

Product details page, category page, new products block, recently viewed products, manual install elsewhere.

Magic Zoom Plus

Product details page, category page, new products block, recently viewed products, manual install elsewhere.

Magic Thumb

Product details page, category page, new products block, recently viewed products, manual install elsewhere.

Magic 360

Product details page, manual install elsewhere.

Magic Scroll

Product details page, home page, recently viewed products, manual install elsewhere.

Magic Slideshow

Product details page, home page, 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 or Magic Thumb.

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

    <?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  $image['big_image']; ?>\"  rel=\"<?php echo  $image['image']; ?>\" onclick=\"SMDUpdateMainImage(this);return false;\"><img src=\"<?php echo  $image['thumb'] ?>\" width=\"<?php echo $thumbImageWidth; ?>\" height=\"<?php echo $thumbImageHeight; ?>\" alt=\"<?php echo  $image['label'] ?>\" /></a>");
    <?php else : ?>
    $(li).update("<a href=\"#\" onclick=\"popWin('<?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  $image['label'] ?>\"><img src=\"<?php echo  $image['thumb'] ?>\" width=\"56\" height=\"56\" alt=\"<?php echo  $image['label'] ?>\" /></a>");
    <?php endif; ?>

    with this code:

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

    with this code:

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

  • v4.9
    December 12, 2013

    Added support for Magic Slideshow v2.

  • v4.8
    August 30, 2013

    Improvement in the settings page: to set own settings for each store view. * Added feature for configurable products: to change option when switching thumbnails of associated products.

  • v4.7
    December 20, 2012

    Module no longer overrides Mage_Catalog_Block_Product_View_Options_Type_Select class. Added thumbnail to switch between Magic 360 and other (Magic Zoom Plus, Magic Zoom, Magic Thumb, Magic Magnify, Magic Magnify Plus, Magic Touch) module view if they are both installed. Separate tab on the settings page of the product for loading Magic 360 (Flash) images.

  • v4.6
    September 7, 2012

    Added ability to display custom block with images for MagicSlideshow and MagicScroll modules.

  • v4.5
    August 22, 2012

    Added support for 'Use Categories Path for Product URLs' option. Added ability to show associated product's images when option is selected or within a gallary. Added option: Include headers on all pages (default: No). Improvements in installation process. Improvement in the settings page. * Added Recently Viewed block support.

  • v4.4
    June 14, 2011

    Added templates (replaced selectors-position parameter) * Added Magic Scroll for selectors

  • v4.3
    June 14, 2011

    Add compatibility with Magento compiler. Fix issue with 'isModuleEnabled' function in Magento 1.4.0.1 Fix issue with 'thumbnails' option in MagicSlideshow module. * Fix some warnings in installer.

  • v4.2
    June 6, 2011

    Added capability combined usage of magic360(Plus) with other magic modules.

  • v4.1
    June 1, 2011

    Added installer.

  • v4.0
    April 28, 2011

    Now supports Magento native modules system. Moved module configuration to Magento admin panel. Code rewrite.

  • v3.36
    February 2, 2011

    Fixed fatal error in module on reviews page.

  • v3.35
    January 17, 2011

    Added Magic Scroll support

  • v3.34
    December 22, 2010

    New option: 'selector-position' (default: bottom).

  • v3.33
    December 15, 2010

    Added support for Magic360 and Magic360plus

  • v3.32
    July 28, 2010

    Added support custom option of type "Radio Buttons".

  • v3.31
    July 28, 2010

    Fixed menu conflict in Magento v 1.4.1.x and above.

  • v3.30
    July 23, 2010

    Fixed PHP Warning when product image does not exist.

  • v3.29
    July 9, 2010

    Fixed fatal error on same ajax pages.

  • v3.28
    June 25, 2010

    Custom option values and image labels are now case-insensitive.

  • v3.27
    June 8, 2010

    Changes in caption-source parameter to allow multiple sources.

  • v3.26
    May 31, 2010

    Fixed some locale problems.

  • v3.25
    May 26, 2010

    Added support for configurable product attributes. * Fixed JavaScript error in magictoolbox_utils.js.

  • v3.24
    April 14, 2010

    Fixed JavaScript error when product has no selectors.

  • v3.23
    March 30, 2010

    Watermark image available on thumbnails.

  • v3.22
    March 24, 2010

    Added support for multiple options.

  • v3.21
    March 18, 2010

    New option switch in Magnify.

  • v3.20
    March 2, 2010

    Headers no longer load on search results page.

  • v3.19
    February 24, 2010

    Installer is now compatible with Magento v 1.4.x

  • v3.18
    February 3, 2010

    Headers only load when needed, not on every page. More options available for Magic Thumb modules. Some code optimizations.

  • v3.17
    February 1, 2010

    Fixed wrong thumb size on category pages when selector is clicked. Added 'category-selector-size' parameter. Fixed module not working on category page in rare cases.

  • v3.16
    January 13, 2010

    Magic Zoom module now works on category pages when use_effect_on_category_page is used.

  • v3.15
    December 21, 2009

    Installer optimizations.

  • v3.14
    December 10, 2009

    Installer will now check path to themes. Separate config file was working only with default theme. Effect now works on all categories. * Extra white space in option price removed from option_associated_with_images option.

  • v3.13
    December 3, 2009

    Captions problem resolved on category page.

  • v3.12
    November 11, 2009

    Options now work if captions are off.

  • v3.11
    October 28, 2009

    Added 'Upgrade from ZIP' option to installer.

  • v3.10
    October 23, 2009

    Module optimizations to prevent fatal memory limit error in PHP.

  • v3.9
    October 19, 2009

    Options changed when 'thumb_change' parameter is set to 'mouseover'.

  • v3.8
    September 23, 2009

    Added support to new.phtml file (the new products page).

  • v3.7
    September 10, 2009

    Fixed the ignore_magento_css option error.

  • v3.6
    September 1, 2009

    MagicZoom and MagicThumb class values for now work for use_effect_on_category_page.correctly * Added category_thumb_size option.

  • v3.5
    August 31, 2009

    Fixed Onclick on category pages, while MagicThumb is active.

  • v3.4
    August 28, 2009

    PHP file permisions error fixed in module installer.

  • v3.3
    August 17, 2009

    Caption_source option error fixed on category page.

  • v3.2
    August 14, 2009

    Magento shop available if image file is not avaliable.

  • v3.1
    July 27, 2009

    Module now works with more Magento themes. * Some code optimisation.

  • v3.0
    July 6, 2009

    Added installer. * Solved the W3C validation error. All headers now placed in section.

  • v2.17
    July 1, 2009

    Supports all templates for category page. * Added support for different locales.

  • v2.16
    June 15, 2009

    Added new parameter: Size of thumbnail depends on.

  • v2.15
    June 12, 2009

    Product name shows as title when additional image has no individual title.

  • v2.14
    June 11, 2009

    Remove PHP code from category page (list.phtml file - short PHP tags not allowed by Magento).

  • v2.13
    May 8, 2009

    New option 'use_individual_titles' (default: Yes).

  • v2.12
    April 21, 2009

    Added new file 'list_modern.phtml' for modern skin.

  • v2.11
    April 15, 2009

    New option: 'show_selectors_on_category_page' (default: No).

  • v2.10
    April 3, 2009

    JS errors fixed in IE. * Improvements in 'Name of option associated with images' option.

  • v2.9
    April 3, 2009

    New option: Always create square thumbnails (default: No).

  • v2.8
    March 31, 2009

    New option: Name of option associated with images (e.g 'Color')

  • v2.7
    March 17, 2009

    Added CHANGELOG.