Author Topic: Image swap in product details page  (Read 4577 times)

kostas.s

  • Beginner
  • *
  • Posts: 10
Image swap in product details page
« 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.

VMTemplates.net

  • 3rd party VirtueMart Developer
  • Jr. Member
  • *
  • Posts: 112
  • VirtueMart Templates Developer
    • VirtueMartTemplates.net
  • VirtueMart Version: 3.2.24
Re: Image swap in product details page
« Reply #1 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;}
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

  • Beginner
  • *
  • Posts: 10
Re: Image swap in product details page
« Reply #2 on: January 25, 2016, 11:32:56 am »
This worked perfectly, thanks a lot! Even better with CSS instead of JS!

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

  • 3rd party VirtueMart Developer
  • Jr. Member
  • *
  • Posts: 112
  • VirtueMart Templates Developer
    • VirtueMartTemplates.net
  • VirtueMart Version: 3.2.24
Re: Image swap in product details page
« Reply #3 on: January 25, 2016, 17:39:19 pm »
Cool! Have great day  :)
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

  • Global Moderator
  • Super Hero
  • *
  • Posts: 10377
  • VirtueMart Version: 3+
Re: Image swap in product details page
« Reply #4 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

J3.9+ VM 3.4.2
Slowest Page Speed Score (88) (Category)
Fastest Page Speed Score (94-96) (productdetails)

kostas.s

  • Beginner
  • *
  • Posts: 10
Re: Image swap in product details page
« Reply #5 on: January 26, 2016, 08:07:01 am »
Oh, I wasn't aware of that either. Thanks a lot for the tip.


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

  • Beginner
  • *
  • Posts: 10
Re: Image swap in product details page
« Reply #6 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.

VMTemplates.net

  • 3rd party VirtueMart Developer
  • Jr. Member
  • *
  • Posts: 112
  • VirtueMart Templates Developer
    • VirtueMartTemplates.net
  • VirtueMart Version: 3.2.24
Re: Image swap in product details page
« Reply #7 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
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

  • Beginner
  • *
  • Posts: 10
Re: Image swap in product details page
« Reply #8 on: March 08, 2016, 07:27:55 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

  • Jr. Member
  • **
  • Posts: 419
Re: Image swap in product details page
« Reply #9 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:

Code: [Select]
$productModel = VmModel::getModel('product');
$productModel->addImages($products, '2');
Change 2 to whatever number of images you want to load.