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.
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
Running Opencart v3.0.3.2 with multi-stores and the default template from https://www.labeshops.com which has links to all my stores.
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
Running Opencart v3.0.3.2 with multi-stores and the default template from https://www.labeshops.com which has links to all my stores.
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
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.
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
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
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>');
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?
<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
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?techadd wrote:is this still working for the latest open cart version?
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.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
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
[Solved] Sorry I just linked to the wrong css file, my bad..
Thanks
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,
Users browsing this forum: No registered users and 42 guests