New Magento Extension "Moo_CloudZoom"

Latest Version 1.1.4

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! :)

Thank you for your support

Leave A Reply

Comments

Sören (Feb 23, 2011)

Hi, nice extension but it doesn’t work in opera. Why?

mohammed (Feb 25, 2011)

The extension developed and tested on FireFox, Chrome, IE7/8, and Safari. Opera is not a common browser and I am not fan of it :)

Falci (Mar 02, 2011)

Thank you! Very good!

rajandanish (Mar 29, 2011)

I have installed it, but not working, the lens for zooming not coming and the zooming not working…..

Any help would be appreciated..

Thanks in advance
Danish.

rajandanish (Mar 29, 2011)

it will work with default theme only?

or any other theme and also will it work with magento 1.4.1.1.

please tell me the steps for manual installation.

Thanks
Danish.

mohammed (Apr 04, 2011)

What is the link to your website?

mohammed (Apr 04, 2011)

Yes it work with Magento version 1.4.1.1.

It work with a custom theme too. It is possible that your custom theme override the extension template file (media.phtml)

Lisandro (Apr 06, 2011)

I’ve installed the estesion here http://www.tiendacan.es, and is activated but the effect doesnt appear.
I used this version: magento-community/Moo_CloudZoom-1.1.3

mohammed (Apr 06, 2011)

You have 2 javascript errors in product page. The errors is at line 48, and 57 in http://www.tiendacan.es/skin/frontend/canes/f001_green/js/productInfo.js

Error message, “$(el).getElementsBySelector(“.ajax”)[0] is undefined”

Sylvia (Apr 14, 2011)

I love this extension, but there seems to be a problem with the new Internet Exporer 9 version. The zooming doesn’t work in IE9.

mohammed (Apr 15, 2011)

That is internet explorer it has so many issues.

I just found out that ie9 works only for vista or window7!!! I use Mac and I have access to window xp. I will try to get access to vista pc to test the extension. but i don’t promise any new version sometime soon.

Vil (Apr 17, 2011)

does it work with 1.5? installation is fine but not working here: doesnt’call the js neither the right media.phtml any ideas?

mohammed (Apr 17, 2011)

I have not tested it yet with 1.5. I don’t know if it will work or not.

Also, 1.5 is a preview version and not for production website. See http://www.magentocommerce.com/blog/comments/magento-preview-version-ce-1510-rc1-now-available/

It is not worth spending time in making the extension work with a preview version.

Vil (Apr 17, 2011)

it’s the 1.5.1.0 i have the 1.5.0.1 and
http://www.magentocommerce.com/download
you can download only the 1.5 now…

mohammed (Apr 17, 2011)

Hmmm thanks I have not seen that. I will upgrade the extension as soon as I can.

Stan (Apr 23, 2011)

Hello Mohammed!

When I’m trying to install your extension via Magento Connect it shows this error – “community/Moo_CloudZoom: Version for ‘Moo_CloudZoom’ was not detected”

I was using these keys to try:
magento-community/Moo_CloudZoom-1.1.3
http://connect20.magentocommerce.com/community/Moo_CloudZoom-1.1.3

Stan (Apr 23, 2011)

Also,

