Hello, I have looked all over this forum and the internet and haven't found any help on how to implement the cloud zoom from http://www.professorcloud.com/mainsite/cloud-zoom.htm to my productdetails page.
I have edited the default_images.php a little and added the css from the cloud zoom to vmsite-ltr.css, but sadly haven't gotten the result I would like. I am fairly new to php and js. So any help will be greatly appreciated.
Thank you,
DM
You could have look at this :
I am not the designer
https://www.flexiblewebdesign.com/Virtuemart-Extensions/Flexible-Virtuemart-Zoom-Effect-on-Product-Page
Hello thank you for your reply. I already looked at that, however I am trying to have a free solution since both Virtuemart and Cloud Zoom are free. Does anyone know how to do this? Which files must I modify and how do I include the js and everything else in Virtuemart.
Well since there isn't a lot of input from the forum I am trying to work it on my own. However my skills are not very good.
This is what I did so far, any help will be more than appreciated.
in components/com_virtuemart/views/productdetails/tmpl/default_images.php I added the following:
// Product Main Image
if (!empty($this->product->images[0])) {
?>
<div class="main-image">
<link href="includes/js/cloud zoom/css/cloud-zoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="includes/js/cloud zoom/cloud-zoom.1.0.2.min.js"></script>
<a href='<?php echo $this->product->images[0]->displayMediaThumb('class="cloud-zoom" id="zoom1"', false, "class='cloud-zoom'", true); ?>' class = 'cloud-zoom' id='zoom1'
rel="adjustX: 10, adjustY:-4">
<img src='<?php echo $this->product->images[0]->displayMediaFull('class="cloud-zoom" id="zoom1"', false, "class='cloud-zoom'", true); ?>' alt='' title="Optional title display">
</a>
<?php echo $this->product->images[0]->displayMediaFull('class="medium-image" id="medium-image"', false, "class='modal'", true); ?>
</div>
<?php } // Product Main Image END ?>
It shows me the loading... text on top of image but that's it...nothing else happens. I also don't understand what should be in the parenthesis of displayMediaFull and displayMediaThumb.
Any suggestions? I would be able to integrate it in an article - the link is here: http://www.professorcloud.com/mainsite/cloud-zoom-integration.htm but I know I need to integrate it in core of virtuemart so that it will apply to all products.
Please help me. Thank you.
Ok I added the js and css file to the main template in header and edited the default_image.php file to this;
<?php
// Product Main Image
if (!empty($this->product->images[0])) {
?>
<div class="main-image">
<a href='<?php echo $this->product->images[0]->displayMediaFull; ?>' class = 'cloud-zoom' id='zoom1'
rel="adjustX: 10, adjustY:-4">
<img src="<?php echo $this->product->images[0]->file_url_thumb; ?>" alt='' title="<?php echo $this->product->product_name ?>" />
</a>
</div>
<?php } // Product Main Image END ?>
What I am getting now is a small thumb picture and a 'loading...' text next to it. The 'Loading...' text is from the js file but it never loads :-\ So I have no idea what might be the issue here. Does anyone have any ideas? Any help will be greatly appreciated.
Also if I use displayMediaFull(); then my site looks all weird and half of stuff after that are displayed on the site.
Example: image here and then followed by text from the code;lass = 'cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4">
I hope you will be able to help since after a couple of days of trying to find the best solution I am looking at a dead end. Thank you.
Hi. :)
I had the same problem and when I checked out the solutions they were all kind of "simplistic" and too far from what I wanted and needed.
So, I've made some R&D and came out with a simple and quite good solution.
You can check it out in my blog post: Zoom images on VirtueMart products (http://blog.hexonio.com/2012/06/21/zoom-images-on-virtuemart-products/).
It's easy to implement even for people that do not have much technical skills.
I hope this will help.
I´m in a hurry but have a look at this side and code. It´s a VM 2.0 template using Professor Clouds Zoom. Hope this helps you ;)
http://demos.virtueplanet.com/shiny/category-layout/adipower-barricade-black-sports-shoes-detail
By the way would be nice if you would post at which files of VM we have to integrate the PClouds Zoom. If you still have problems I hopefully come back this weekend to help.
Hi everyone,
this is quite simple to achieve
<?php if (!empty($this->product->images[0])) : // Product Main Image ?>
<link rel="stylesheet" type="text/css" href="/templates/YOUR_TEMPLATE/html/com_virtuemart/assets/cloud-zoom.css"/>
<script src="/templates/YOUR_TEMPLATE/html/com_virtuemart/assets/cloud-zoom.1.0.2.js"></script>
<div class="zoom-section">
<div class="zoom-small-image">
<a href="<?php echo $this->product->images[0]->file_url; ?>" class="cloud-zoom" id="zoom1" rel=""><img src="<?php echo $this->product->images[0]->file_url_thumb; ?>" border="0" width="270" height="270"></a>
</div><!-- zoom-small-image -->
</div><!-- zoom-section -->
<?php endif; // Product Main Image END ?>
<?php if (!empty($this->product->images)) : // Showing The Additional Images ?>
<?php if (count($this->product->images) > 1) : // Count The Additional Images ?>
<div class="zoom-desc">
<?php foreach ($this->product->images as $image) : ?>
<a href="<?php echo $image->file_url; ?>" class="cloud-zoom-gallery" rel="useZoom:'zoom1',smallImage:'/<?php echo $image->file_url_thumb; ?>'">
<img src="<?php echo $image->file_url_thumb; ?>" class="zoom-tiny-image">
</a>
<?php endforeach; ?>
</div><!-- zoom-desc -->
<?php endif; // Count The Additional Images END ?>
<?php endif; // Showing The Additional Images END ?>
and the css for it is:
/* This is the moving lens square underneath the mouse pointer. */
.cloud-zoom-lens {
/*border:1px dotted #fff;*/
margin:0; /* Set this to minus the border thickness. */
background-color:#fff;
cursor:move;
}
/* This is for the title text. */
.cloud-zoom-title {
font-family:Arial, Helvetica, sans-serif;
position:absolute !important;
background-color:#000;
color:#fff;
padding:3px;
width:100%;
text-align:center;
font-weight:bold;
font-size:10px;
top:0px;
}
/* This is the zoom window. */
.cloud-zoom-big {
/*border:1px solid #ccc;*/
overflow:hidden;
}
/* This is the loading message. */
.cloud-zoom-loading {
color:white;
background:#222;
padding:3px;
border:1px solid #000;
}
.zoom-desc a {
display:inline;
width:60px;
height:60px;
padding:0;
margin:0 10px 10px 0;
overflow:hidden;
float:left;
}
.zoom-desc a img {
display:block;
width:60px;
height:60px;
}
be sure to have the JS and CSS file reference set up correctly.
Good luck.
hi ivus,
thanks. works fine with one product picture. if you add more than one and click for e.g. the 2nd one only loading appears and nothing happens. any idea? i added a title for the zoom picture db->file_desription.
default_images.php
<div class="zoom-small-image">
<a href="<?php echo $this->product->images[0]->file_url; ?>" class="cloud-zoom" id="zoom1" rel=""><img src="<?php echo $this->product->images[0]->file_url_thumb; ?>" border="0" width="270" height="270" alt='' title="<?php echo$this->product->images[0]->file_description; ?>"></a>
</div>
found the error but do not have a solution. after changing the image you get only an uncomplete path. the mainpath is missing
src="/images/stories/virtuemart/product/resized/image.jpg"
instead of
src="COMPLETEPATH/images/stories/virtuemart/product/resized/image.jpg"
don´t know why
Hi lantham,
Quotesrc="/images/stories/virtuemart/product/resized/image.jpg"
that's correct, it's referencing the image via a relative url.
The problem doesn't appear to be within the the code of the main image block, only the thumbnail part. Can you post your code as it currently is (a site link would be even better) so I can take a look. I'm sure it's something very simple.
Hello I had one problem as well for the additional images. What I had to do is add one '/' to the code. Here's my code and it works so you can try it and let me know.
<?php
/**
*
* Show the product details page
*
* @package VirtueMart
* @subpackage
* @author Max Milbers, Valerie Isaksen
* @link http://www.virtuemart.net
* @copyright Copyright (c) 2004 - 2010 VirtueMart Team. All rights reserved.
* @license http://www.gnu.org/copyleft/gpl.html GNU/GPL, see LICENSE.php
* VirtueMart is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* @version $Id: default_images.php 6188 2012-06-29 09:38:30Z Milbo $
*/
// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die('Restricted access');
// Product Main Image
if (!empty($this->product->images[0])) {
?>
<div class="main-image">
<a href="<?php echo $this->product->images[0]->file_url; ?>" class = 'cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:0, zoomWidth: 350, zoomHeight: 290">
<img src="<?php echo $this->product->images[0]->file_url; ?>" <?//isto kliceš pot od src file-a?>
width = "290" alt='' title="<?php echo $this->product->product_name ?>" />
</a>
</div>
<?php } // Product Main Image END ?>
<?php
// Showing The Additional Images
// if(!empty($this->product->images) && count($this->product->images)>1) {
if (!empty($this->product->images) and count ($this->product->images)>1) {
?>
<div class="additional-images">
<?php
// List all Images
if (count($this->product->images) > 1) {
foreach ($this->product->images as $image) { //se zacne foreach zanka
/*echo '<div class="floatleft">' . $image->displayMediaThumb('class="product-image"', true, 'class="modal"', true, true) . '</div>'; //'class="modal"'
}*/
?>
<div class="floatleft">
<a href='<?php echo '/'.$image->file_url; ?>' class='cloud-zoom-gallery' title='<?php echo $this->product->product_sku?>' rel="useZoom: 'zoom1', smallImage: '<?php echo '/'.$image->file_url;?>'">
<img src='<?php echo '/'.$image->file_url; ?>' width = "100" />
</a>
</div>
<?php
}
}
?>
<div class="clear"></div>
</div>
<?php
} // Showing The Additional Images END ?>
for additional info check http://www.professorcloud.com/mainsite/cloud-zoom-integration.htm
also download the files from that site and insert them in the code, or If you will use it on other pages(articles etc) then you can put it inside your template <head></head> tags.
hi ivus and scrajca,
@scrajca: i tried your solution but it didn´t work. even the thumbnails were gone ;-)
@ivus: i don´t have a working project (only local server), i just started to have a look at vm2 since some days because i want to rebuild my vm1.19 shop. thumbnails are working. if you click on one only the incomplete path is stored in the "main block" part and so the image can´t be loaded.
here is my code
<?php
/**
*
* Show the product details page
*
* @package VirtueMart
* @subpackage
* @author Max Milbers, Valerie Isaksen
* @link http://www.virtuemart.net
* @copyright Copyright (c) 2004 - 2010 VirtueMart Team. All rights reserved.
* @license http://www.gnu.org/copyleft/gpl.html GNU/GPL, see LICENSE.php
* VirtueMart is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* @version $Id: default_images.php 6188 2012-06-29 09:38:30Z Milbo $
*/
// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die('Restricted access');
?>
<?php if (!empty($this->product->images[0])) { ?>
<div class="zoom-section">
<div class="zoom-small-image">
<a href="<?php echo $this->product->images[0]->file_url; ?>" class="cloud-zoom" id="zoom1" rel=""><img src="<?php echo $this->product->images[0]->file_url_thumb; ?>" border="0" width="270" height="270" alt='' title="<?php echo $this->product->images[0]->file_description; ?>"></a>
</div><!-- zoom-small-image -->
</div><!-- zoom-section -->
<?php } ?>
<?php if (!empty($this->product->images)) { ?>
<?php if (count($this->product->images) > 1) { ?>
<div class="zoom-desc">
<?php foreach ($this->product->images as $image) { ?>
<a href="<?php echo $image->file_url; ?>" class="cloud-zoom-gallery" rel="useZoom:'zoom1',smallImage:'/<?php echo $image->file_url_thumb; ?>'">
<img src="<?php echo $image->file_url_thumb; ?>" class="zoom-tiny-image">
</a>
<?php } ?>
</div><!-- zoom-desc -->
<?php } ?>
<?php } ?>
thx for your help!
it´s really strange...
<?php foreach ($this->product->images as $image) { ?>
<a href="<?php echo $image->file_url; ?>" class="cloud-zoom-gallery"
rel="useZoom:'zoom1',smallImage:'<?php echo 'JOOMLAINSTALLATIONPATH'.$image->file_url_thumb; ?>'">
<img src="<?php echo $image->file_url_thumb; ?>" class="zoom-tiny-image">
</a>
<?php } ?>
if i add the installation path of Joomla (see above) it works fine. but why the hell does the "href" and "img src" get the right path even i use the same echo $image->file_url_thumb;
weird, I looked again, the code I am using works perfectly good on joomla 2.5 and vm 2.0.6 and 2.0.8 a-e.
well as long as you have it working that's fine :)
hi guys,
i followed the tip from ivus in my thread and read ur posts here but its not the problem i have with my detail page.
it would be nice if u guys wanna help me out, i think its not a big problem.
after a search trough some posts in a geman Forum i finaly solved one of two problems. So the last problem. at my detail page i got a product with 3 pictures. I can see the main img and all additional images below. And if i click a additional Image it opends in a lightbox but i want that if a click an additional img that it became the main image and not open in a lighbox. how can i realise that ?
regards c0LIn
Hello colin,
You could use also that http://forum.virtuemart.net/index.php?topic=105768
it's free.
hi bytelord
thx 4 ur post. but i dont wanna use any zoom plugins/addons. What i want is if i click an additional image that it becomes the main image.
and if i click the main image it open in a lightbox. <--- that works
best regads c0LIn
hi c0LIn
you're gonna have to learn yourself some jQuery.
There's heaps of tutorials out there that lets you do this.
Good hunting. ;)
Colin,
download the plugin and study that code :) easy!!
uses the same js libraries, is not difficult to accomplish it, IMHO
Thx for the tip with jQuery.... i finally solved my problem...
regards
Hej cOLIn would you mind sharing your solution with us? thank you
Sure... here is the original Post were i wrote down the code.
Click (http://forum.virtuemart.net/index.php?topic=106676.msg356813#msg356813)
regards