VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: kostas.s on January 21, 2016, 00:03:47 AM

Title: Image swap in product details page
Post by: kostas.s on January 21, 2016, 00:03:47 AM
Hello, I need to create an image swap in product details page. Ideally I want to load 2 images/product (1 main and 1 additional) and on mouse over to replace main image with the additional (with the same dimensions). My versions are VM 3.0.12 and  Joomla 3.4.8.
I have found the product display file in components/com_virtuemart/sublayouts/products.php which uses components/com_virtuemart/views/productdetails/tmp/defaut_images.php file to load product image.
At line 67 there is the code:

if (!empty($this->product->images)) {
   $image = $this->product->images[0]; // main image
   $image_hover=$this->product->images[1]; // the second additional image, this line added by me
   ?>
   <div class="main-image">
      <?php echo $image->displayMediaFull("",true,"rel='vm-additional-images'"); //display main image ?>
      <div class="clear"></div>
   </div>
   <?php
}
?>

However, I cannot find a way to create a swap between $image and $image_hover on mouse over event. Any help will be much appreciated. Thanks.
Title: Re: Image swap in product details page
Post by: VMTemplates.net on January 21, 2016, 18:47:57 PM
Hi,

try this:

1. Change your code to following:

if (!empty($this->product->images)) {
   $image = $this->product->images[0]; // main image
   $image_hover=$this->product->images[1]; // the second additional image, this line added by me
   ?>
   <div class="main-image">
      <?php echo $image->displayMediaFull("",true,"rel='vm-additional-images'"); //display main image ?>
      <div class="iam2nd"><?php echo $image_hover->displayMediaFull("",true,"rel='vm-additional-images'"); //display main image ?></div>
      <div class="clear"></div>
   </div>
   <?php
}

2. Use CSS to switch images:

.main-image{position:relative;}
.main-image .iam2nd {position:absolute;top:0;left:0;right:0;bottom:0;opacity: 0;-moz-transition-duration: 0.4s;-webkit-transition-duration: 0.4s;-o-transition-duration: 0.4s;-ms-transition-duration: 0.4s;transition-duration: 0.4s;-webkit-transition-property: opacity;-ms-transition-property: opacity;-o-transition-property: opacity;-moz-transition-property: opacity;transition-property: opacity;}
.main-image:hover .iam2nd {opacity: 1;}
Title: Re: Image swap in product details page
Post by: kostas.s on January 25, 2016, 11:32:56 AM
This worked perfectly, thanks a lot! Even better with CSS instead of JS!

Quote from: VMTemplates.net on January 21, 2016, 18:47:57 PM
Hi,

try this:

1. Change your code to following:

if (!empty($this->product->images)) {
   $image = $this->product->images[0]; // main image
   $image_hover=$this->product->images[1]; // the second additional image, this line added by me
   ?>
   <div class="main-image">
      <?php echo $image->displayMediaFull("",true,"rel='vm-additional-images'"); //display main image ?>
      <div class="iam2nd"><?php echo $image_hover->displayMediaFull("",true,"rel='vm-additional-images'"); //display main image ?></div>
      <div class="clear"></div>
   </div>
   <?php
}

2. Use CSS to switch images:

.main-image{position:relative;}
.main-image .iam2nd {position:absolute;top:0;left:0;right:0;bottom:0;opacity: 0;-moz-transition-duration: 0.4s;-webkit-transition-duration: 0.4s;-o-transition-duration: 0.4s;-ms-transition-duration: 0.4s;transition-duration: 0.4s;-webkit-transition-property: opacity;-ms-transition-property: opacity;-o-transition-property: opacity;-moz-transition-property: opacity;transition-property: opacity;}
.main-image:hover .iam2nd {opacity: 1;}
Title: Re: Image swap in product details page
Post by: VMTemplates.net on January 25, 2016, 17:39:19 PM
Cool! Have great day  :)
Title: Re: Image swap in product details page
Post by: PRO on January 25, 2016, 21:57:23 PM
kostas.s,
default vmart already has this


in
default_images.php

$imageJS = '
jQuery(document).ready(function() {
   Virtuemart.updateImageEventListeners()
});
Virtuemart.updateImageEventListeners = function() {
   jQuery("a[rel=vm-additional-images]").fancybox({
      "titlePosition"    : "inside",
      "transitionIn"   :   "elastic",
      "transitionOut"   :   "elastic"
   });
   jQuery(".additional-images a.product-image.image-0").removeAttr("rel");
   jQuery(".additional-images img.product-image").click(function() {
      jQuery(".additional-images a.product-image").attr("rel","vm-additional-images" );
      jQuery(this).parent().children("a.product-image").removeAttr("rel");
      var src = jQuery(this).parent().children("a.product-image").attr("href");
      jQuery(".main-image img").attr("src",src);
      jQuery(".main-image img").attr("alt",this.alt );
      jQuery(".main-image a").attr("href",src );
      jQuery(".main-image a").attr("title",this.alt );
      jQuery(".main-image .vm-img-desc").html(this.alt);
      });
   }
   ';
}


just change the   .click      to .hover

Title: Re: Image swap in product details page
Post by: kostas.s on January 26, 2016, 08:07:01 AM
Oh, I wasn't aware of that either. Thanks a lot for the tip.


Quote from: PRO on January 25, 2016, 21:57:23 PM
kostas.s,
default vmart already has this


in
default_images.php

