News:

You may pay someone to create your store, or you visit our seminar and become a professional yourself with the silver certification

Main Menu

Cloud zoom integration

Started by srajca, May 30, 2012, 10:51:17 AM

Previous topic - Next topic

srajca

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

John2400


srajca

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.

srajca

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.

srajca

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.

fmp.martins

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.
It's easy to implement even for people that do not have much technical skills.

I hope this will help.

lanthan

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.

ivus

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.

lanthan

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>

lanthan

#9
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

ivus

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.

srajca

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.

lanthan

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!

lanthan

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;

srajca

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