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 in line 72

2) In CSS I added of course:
3) Than supposing you have 4 columns view and original images set as 420px x 420px (like in my case), you add a jQuery code to your template:
Works fine.

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,

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,

Hi
Can I ask you for guidance on how to standardize the second image?

/new/images/com_hikashop/upload/thumbnails/420x420f/
The way it is said is not principled at all.
thnak you very much.

Hi,

You basically need to change the line:
jQuery(this).css('width','182px').height('182px').attr('src','/new/images/com_hikashop/upload/thumbnails/420x420f/'+obrazek)
You need to replace 182px byt the width and height of the thumbnails on your listing and change the path /new/images/com_hikashop/upload/thumbnails/420x420f/ to the path where the thumbnails are on your website.
It will probably be something like that: /images/com_hikashop/upload/thumbnails/XXXxYYY/
You need ot go in the folder /images/com_hikashop/upload/thumbnails/ via FTP and look at the available folders.
Also, this code requires jQuery to be available on the page.
It's probable that you have it, but it could be possible you don't.

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

Hi,

We actually added that capability recently:
www.hikashop.com/home/blog/471-hikashop-4-4-3.html#multi
So no need to change any code.