[HOW TO] Cloud-zoom and Opencart step by step guide 1.5.1.3

This is my first post here, but I've taken lots of help and info from the forum so far for my store. By means of giving back here is a 'how to' that I wrote whilst installing cloud-zoom on my opencart shop. Please feel free to comment or ask questions.

Cloud-zoom is a javascript image-magnifier, more info here: http://www.professorcloud.com/mainsite/cloud-zoom.htm

View the implementation on my opencart demo page here: http://demo.bananamanana.com/test

Copy the file cloud-zoom.css to /catalog/view/theme/default/stylesheet

Copy file cloud-zoom.1.0.2.js to a new directory called /catalog/view/javascript/jquery/cloud-zoom/

Create a backup of header.tpl called header.tpl.orig in directory /catalog/view/theme/default/template/common/

Edit header.tpl, to add a reference to the cloud-zoom stylesheet, ajax sctipt hosted on google and the cloud-zoom script.
Find: <link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet.css" />

After it, add:

<link href="/catalog/view/theme/default/stylesheet/cloud-zoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq ... "></script>
<script type="text/JavaScript" src="/catalog/view/javascript/jquery/cloud-zoom/cloud-zoom.1.0.2.js"></script>

Create a bcakup of product.tpl called product.tpl.orig in directory /catalog/view/theme/default/template/product/

On or around line 13 find:

<div class="image"><a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="fancybox" rel="fancybox">

Chance to:

<div class="image"><a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="cloud-zoom" id='zoom1' rel="adjustX: 10, adjustY:-4">

For additional image gallery, on line 18 find:

<a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="fancybox" rel="fancybox">

<a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '<?php echo $image['thumb']; ?>' ">

Just after on the same line, find:

<img src="<?php echo $image['thumb']; ?>"

Change to: <img src="<?php echo $image['thumb']; ?>" width="76" height="76" *see below for an explanation of why.

Getting it looking right.
If you look at your page now it will work fine for products with a single image but it wont look right for products with multiple images.

The additional images aren't cached as tiny small and large in opencart.
The default size for additional images are tiny and large.
We can increase the tiny image to be small, then scale these small images down to tiny for use for thumbnails.

In backoffice>settings>image> Additional Product Image Size:
Increase to 228px x 228px (or whatever you have Product Image Thumb Size set to)

In product.tpl after <img src="<?php echo $image['thumb']; ?>" add width="76" height="76"

In stylesheet.css you can play around with margin-left under
.product-info .image-additional a { & .product-info .image-additional {
I changed margin left to 8px and -8px respectively.

To persolalise your cloud-zoom just play around with the rel"....." on line ~13 of product.tpl check the paramaters given here http://www.professorcloud.com/mainsite/ ... ration.htm and maybe mess with cloud-zoom.css

That's it you should now have a working install of cloud-zoom on opencart. Tested working on 1.5.1.3.

What is cloud-zoom? Do you have a link to your site to see it in action?

Hi labelshops,
cloud-zoom is a sweet image magnifier here is a link to the developer site and my opencart site with the mod working.
Peace
http://www.professorcloud.com/mainsite/cloud-zoom.htm
http://demo.bananamanana.com/desktops/mac/imac

Ah, thanks. Figured it was something like that, but wasn't sure. I've always found that kind of zoom annoying myself, but I'm sure others will like it.

Thanks for taking the time to check it out. I know its not going to be to everyones tastes, I tried to make it an 'undo-able' mod so anyone can just try it to see if they like it.

Nothing zooming for me on your demo.
Ajax Jscript error on your site:

Fixed now Qphoria

Nope.. now still doesn't work and new error at top:

You ran out of diskspace

Working now, hopefully. I have a vqmod on the way to save modifying template files.

Ps maybe I should consider changing host. :S

Thank you man, great information!

HI, great post, thanks.
If you have the label module installed, it puts the label behind the product image, so you need to change some settings in the js file:

line 341:
DELETE 'position': 'relative',

~line 349:
$(this).wrap('<div id="wrap" style="top:0px;z-index:9999;position:relative;"></div>');

CHANGE TO
$(this).wrap('<div id="wrap" style="top:0px;z-index:9999;"></div>');

Hi, I tried the first part of your tutorial and added the following code.

header.tpl
<link href="../../stylesheet/cloud-zoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq ... "></script>
<script type="text/JavaScript" src="../../../../javascript/jquery/cloudzoom/cloud-zoom.1.0.2.js"></script>

product.tpl
<div class="image"><a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="cloud-zoom" id='zoom1' rel="adjustX: 10, adjustY:-4"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image" /></a></div>

I saved and uploaded at this point to check if it worked on products with one image and it was not working. Any ideas where I may be going wrong?

Hi, I got that working by removing the "../../" but i am having issues working with the small thumbnails. This is the code that i have entered:

<a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '<?php echo $image['thumb']; ?>' "><img src="<?php echo $image['thumb']; ?>" width="76" height="76" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a>

I am getting some display issues. Does anyone know where i may be going wrong?

many thanks

is this still working for the latest open cart version?

Hey, thanks for the guide.
Zoom image isn't showing for me, but the title is. Also when clicked the additional images just load in a seperate window instead of replacing the current image.

Any idea's what might be causing it?

Thanks

techadd wrote:is this still working for the latest open cart version?

Hi techadd, newer versions of Open Cart use colourbox instead of fancybox by default to display images. So this method described above is not exactly correct. Why not try my free mod though?

edog wrote:Hey, thanks for the guide.
Zoom image isn't showing for me, but the title is. Also when clicked the additional images just load in a seperate window instead of replacing the current image.

Any idea's what might be causing it?

Thanks

Hi edog, the additional image loading up in a seperate window suggests that your cloudzoom javasctipt file is not loading. If you have not resolved this issue I recommend using my free cloudzoom extension.

HI Edog,
In the Header.tpl instead of src="/catalog/.." use src="catalog/..." i.e remove the '/' . The it shoud work.

Hi all programmers out there, it seems like my zoom is working but it didn't load the css property such as the border, background-color and stuff, i did include the css script in the header, anyone knows what could be the problem?

[Solved] Sorry I just linked to the wrong css file, my bad..

Hi everyone, when i click the picture when it is at the loading stage, it comes out as a pop out window but it did not have any button to close it, all i have to do is click the 'Back' button on my browser, is there a way to close the window by clicking on the side of the picture ( just like facebook pictures) or a button to close it?

Thanks

Hi there,

I'm having issue with inner-zoom/cloud-zoom. I have 4 pictures for a product and it opens up on product page and works perfectly for the first picture but for the rest of three pictures it shows "Loading..." and that's it. Does not do inner zoom for other 3 pictures . What can be the problem? is there a picture size limit? are those pics too large?

I would appreciate any help

Thanks,