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 : by : - And this line : By :

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,

Please remove the comment in order to keep Regards,

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

Hi,

You didn't made the modification I asked you.
Please do not comment this line: Regards,

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

Hi,

Yes, know the page is correct. But it wasn't during my last test.

So you can know change in the "show_block_img" view: By: Because you change the "hover" by "click" and because when you click on the main image it is like you clicked on the lastest selected thumbnail, it is like nothing happened.
So instead we will call the current thumbnail JS library.
( Note: that code is not compatible with Shadowbox )

Regards,

PS : We reply to all message in the forum, as fast as we can.
Sending me private message won't make me answer faster. But if you do it all the time, it could become the opposite effect.
Your are not the only person to put some question in our forum, so please wait like the others.
We know when we have to reply to a thread, the all support team know it.

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

Hi,

The main part code hasn't changed since the last time.
Even if the line isn't exactly the same, you still have a line which set the variable "$attr" to add the "onmouseover" content.
The goal is still to remove "onmouseover" by "onclick".

After that, you have to be sure that you're editing the view for the right front-end template.

Regards,

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.

Hi,

Are you sure that you made an override for the right front-end template ?
www.hikashop.com/support/support/documen...ize-the-display.html

Regards,

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

Hi,

That's right, since the patch was proposed (almost 2 years), the script in the product page has changed.
Did you also apply the patch in the post #133351 ?
Because the functions "openImage" changed, like the addition of the parameter "variant".

Regards,

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

Hi,

The code is a bit different now but it's still there: it's right at the end of the view file.

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.

Hi,

Hard to help without more context.
We would need to know what code you put/change where exactly and a link to the page with the issue to be able to understand the situation.