Author Topic: Cloud zoom integration  (Read 15369 times)

srajca

  • Jr. Member
  • **
  • Posts: 146
Cloud zoom integration
« on: May 30, 2012, 10:51:17 am »
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

  • Virtuemart - the Future is ever Changing
  • Global Moderator
  • Full Member
  • *
  • Posts: 1568
  • VirtueMart Version: Use VM3.0.12
Re: Cloud zoom integration
« Reply #1 on: May 30, 2012, 11:14:37 am »

srajca

  • Jr. Member
  • **
  • Posts: 146
Re: Cloud zoom integration
« Reply #2 on: May 30, 2012, 11:22:21 am »
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

  • Jr. Member
  • **
  • Posts: 146
Re: Cloud zoom integration
« Reply #3 on: June 05, 2012, 21:08:47 pm »
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

  • Jr. Member
  • **
  • Posts: 146
Re: Cloud zoom integration
« Reply #4 on: June 06, 2012, 21:42:13 pm »
Ok I added the js and css file to the main template in header and edited the default_image.php file to this;
Code: [Select]
<?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

  • Beginner
  • *
  • Posts: 32
Re: Cloud zoom integration
« Reply #5 on: June 21, 2012, 19:56:20 pm »
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

  • Jr. Member
  • **
  • Posts: 99
  • VM 2.6.10, J2.5.27, PHP5.5
Re: Cloud zoom integration
« Reply #6 on: July 19, 2012, 02:10:44 am »
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

  • Full Member
  • ***
  • Posts: 534
  • - YAY me... proud member of the 500 club...
Re: Cloud zoom integration
« Reply #7 on: July 19, 2012, 11:58:38 am »
Hi everyone,

this is quite simple to achieve

Code: [Select]
   
    <?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:

Code: [Select]


/* 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

  • Jr. Member
  • **
  • Posts: 99
  • VM 2.6.10, J2.5.27, PHP5.5
Re: Cloud zoom integration
« Reply #8 on: July 20, 2012, 00:26:05 am »
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
Code: [Select]
<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

  • Jr. Member
  • **
  • Posts: 99
  • VM 2.6.10, J2.5.27, PHP5.5
Re: Cloud zoom integration
« Reply #9 on: July 20, 2012, 00:47:37 am »
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

  • Full Member
  • ***
  • Posts: 534
  • - YAY me... proud member of the 500 club...
Re: Cloud zoom integration
« Reply #10 on: July 20, 2012, 07:24:45 am »
Hi lantham,

Quote
src="/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

  • Jr. Member
  • **
  • Posts: 146
Re: Cloud zoom integration
« Reply #11 on: July 20, 2012, 08:57:28 am »
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.
Code: [Select]
<?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

  • Jr. Member
  • **
  • Posts: 99
  • VM 2.6.10, J2.5.27, PHP5.5
Re: Cloud zoom integration
« Reply #12 on: July 20, 2012, 22:00:54 pm »
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
Code: [Select]
<?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

  • Jr. Member
  • **
  • Posts: 99
  • VM 2.6.10, J2.5.27, PHP5.5
Re: Cloud zoom integration
« Reply #13 on: July 21, 2012, 00:29:36 am »
it´s really strange...
Code: [Select]
<?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

  • Jr. Member
  • **
  • Posts: 146
Re: Cloud zoom integration
« Reply #14 on: July 21, 2012, 08:27:23 am »
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 :)