MagentoMagento modules

Beautiful modules to make your Magento site look gorgeous!


Magento versions

All versions of Magento are supported:

  • Magento version 1.4 - 1.8
  • Futureproof: we update the modules whenever new Magento versions are released.

Use it throughout your site

Magic Zoom™
Magic Zoom Plus™
Magic Magnify™
Magic Magnify Plus™
Magic Thumb™
Magic Touch™
Magic 360™ Magic Scroll™ Magic Slideshow™
Home page Yes Yes
Product page Yes Yes Yes Yes
Category page Yes      
New products Yes      
Recently viewed products Yes   Yes Yes
Manual install elsewhere Yes Yes Yes Yes

Supported features

  • Multiple images (uploaded with the default Magento image manager)
  • Friendly URLs
  • 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

Admin screenshots

Click for full size:

Default view after installation


Custom settings for a new theme
Settings page

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.

Module settings

You can configure module through the 'Magictoolbox -> [tool name] settings' menu in the Magento admin panel.

The script files are located here:

skins/[your_interface]/[your_theme]/js

FAQ

Q How do I change the image when custom options are selected?

A Put the color name in the 'Label' attribute of each image. Open module settings page and set the option for 'Options names associated with images separated by commas' to your option name.

Q How do I prevent images from stretching?

A Open module settings page and turn on the option named 'Ignore magento CSS width/height styles for additional images'.

Q Do these tools support configurable products?

A We support configurable products with the options 'Show associated product's images' and 'Load associated product's images'. We also support configurable product attributes and product options with the option 'Options names associated with images'.

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 Magnify: MagicMagnify.stop();MagicMagnify.start();
    • Magic Magnify Plus: MagicMagnifyPlus.stop();MagicMagnifyPlus.start();
    • 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™, Magic Magnify™, Magic Magnify Plus™, Magic Touch™.

Color Thumbnails

  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="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>

