New Magento Extension "Moo_CloudZoom"

Overview

I have released a new extension for the Magento E-commerce system. The extension is a replacement for my first extension “Magento JQZoom”.

The new extension has more features including:

  • Smooth zoom movement.
  • Define the dimensions of the zoom window.
  • Define the position of the zoom window.
  • Z/Y pixel spaces for the zoom window.
  • Show or Hide the title on top of the zoom window. Also, define the opacity.
  • Define lens opacity.
  • Dimensions of the main image.
  • Soft focus and inner zoom features.
  • Overlay color and opacity on hover.

The the javascript is based on Cloud Zoom plugin for JQuery.

You can view the extension in Magento connect. Or you can download the file and install it manually from here.

Manual Install

  1. Download the zip file.
  2. Extract the content of the file.
  3. Copy and Paste the folder Moo/ into /app/code/community/
  4. Copy and Paste the folder modules/ into /app/etc/
  5. Copy and Paste the folder skin/ into /[the root directory of your Magento installation]
  6. Copy and Paste the folder design/ into /app/
  7. Login into you admin interface. Go to System > Configuration > Catalog > Moo Product Gallery “CloudZoom” to configure the plugin

FAQ

When I view the configuration page, I get 404 page not found, or 403 access denied?
This is common problem when installing any Magento extension. To fix this you need to refresh the role permission. Go to System > Permissions > Roles > Administrators and click Save Role.
Does it work with Magento stable 1.5.0.1?
Yes
I cannot install the extension. I am getting the following error:

Failed to download magento-community/Moo_CloudZoom within preferred state "stable", latest release is version 1.1.1, stability "beta", use "channel://connect.magentocommerce.com/community/Moo_CloudZoom-1.1.1" to install  
Cannot initialize 'channel://connect.magentocommerce.com/community/Moo_CloudZoom', invalid or missing package file  
Install Errors  
Package "channel://connect.magentocommerce.com/community/Moo_CloudZoom" is not valid  
PEAR ERROR: install failed  
This is because your Magento Connect is set to install extensions with stable version only. This extension is beta. To fix this in Magento Connect click on the settings tab and change the preferred state to beta.

Enjoy! :)

Posted in Magento, PHP and tagged , , .
Loading Facebook Comments ...

Leave a Reply

Your email address will not be published. Required fields are marked *

66 Comments

  1. Hello Dear Mohammed,

    Thank you fopr share your tool. It is really amazing. I just have a quick question: is there a way to configure the application for “less zoom”? I just want a zoom of 4x for example. Is that possible?

    • The extension does not actually zoom into the image. It gives the illusion of zooming.
      The main visible image (the product) is in a small size and there is another hidden image bigger. When you hover over a point (x, y) in the main image, the extension show the same point in the bigger image inside the popup window. This gives the effect of zooming,

      For example, upload a product image with a size of 400px. then re-size the main image to 100px. In production page the visible image will show with 100px size if you hover you will see the bigger image zoomed 4x. Of course you can play with image sizes until you get the preferred size.

      hope this helps

  2. Hi Mohammed,
    i’ve just installed this extension on my magento store, and it’s work like a charm. And i tell you what ,your extension it’s so awesome..
    But, i have one question. Can i make the ‘zoom’ always visible (always appear) ? which part of code i have to change?

    thank you very much

  3. hi Mohammed,
    I really like your extension. It was working before fine but now I have a problem with jquery. I get this error “sImg.outerWidth is not a function” and the zoom doesn’t work at all.

    Would you be able to help me with that? I am struggling with it and I really would like to use your extension. The example product page is as follow – http://designshout.co.uk/buy-online/spring-summer/saks01.html.

    Thank you very much for your help.

    Kind regards
    Hubert

  4. Thanks for quick answer.
    Ok, i understand the problem, and i will try to found the problematic extension and delete it. Any idea for where i can start?

      • i found the extension that it gave the problem. The name was “OrganicInternet_SimpleConfigurableProducts”.
        Now moo_cloudzomm works perfect! 😛

  5. I ask the same question in magento connect.
    I’m using magento 1.5.0.1

    My web crashes when i try open the page of the product with cloud zoom enabled.
    This is the missage:
    Invalid method OrganicInternet_SimpleConfigurableProducts_Catalog_Block_Product_View_Media::renderCloudOptions
    Any idea?

    • Hi

      You have an extension that extends Mage_Catalog_Block_Product_View_Media class. My extension extends the same class. So the OrganicInternet_SimpleConfigurableProducts_Catalog_Block_Product_View_Media override any code changes in CloudZoom.

      In Magento you cannot install more than one extension that extend the same part of Magento.

      A workaround would be to copy all code changes from CloudZoom (Moo_Catalog_Block_Product_View_Media) into OrganicInternet_SimpleConfigurableProducts_Catalog_Block_Product_View_Media. But you have to do this every time you upgrade the extension ‘OrganicInternet’

  6. Paste extension key to install: error below: why ?

    community/Moo_CloudZoom: Extension is ‘beta’ please check(or change) stability settings on Magento Connect Manager

  7. I have just finished installing this extension on my magento store. It works great, so thanks for taking the time to develop it.

    My only problem is that I need to include additional values in the rel attribute — this causes the extension to break, sadly.

    Is there anything I could do to get around this?

    Thank you.

    • The Cloud Zoom plugin rely on the ‘rel’ attributes for configuration data. The data is comma separated and each option is ‘name: value’. What are the additional values you want to add? What they are for?

      • Thanks for the prompt response.

        The rel attribute is used by a separate plugin (Facebox) to indicate images / content which should be opened in a special window.

        The value “facebox” simply needs to be included in the rel attribute. It does not matter if there are other values as well, as it uses *=

        • Here is options that you can try:
          1. Asume the additional value you want to add is ‘facebox’, then add this value to the rel attribute as follows: ‘ , facebox:true ‘
          2. Change the plugin ‘facebox’ to not rely on the rel attribute.
          3. Open cloud-zoom.1.0.2.min.js and locate ‘ a = {‘+$(this).attr(‘rel’)+’} ‘ replace rel with any other attribute name. The open the plugin template file and use another attribute for the plugin configurations.

          These options are not tested.

  8. Thanks for the extension. But i installed it as instructed but when i get to the configuration page, it does not appear as stated in your steps. whats wrong

  9. Hi,
    i have installed this extension.

    This works fine in firefox. But in the case of ie6 the background content disappear once i zoom out.

    please help me.

  10. Hey, tried the extension with 1.5.1.0 and 1.5.0.1. Installation succeeds, but access to the system configuration gives an error message: Fatal error: Class ‘Moo_Catalog_Helper_Data’ not found in /srv/www/htdocs/shop/app/Mage.php on line 520.
    Any ideas?

    • How did you install the extension? Manually or from Magento connect.

      The error states you have missing class ‘Data.php’ in /app/code/community/Moo/Catalog/Helper/

      The content of the file is something like:

      <?php
      class Moo_Catalog_Helper_Data extends Mage_Core_Helper_Abstract
      {

      }

      If the file exist and you still getting the same error message, try to refresh all of the Magento cache from the Cache Management.