Image swap in product details page

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

[kostas.s]

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]

Cool! Have great day 

[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.

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

[kostas.s]

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:

Code Select Expand

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