Change product image on hover in product listing

Hi,

I was wondering if there is a way to change the product image on hover. I have created a menu item that shows a product listing (div) of a specific category. My customer would like it if the main product image changes to the second product image when hovering. For an example of the desired effect take a look at www.zoekarssenshop.com/highlited.html

Would that be very complicated to build?

Thanks for any ideas.

Hi,

You will have to edit the view "product / listing_img_title" and in the image part, add a Mysql request to get the other image path. Add another img tag with the second image link and apply a display:none; css property.

Then add javascript event on the images to hide the first one and display the other one when mouse over.

So if you have development skills in PHP, Javascript it will be easy, else there is some things to learn before doing that

OK, thanks for the answer. I was afraid it would involve some knowledge of PHP and javascript. Maybe I'll try and see how far I get, but at least I can tell my client it's not that 'just a click on a button' to achieve this

Hey,

I also needed that function and I found a solution. It works if you have more than one image for product and shows the second one:

1) In my template override
/html/com_hikashop/product/listing_img_title.php
I added

<span class="obrazek2">
	<?php echo $this->row->images[1]->file_path;?>
	</span>

.obrazek2 {
	display:none
}

jQuery('.hkc-md-3.hikashop_product').each(function(){
		var obrazek = jQuery.trim(jQuery(this).find('.obrazek2').text());
		var obrazekOk = jQuery(this).find('img').attr('src');
		if (obrazek.length > 15)
		{
			jQuery(this).find('img.hikashop_product_listing_image').mouseover(function(){
			jQuery(this).css('width','182px').height('182px').attr('src','/new/images/com_hikashop/upload/thumbnails/420x420f/'+obrazek)
		})
			jQuery(this).find('img.hikashop_product_listing_image').mouseout(function(){
				jQuery(this).attr('src',obrazekOk)
			})
		}
		
	})

Jerome wrote: Hello,

Thank you for sharing.

Regarding your code, it is really specific to your website (the hard coded URL with the prefix and the thumbnail size).
I think such kind of implement could be done using CSS2/3 rules ; but for sure it would require to display the second image using the HikaShop image helper ; and not just display the file_path of that image.

Regards,

Hello, Does anyone know what does it take to imply this feature in the latest version of Hikashop?
Thank you all in advnce!
PS
I Tried the above solution but it doesn't work