Disable hover effect on product image thumbnails

Hi,

I am trying to change the way that the thumbnails are displayed under the main product image on the product page.

I need the hover effect to be disabled when hovering over the thumbnail images and for the thumbnail images to be displayed as the main image when the user clicks on the thumbnail.

How can I do this?

Hi,

You'll probably be able to do that by :
- Going to "Hiakshop->Display->Views"
- Editing the "show_block_img" file of the "product" view of your front-end template
- Change this line :

$attr = 'onclick="return window.localPage.openImage(\'hikashop_main_image\');"';

// $attr = 'onclick="return window.localPage.openImage(\'hikashop_main_image\');"';

$attr = 'onmouseover="return window.localPage.changeImage(this, \'hikashop_main_image'.$variant_name.'\', \''.$img->url.'\', '.$img->width.', 

$attr = 'onclick="return window.localPage.changeImage(this, \'hikashop_main_image'.$variant_name.'\', \''.$img->url.'\', '.$img->width.', 

That works perfectly...

The only issue I'm having now is that when I click on the main image which has been replaced with the thumbnail, it comes up with an enlargement of the default image: s293983206.websitehome.co.uk/elevateshop...k-claudia-court-shoe

Is there anything I can add to the code to fix this?

Hi,

I've just removed it, but the large image seems not to be clickable at all now?

s293983206.websitehome.co.uk/elevateshop...ck-charlize-stiletto

Hi,
Is there any way I can make the images enlarge on click, once they are in the main product box. At the moment when I click on it, it comes up with a pop up enlargement of the default image. See here s293983206.websitehome.co.uk/elevateshop...ck-charlize-stiletto

I've tried to edit the PHP within the show_block_image file, but with no success.

Thanks in advance

Hello,

I did take the // away, but when it was un-commented it did not work at all when I clicked on the main image to enlarge it.

See here: s293983206.websitehome.co.uk/elevateshop...k-claudia-court-shoe

Please help

You're an absolute star!! Thank you sooo much....works perfectly now

Hello Jerome, has the code changed since this was last posted as I tried it on my HikaShop deployment and I still get the hover effect? I've read the whole thread several times and tried various combinations of the code changes in show_block_image.php and nothing seems to make any difference? I'm looking at the file in the folder /components/com_hikashop/views/product/tmpl.

Thanks

I followed this instruction and the onmouseover effect is still happening. I just want it to not replace main image with moused over thumbnails. I comment out that line but when I look at the page source it's loading the onmouseover.

That is what I did. Didn't notice each template you have loaded for Joomla gets their own. One thing of note... Only commenting out that line changes onclick so that nothing was happening so I changed the script per your post. With mootools as the popup window it only opened the zoomed in image for the main and none of the thumbs (click on any thumb and main would load instead) but it did work with shadowbox (external).

I followed this guide and the images are swapping over when clicking on the child images however when you click on the large image its only enlarging the main first image not the image thats being displayed.

The guide displays some php code to swap out however this code doesn't exist in the latest version of Hikashop under 'show_block_img'

I cant find this code
window.localPage.openImage = function(id) {
if(!window.localPage.images[id])
window.localPage.images[id] = document.getElementById('hikashop_first_thumbnail');
window.localPage.images[id].click();
return false;
};

Hello, I have altered the script to this

e = e || window.event;
e.stopPropagation();
e.cancelBubble = true;
window.Oby.cancelEvent(e);
SqueezeBox.fromElement(window.localPage.images[id],{parse:'rel'});
//window.localPage.images[id].click();//
return false;

however it still only displays the first product image when enlarging any thumbnail.