$imageJS = '
jQuery(document).ready(function() {
   Virtuemart.updateImageEventListeners()
});
Virtuemart.updateImageEventListeners = function() {
   jQuery("a[rel=vm-additional-images]").fancybox({
      "titlePosition"    : "inside",
      "transitionIn"   :   "elastic",
      "transitionOut"   :   "elastic"
   });
   jQuery(".additional-images a.product-image.image-0").removeAttr("rel");
   jQuery(".additional-images img.product-image").click(function() {
      jQuery(".additional-images a.product-image").attr("rel","vm-additional-images" );
      jQuery(this).parent().children("a.product-image").removeAttr("rel");
      var src = jQuery(this).parent().children("a.product-image").attr("href");
      jQuery(".main-image img").attr("src",src);
      jQuery(".main-image img").attr("alt",this.alt );
      jQuery(".main-image a").attr("href",src );
      jQuery(".main-image a").attr("title",this.alt );
      jQuery(".main-image .vm-img-desc").html(this.alt);
      });
   }
   ';
}


just change the   .click      to .hover
Title: Re: Image swap in product details page
Post by: kostas.s on March 07, 2016, 10:27:46 AM
Hello, I need to ask you once again regarding the topic you helped me out a few weeks ago. Now I need to achive the same functionality (change thumbnail on mouse over) in category browse page - not in product details, with an additional image I have already uploaded.
In components/com_virtuemart/sublayouts/products.php there is:
   <?php
   $image = $product->images[0];
   echo $image->displayMediaThumb('class="browseProductImage"', false);  //this shows the original thumbnail
   ?>
But it seems that additional image $image_hover = $product->images[1] is inaccessible here, in order to use your code:
      <div class="iam2nd"><?php echo $image_hover->displayMediaThumb('class="browseProductImage"', false); ?></div>

(with displayMediaThumb function now as we are talking about category browse page thumbnails).
Can you help with that? Thanks.
Title: Re: Image swap in product details page
Post by: VMTemplates.net on March 07, 2016, 10:39:27 AM
Hi,

first of all please do not make the changes to an original VirtueMart files in ./components/com_virtuemart. Otherwise you will loose everything with another update...
Simply make an override in ./YOUR_TEMPLATE_NAME/html/com_virtuemart/sublayouts
You need to make a change to products.php file:

line:70:
               <a title="<?php echo $product->product_name ?>" href="<?php echo $product->link.$ItemidStr; ?>">
                  <?php
                  echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);
                  ?>
               </a>

Try this code:

               <a class="cat-img" title="<?php echo $product->product_name ?>" href="<?php echo $product->link.$ItemidStr; ?>">
                  <div>
                  <?php echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false); ?>
                  <div class="iam2nd-c"><?php echo $product->images[1]->displayMediaThumb('class="browseProductImage"', false); ?></div>
                  </div>
               </a>

CSS:
.cat-img > div {position:relative;}
.cat-img > div .iam2nd-c {position:absolute;top:0;left:0;right:0;bottom:0;opacity: 0;-moz-transition-duration: 0.4s;-webkit-transition-duration: 0.4s;-o-transition-duration: 0.4s;-ms-transition-duration: 0.4s;transition-duration: 0.4s;-webkit-transition-property: opacity;-ms-transition-property: opacity;-o-transition-property: opacity;-moz-transition-property: opacity;transition-property: opacity;}
.cat-img:hover > div .iam2nd-c {opacity: 1;}

NOTE! You may need to make some adjustments to the code to fit all. You may also use :hover for different child for example div.spacer to make it work when someone move the mouse over whole product handler tag.

Thanks,
Jason
Title: Re: Image swap in product details page
Post by: kostas.s on March 08, 2016, 07:27:55 AM
Quote from: VMTemplates.net on March 07, 2016, 10:39:27 AM
Hi,

first of all please do not make the changes to an original VirtueMart files in ./components/com_virtuemart. Otherwise you will loose everything with another update...
Simply make an override in ./YOUR_TEMPLATE_NAME/html/com_virtuemart/sublayouts
You need to make a change to products.php file:

line:70:
               <a title="<?php echo $product->product_name ?>" href="<?php echo $product->link.$ItemidStr; ?>">
                  <?php
                  echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);
                  ?>
               </a>

Try this code:

               <a class="cat-img" title="<?php echo $product->product_name ?>" href="<?php echo $product->link.$ItemidStr; ?>">
                  <div>
                  <?php echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false); ?>
                  <div class="iam2nd-c"><?php echo $product->images[1]->displayMediaThumb('class="browseProductImage"', false); ?></div>
                  </div>
               </a>

CSS:
.cat-img > div {position:relative;}
.cat-img > div .iam2nd-c {position:absolute;top:0;left:0;right:0;bottom:0;opacity: 0;-moz-transition-duration: 0.4s;-webkit-transition-duration: 0.4s;-o-transition-duration: 0.4s;-ms-transition-duration: 0.4s;transition-duration: 0.4s;-webkit-transition-property: opacity;-ms-transition-property: opacity;-o-transition-property: opacity;-moz-transition-property: opacity;transition-property: opacity;}
.cat-img:hover > div .iam2nd-c {opacity: 1;}

NOTE! You may need to make some adjustments to the code to fit all. You may also use :hover for different child for example div.spacer to make it work when someone move the mouse over whole product handler tag.

Thanks,
Jason

Hello and thank you for your reply, the problem is that variable $product->images[1] is not accessible at all by that page, it breaks everything. In the error_log file generated I see the message: PHP Fatal error:  Call to a member function displayMediaThumb() on a non-object in /home/.../products.php. It works perfectly in product details page though.
Title: Re: Image swap in product details page
Post by: Ghost on March 08, 2016, 07:46:18 AM
There seems to be a setting prodimg_browse which sets the number of images loaded, but it's not implemented. You can add additional images yourself:

$productModel = VmModel::getModel('product');
$productModel->addImages($products, '2');

Change 2 to whatever number of images you want to load.