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™, 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 $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 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 $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.

Show all versions (+53)