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

Image swap in product details page

Started by kostas.s, January 21, 2016, 00:03:47 AM

Previous topic - Next topic

kostas.s

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.

VMTemplates.net

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;}
We develop VirtueMart templates since 2008
https://www.virtuemarttemplates.net/
Join the VirtueMart Templates Club today and get an access to over 60 VirtueMart templates
https://www.virtuemarttemplates.net/template-club.html
If you need a custom VirtueMart Template design please visit https://www.virtuemarttemplates.net/custom-virtuemart-template-design.html
Visit our new shop https://demo.virtuemarttemplates.net/
Join the VirtueMart Templates Club, purchase the template or order one of our services like Hosting, Website Maintenance, Security and Optimization, Template Customization and more

kostas.s

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;}

VMTemplates.net

We develop VirtueMart templates since 2008
https://www.virtuemarttemplates.net/
Join the VirtueMart Templates Club today and get an access to over 60 VirtueMart templates
https://www.virtuemarttemplates.net/template-club.html
If you need a custom VirtueMart Template design please visit https://www.virtuemarttemplates.net/custom-virtuemart-template-design.html
Visit our new shop https://demo.virtuemarttemplates.net/
Join the VirtueMart Templates Club, purchase the template or order one of our services like Hosting, Website Maintenance, Security and Optimization, Template Customization and more

PRO

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


kostas.s

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

kostas.s

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.

VMTemplates.net

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
We develop VirtueMart templates since 2008
https://www.virtuemarttemplates.net/
Join the VirtueMart Templates Club today and get an access to over 60 VirtueMart templates
https://www.virtuemarttemplates.net/template-club.html
If you need a custom VirtueMart Template design please visit https://www.virtuemarttemplates.net/custom-virtuemart-template-design.html
Visit our new shop https://demo.virtuemarttemplates.net/
Join the VirtueMart Templates Club, purchase the template or order one of our services like Hosting, Website Maintenance, Security and Optimization, Template Customization and more

kostas.s

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.

Ghost

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.