Color Last

  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<?=$id?>'));
    $mjs('MagicZoomPlusImage<?=$id?>').style.height = '<?php echo $tool->params->getValue('thumb-max-height');?>px';
    $mjs('MagicZoomPlusImage<?=$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<?=$id?>').href = $mjs('image').src;
    createMoreViews();
    MagicZoomPlus.start($mjs('MagicZoomPlusImage<?=$id?>'));
    }

    colorlast.a10orig = colorlast.a10;
    colorlast.a10 = function(sel) {
    MagicZoomPlus.stop($mjs('MagicZoomPlusImage<?=$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<?=$id?>').href = $mjs('image').src;
    createMoreViews();
    MagicZoomPlus.start($mjs('MagicZoomPlusImage<?=$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<?=$id?>'));
    $mjs('MagicZoomPlusImage<?=$id?>').href = this.firstChild.src;
    $mjs('image').src = this.firstChild.src;
    $mjs('MagicZoomPlusImage<?=$id?>').style.height = '<?php echo $tool->params->getValue('thumb-max-height');?>px';
    $mjs('MagicZoomPlusImage<?=$id?>').style.width = 'auto';
    $mjs('MagicZoomPlusImage<?=$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<?=$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>

Color All

  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<?=$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<?=$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<?=$id?>').href = mainImage['big'];
    $mjs('image').src = mainImage['thumb'];
    } else {
    $mjs('MagicZoomPlusImage<?=$id?>').href = $mjs('image').src;
    }
    MagicZoomPlus.start($mjs('MagicZoomPlusImage<?=$id?>'));
    colorAllA74Busy = false;
    return r;
    };
    }
    if(typeof(colorall.a93) === 'function') {
    colorall.a93Origin = colorall.a93;
    colorall.a93 = function() {
    MagicZoomPlus.stop($mjs('MagicZoomPlusImage<?=$id?>'));
    var r = colorall.a93Origin.apply(colorall, arguments);
    $mjs('MagicZoomPlusImage<?=$id?>').href = $mjs('image').src;
    MagicZoomPlus.start($mjs('MagicZoomPlusImage<?=$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<?=$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<?=$id?>').href = mainImage['big'];
    $mjs('image').src = mainImage['thumb'];
    } else {
    $mjs('MagicZoomPlusImage<?=$id?>').href = $mjs('image').src;
    }
    MagicZoomPlus.start($mjs('MagicZoomPlusImage<?=$id?>'));
    }
    return r;
    };
    }
    if(typeof(colorall.a76) === 'function') {
    colorall.a76Origin = colorall.a76;
    colorall.a76 = function() {
    colorAllA76Done = true;
    if(!colorAllA74Busy) {
    MagicZoomPlus.stop($mjs('MagicZoomPlusImage<?=$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<?=$id?>').href = mainImage['big'];
    $mjs('image').src = mainImage['thumb'];
    } else {
    $mjs('MagicZoomPlusImage<?=$id?>').href = $mjs('image').src;
    }
    MagicZoomPlus.start($mjs('MagicZoomPlusImage<?=$id?>'));
    }
    return r;
    };
    }
    if(typeof(colorall.n) === 'function') {
    colorall.nOrigin = colorall.n;
    colorall.n = function() {
    MagicZoomPlus.stop($mjs('MagicZoomPlusImage<?=$id?>'));
    $mjs('image').style.width = '<?php echo $tool->params->getValue('thumb-max-width');?>px';
    $mjs('image').style.height = 'auto';
    $mjs('MagicZoomPlusImage<?=$id?>').style.width = '<?php echo $tool->params->getValue('thumb-max-width');?>px';
    $mjs('MagicZoomPlusImage<?=$id?>').style.height = 'auto';
    var r = colorall.nOrigin.apply(colorall, arguments);
    if($mjs('image').src == mainImage['thumb']) {
    $mjs('MagicZoomPlusImage<?=$id?>').href = mainImage['big'];
    } else {
    $mjs('MagicZoomPlusImage<?=$id?>').href = $mjs('image').src;
    }
    MagicZoomPlus.start($mjs('MagicZoomPlusImage<?=$id?>'));
    return r;
    }
    }
    if(typeof(colorall.x) === 'function') {
    colorall.xOrigin = colorall.x;
    colorall.x = function() {
    MagicZoomPlus.stop($mjs('MagicZoomPlusImage<?=$id?>'));
    $mjs('image').style.width = '<?php echo $tool->params->getValue('thumb-max-width');?>px';
    $mjs('image').style.height = 'auto';
    $mjs('MagicZoomPlusImage<?=$id?>').style.width = '<?php echo $tool->params->getValue('thumb-max-width');?>px';
    $mjs('MagicZoomPlusImage<?=$id?>').style.height = 'auto';
    var r = colorall.xOrigin.apply(colorall, arguments);
    if($mjs('image').src == mainImage['thumb']) {
    $mjs('MagicZoomPlusImage<?=$id?>').href = mainImage['big'];
    } else {
    $mjs('MagicZoomPlusImage<?=$id?>').href = $mjs('image').src;
    }
    MagicZoomPlus.start($mjs('MagicZoomPlusImage<?=$id?>'));
    return r;
    }
    }
    });
    </script>

Color Swatches Plus

  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<?=$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<?=$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<?=$id?>').href = $mjs('image').src;
    MagicZoomPlus.start($mjs('MagicZoomPlusImage<?=$id?>'));
    return r;
    };
    }
    if(typeof(colorSwatchesPlus.a10) === 'function') {
    colorSwatchesPlus.a10Origin = colorSwatchesPlus.a10;
    colorSwatchesPlus.a10 = function() {
    MagicZoomPlus.stop($mjs('MagicZoomPlusImage<?=$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<?=$id?>').href = $mjs('image').src;
    MagicZoomPlus.start($mjs('MagicZoomPlusImage<?=$id?>'));
    return r;
    };
    }
    });
    </script>

