Post by webrasta » Sun Dec 25, 2011 3:57 am

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.
Last edited by webrasta on Sun Dec 25, 2011 5:37 am, edited 3 times in total.

Professor Cloud Zoom Free Product Image Magnifier (vqmod) | Demo | Pro | Demo
Cloud Zoom for Shoppica Theme - PRO Image Magnifier | Demo Image in tab / below preview
Sidebox footer links (vqmod) | Demo


Newbie

Posts

Joined
Sun Dec 25, 2011 3:39 am

Post by labeshops » Sun Dec 25, 2011 4:09 am

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

Running Opencart v2.2 with multi-stores from http://www.labeshops.com which has links to all my stores.

Image


User avatar
Newbie

Posts

Joined
Thu Aug 04, 2011 4:41 am
Location - Florida, USA

Post by webrasta » Sun Dec 25, 2011 5:00 am

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

Professor Cloud Zoom Free Product Image Magnifier (vqmod) | Demo | Pro | Demo
Cloud Zoom for Shoppica Theme - PRO Image Magnifier | Demo Image in tab / below preview
Sidebox footer links (vqmod) | Demo


Newbie

Posts

Joined
Sun Dec 25, 2011 3:39 am

Post by labeshops » Mon Dec 26, 2011 6:51 am

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.

Running Opencart v2.2 with multi-stores from http://www.labeshops.com which has links to all my stores.

Image


User avatar
Newbie

Posts

Joined
Thu Aug 04, 2011 4:41 am
Location - Florida, USA

Post by webrasta » Thu Dec 29, 2011 7:05 pm

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.

Professor Cloud Zoom Free Product Image Magnifier (vqmod) | Demo | Pro | Demo
Cloud Zoom for Shoppica Theme - PRO Image Magnifier | Demo Image in tab / below preview
Sidebox footer links (vqmod) | Demo


Newbie

Posts

Joined
Sun Dec 25, 2011 3:39 am

Post by Qphoria » Thu Dec 29, 2011 9:12 pm

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

Code: Select all

XMLHttpRequest cannot load http://www.bananamanana.com/index.php?route=product/product/review&product_id=41. Origin http://www.demo.bananamanana.com is not allowed by Access-Control-Allow-Origin.

OpenCart 2.0.x Mod Update Info

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by Qphoria » Fri Dec 30, 2011 2:53 am

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

Code: Select all

Warning: session_start() [function.session-start]: open(/tmp/sess_2ugai1s07catl160gi83md7us5, O_RDWR) failed: No space left on device (28) in /home/sites/bananamanana.com/public_html/system/library/session.php on line 11
:)

You ran out of diskspace

OpenCart 2.0.x Mod Update Info

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by webrasta » Fri Dec 30, 2011 5:28 am

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

Ps maybe I should consider changing host. :S

Professor Cloud Zoom Free Product Image Magnifier (vqmod) | Demo | Pro | Demo
Cloud Zoom for Shoppica Theme - PRO Image Magnifier | Demo Image in tab / below preview
Sidebox footer links (vqmod) | Demo


Newbie

Posts

Joined
Sun Dec 25, 2011 3:39 am

Post by ozkiremitci » Fri Jan 27, 2012 1:01 am

Thank you man, great information!

Newbie

Posts

Joined
Thu Jan 26, 2012 9:48 pm


Post by Oneilus » Mon Feb 13, 2012 12:25 am

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>');

Newbie

Posts

Joined
Fri Mar 26, 2010 2:26 am

Post by kbc6790 » Tue Feb 21, 2012 6:41 pm

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?

Newbie

Posts

Joined
Tue Nov 08, 2011 3:16 am

Post by kbc6790 » Tue Feb 21, 2012 7:43 pm

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

Newbie

Posts

Joined
Tue Nov 08, 2011 3:16 am

Post by techadd » Tue Mar 06, 2012 11:31 pm

is this still working for the latest open cart version?

Newbie

Posts

Joined
Mon Mar 05, 2012 12:46 pm

Post by edog » Tue Mar 20, 2012 9:29 pm

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

Newbie

Posts

Joined
Fri Jan 27, 2012 9:10 pm

Post by webrasta » Tue Jun 19, 2012 12:58 am

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.

Professor Cloud Zoom Free Product Image Magnifier (vqmod) | Demo | Pro | Demo
Cloud Zoom for Shoppica Theme - PRO Image Magnifier | Demo Image in tab / below preview
Sidebox footer links (vqmod) | Demo


Newbie

Posts

Joined
Sun Dec 25, 2011 3:39 am

Post by pallu87 » Tue Jul 03, 2012 9:13 pm

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

Newbie

Posts

Joined
Sun Jul 01, 2012 10:47 am

Post by samsamsam » Tue Aug 28, 2012 5:13 pm

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..
Last edited by samsamsam on Wed Aug 29, 2012 7:33 pm, edited 1 time in total.

Newbie

Posts

Joined
Tue Aug 28, 2012 5:09 pm

Post by samsamsam » Tue Aug 28, 2012 5:26 pm

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

Newbie

Posts

Joined
Tue Aug 28, 2012 5:09 pm

Post by Coder4ever » Wed Aug 29, 2012 11:26 pm

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,

Newbie

Posts

Joined
Wed Aug 29, 2012 11:13 pm
Who is online

Users browsing this forum: No registered users and 5 guests