I tried to install manually and copied all folders like you instructed, but no “Moo Product Gallery “CloudZoom” configuration in system>configuration>catalogue :(

My Magento version is 1.5.0.1

mohammed (Apr 23, 2011)

Make sure you have the preferred state set to beta

mohammed (Apr 23, 2011)

In Magento sometimes you may need to logout and login again. Also, you might want to refresh permission role for administrators (see FAQ).

Stan (Apr 23, 2011)

I’ve installed it manually. Thanks for easy instructions!

Adrian Ding (Apr 24, 2011)

Hi, I like this extension very much. Thank you for affording such a wonderful extension.

As you know, there is a bug in Opera. And I have found the cause.

In the definition of variable ch and cw, zoomDiv.width() returns an incorrect value in Opera. It is due to a bug of Opera or jQuery.
I modified it to parseInt(zoomDiv.css(‘width’)), and it worked well.

I don’t know if that is the best way to solve the issue, but it works in IE6/7/8, FF 3.6/4 and Chrome 10 (I have not tested in Safari).

I hope you can fix it in the next version!

mohammed (Apr 24, 2011)

Thanks for your contribution. I will test your fix in Safari.

mohammed (Apr 30, 2011)

The latest version 1.1.4 now works in IE9

Jens (May 11, 2011)

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?

Jens (May 11, 2011)

Ahh. Forget about it. Compilation was enabled… My fault…

mohammed (May 11, 2011)

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.

jaishalini (May 19, 2011)

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.

Yomi (May 23, 2011)

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

Daniel (May 31, 2011)

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.

mohammed (Jun 01, 2011)

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?

power balance (Jun 01, 2011)

Paste extension key to install: error below: why ?

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

mohammed (Jun 01, 2011)

Answer

Daniel (Jun 01, 2011)

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

mohammed (Jun 02, 2011)

Sorry but I don’t support IE6. It’s old browser and people should not use it.

mohammed (Jun 02, 2011)

How it does not appear as stated? Also, check first question in FAQ section, it might be the answer to your problem.

mohammed (Jun 02, 2011)

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.

toni (Jun 22, 2011)

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?

mohammed (Jun 22, 2011)

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’

toni (Jun 23, 2011)

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?

mohammed (Jun 24, 2011)

From your admin interface go to Magento Connect and find an extension that might have the word ‘ OrganicInternet’ in its name.

toni (Jun 27, 2011)

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

hgrzesiek (Jul 12, 2011)

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

mohammed (Jul 12, 2011)

Your website theme uses jquery (http://designshout.co.uk/skin/frontend/default/saako/js/jquery.js) instead of the jquery that comes with the extension.

The jquery you are using is v1.2.3 but the extension requires a new version of jquery v1.4.2 ore newer.

hgrzesiek (Jul 12, 2011)

Hi Mohammed,

Thank you very much for prompt response, work like a charm now.

I can finally enjoy your great plugin.

Thank you again for your help

Adis (Jul 14, 2011)

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

mohammed (Jul 16, 2011)

You can’t do this in the current version.

DIOGO (Oct 04, 2011)

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?

mohammed (Oct 04, 2011)

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

Brian (Dec 20, 2011)

Great extension, works fine. Just one thing I would like to change.

When you click on the main image it brings up a popup window. How can I disable this?

mohammed (Dec 20, 2011)

Open the file /app/design/frontend/default/default/template/moo/catalog/product/view/media.phtml
Remove everything in line 55 and 60

Vincent (Jan 18, 2012)

Hi, very nice extension, good works,…. I have just one problem i want to put cloudZoom in the cart items view but i don’t find the solution ( i begin in magento ) can you help me ?

mohammed (Jan 18, 2012)

Hi Vincent

The plugin does not work in the cart items view. This is free open source code. I am not currently wanting to implement new features. Perhaps sometime in the future if there is funding for it or if I have some spare time and want to contribute to it.

Cheers

aileen (May 10, 2012)

Hi, i have implemented this extension but it does not seem to work with IE7. When I zoom and scroll through the image, the zoomed image does not display correctly. please help. :) thanks a lot..

slides (May 10, 2012)

help,.
Works fine in IE 7 but not in IE 8 and 9..

mohammed (May 17, 2012)

It is possible that the CSS you have in your theme interfere with the plugin CSS. I’m currently really busy, but what is the URL of your website. I will have a look when I have free time.

mohammed (May 17, 2012)

The last time I tested with IE it was working fine. It is possible that your theme interfere with the plugin CSS. I’m currently busy, but what is your URL? I will have a look when I have free time.

Chris (Feb 12, 2013)

Great extension…Thanks! I have installed this extension on a testing site. I want to have custom media.phtml files for certain categories. I have managed to use custom media.phtml files via custom design->custom layout update. My question is how can the extension be modified to be able to change the setting on multiple pages? I.e. override the backend settings page and hard code settings into the custom pages.

mohammed (Feb 12, 2013)

Currently you cannot do this. It requires modifications to the extension code.

Noho (Aug 28, 2013)

Hello Muhammad,
I used your extension. It is excellent. I am facing strange problem. Lens window is the same size as the zoom window. Some of my pages it is fine and some f the pages it equal to zoom window size…. Can you explain the solution of this strange behaviour.
Here is the link with fine lens window
http://www.imtinanz.com/popular-products/baxton-studio-julian-black-brown-faux-leather-club-chair-with-360-degree-swivel.html
and here is link for the same lens size as zoom size
http://www.imtinanz.com/for-the-home/kitchen-ware/bowl-and-boxes/set-of-four-wood-bowls.html
I will appreciate your help. Thanks in advance

mohammed (Aug 28, 2013)

Hi Noho
The lens box size is relative to the large image. The image in the second link have 2 images (the main visible image and popup image) are similar in size.
The visible image 300×380. The popup image 371×385. Make sure the popup image (the original) bigger than the visible one.

Noho (Aug 28, 2013)

Thanks Mohammad you are really helpful. I have high resolution images of 1500px I will upload instead lower resolution.

Tags