Color Views Plus

  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">
    colorViews.x1orig = colorViews.x1;
    colorViews.x1 = function(img) {
    MagicZoomPlus.stop($mjs('MagicZoomPlusImage<?=$id?>'));
    $mjs('MagicZoomPlusImage<?=$id?>').style.width = '<?php echo $tool->params->getValue('thumb-max-width');?>px';
    $mjs('MagicZoomPlusImage<?=$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<?=$id?>').href = $mjs('image').src;
    MagicZoomPlus.start($mjs('MagicZoomPlusImage<?=$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!

Version history

  • 4.9 (2013-12-12)
    1. Added support for Magic Slideshow v2.
  • 4.8 (2013-08-30)
    1. Improvement in the settings page: to set own settings for each store view.
    2. Added feature for configurable products: to change option when switching thumbnails of associated products.
  • 4.7 (2012-12-20)
    1. Module no longer overrides Mage_Catalog_Block_Product_View_Options_Type_Select class.
    2. 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.
    3. Separate tab on the settings page of the product for loading Magic 360 (Flash) images.
  • 4.6 (2012-09-07)
    1. Added ability to display custom block with images for MagicSlideshow and MagicScroll modules.
  • 4.5 (2012-08-22)
    1. Added support for 'Use Categories Path for Product URLs' option.
    2. Added ability to show associated product's images when option is selected or within a gallary.
    3. Added option: Include headers on all pages (default: No).
    4. Improvements in installation process.
    5. Improvement in the settings page.
    6. Added Recently Viewed block support.
  • 4.4 (2011-06-14)
    1. Added templates (replaced selectors-position parameter)
    2. Added Magic Scroll for selectors
  • 4.3 (2011-06-14)
    1. Add compatibility with Magento compiler.
    2. Fix issue with 'isModuleEnabled' function in Magento 1.4.0.1
    3. Fix issue with 'thumbnails' option in MagicSlideshow module.
    4. Fix some warnings in installer.
  • 4.2 (2011-06-06)
    1. Added capability combined usage of magic360(Plus) with other magic modules.
  • 4.1 (2011-06-01)
    1. Added installer.
  • 4.0 (2011-04-28)
    1. Now supports Magento native modules system.
    2. Moved module configuration to Magento admin panel.
    3. Code rewrite.
  • 3.36 (2011-02-02)
    1. Fixed fatal error in module on reviews page.
  • 3.35 (2011-01-17)
    1. Added Magic Scroll support
  • 3.34 (2010-12-22)
    1. New option: 'selector-position' (default: bottom).
  • 3.33 (2010-12-15)
    1. Added support for Magic360 and Magic360plus
  • 3.32 (2010-07-28)
    1. Added support custom option of type "Radio Buttons".
  • 3.31 (2010-07-28)
    1. Fixed menu conflict in Magento v 1.4.1.x and above.
  • 3.30 (2010-07-23)
    1. Fixed PHP Warning when product image does not exist.
  • 3.29 (2010-07-09)
    1. Fixed fatal error on same ajax pages.
  • 3.28 (2010-06-25)
    1. Custom option values and image labels are now case-insensitive.
  • 3.27 (2010-06-08)
    1. Changes in caption-source parameter to allow multiple sources.
  • 3.26 (2010-05-31)
    1. Fixed some locale problems.
  • 3.25 (2010-05-26)
    1. Added support for configurable product attributes.
    2. Fixed JavaScript error in magictoolbox_utils.js.
  • 3.24 (2010-04-14)
    1. Fixed JavaScript error when product has no selectors.
  • 3.23 (2010-03-30)
    1. Watermark image available on thumbnails.
  • 3.22 (2010-03-24)
    1. Added support for multiple options.
  • 3.21 (2010-03-18)
    1. New option switch in Magnify.
  • 3.20 (2010-03-02)
    1. Headers no longer load on search results page.
  • 3.19 (2010-02-24)
    1. Installer is now compatible with Magento v 1.4.x
  • 3.18 (2010-02-03)
    1. Headers only load when needed, not on every page.
    2. More options available for Magic Thumb modules.
    3. Some code optimizations.
  • 3.17 (2010-02-01)
    1. Fixed wrong thumb size on category pages when selector is clicked.
    2. Added 'category-selector-size' parameter.
    3. Fixed module not working on category page in rare cases.
  • 3.16 (2010-01-13)
    1. Magic Zoom module now works on category pages when use_effect_on_category_page is used.
  • 3.15 (2009-12-21)
    1. Installer optimizations.
  • 3.14 (2009-12-10)
    1. Installer will now check path to themes.
    2. Separate config file was working only with default theme.
    3. Effect now works on all categories.
    4. Extra white space in option price removed from option_associated_with_images option.
  • 3.13 (2009-12-03)
    1. Captions problem resolved on category page.
  • 3.12 (2009-11-11)
    1. Options now work if captions are off.
  • 3.11 (2009-10-28)
    1. Added 'Upgrade from ZIP' option to installer.
  • 3.10 (2009-10-23)
    1. Module optimizations to prevent fatal memory limit error in PHP.
  • 3.9 (2009-10-19)
    1. Options changed when 'thumb_change' parameter is set to 'mouseover'.
  • 3.8 (2009-09-23)
    1. Added support to new.phtml file (the new products page).
  • 3.7 (2009-09-10)
    1. Fixed the ignore_magento_css option error.
  • 3.6 (2009-09-01)
    1. MagicZoom and MagicThumb class values for now work for use_effect_on_category_page.correctly
    2. Added category_thumb_size option.
  • 3.5 (2009-08-31)
    1. Fixed Onclick on category pages, while MagicThumb is active.
  • 3.4 (2009-08-28)
    1. PHP file permisions error fixed in module installer.
  • 3.3 (2009-08-17)
    1. Caption_source option error fixed on category page.
  • 3.2 (2009-08-14)
    1. Magento shop available if image file is not avaliable.
  • 3.1 (2009-07-27)
    1. Module now works with more Magento themes.
    2. Some code optimisation.
  • 3.0 (2009-07-06)
    1. Added installer.
    2. Solved the W3C validation error. All headers now placed in <head> section.
  • 2.17 (2009-07-01)
    1. Supports all templates for category page.
    2. Added support for different locales.
  • 2.16 (2009-06-15)
    1. Added new parameter: Size of thumbnail depends on.
  • 2.15 (2009-06-12)
    1. Product name shows as title when additional image has no individual title.
  • 2.14 (2009-06-11)
    1. Remove PHP code from category page (list.phtml file - short PHP tags not allowed by Magento).
  • 2.13 (2009-05-08)
    1. New option 'use_individual_titles' (default: Yes).
  • 2.12 (2009-04-21)
    1. Added new file 'list_modern.phtml' for modern skin.
  • 2.11 (2009-04-15)
    1. New option: 'show_selectors_on_category_page' (default: No).
  • 2.10 (2009-04-03)
    1. JS errors fixed in IE.
    2. Improvements in 'Name of option associated with images' option.
  • 2.9 (2009-04-03)
    1. New option: Always create square thumbnails (default: No).
  • 2.8 (2009-03-31)
    1. New option: Name of option associated with images (e.g 'Color')
  • 2.7 (2009-03-17)
    1. Added CHANGELOG.

Please contact us with any questions you have about our Magento extensions, whether regarding the scripts, installation or customization.

Payment

Pay by credit card or bank transfer, then download your product.

Payments: Visa, MasterCard, Maestro, Amex, Discover, Paypal, Google Checkout, Avangate

100% Support

30 minutes free technical support.

Guarantee

30 day money-back guarantee.