Change product image on Click instead of Mouseover

[Emmanuel Paris]

In the product page,
I want to change the product image when the user CLICK on a thumbnail instead of MOUSEOVER.

I see interesting things in product.tpl and mytheme/js/product.js
But can't make it happen.

Please help !
:-)

[rocky]

It looks like it is the following code on lines 347-351 of product.js (in PrestaShop v1.3.1) that does the hover effect:

//hover 'other views' images management
$('#views_block li a').hover(
   function(){displayImage($(this));},
   function(){}
);

Change it to the following to make it a click event instead of a hover event:

//hover 'other views' images management
$('#views_block li a').click(
   function(){displayImage($(this));}
);

The only problem is that you now have two click event. One that does the hover effect and one that displays the thickbox image. Both will happen at the same time now. To remove the thickbox popup, change line 118 (in PrestaShop v1.3.1) of product.tpl in your theme's directory from:

<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">

to:

<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" onclick="return false" title="{$image.legend|htmlspecialchars}">

[Emmanuel Paris]

This is brillant !
Thanks so much, Rocky...
It works.

[Emmanuel Paris]

The only problem is that now clicking on the big image always show the same cover default image of the product.
Like if the script didn't knew anymore which thumbnail is currently displayed as the big image.

Any idea Mr Rocky ?

[rocky]

I've had a closer look at this. It turns out that it's impossible to have the thickbox work for the big image for not for the thumbnail images. I've tried everything I can think of, but nothing worked. The only solution is to disable thickbox altogether. I've updated my code above.

[Emmanuel Paris]

I will have a more indepth look at this and will post solution here if I find it. Thanks.

[chows]

I will have a more indepth look at this and will post solution here if I find it. Thanks.

any luck so far? i'm facing this issue as well.

[ImpulsoTecnologico]

Thanks rocky, it worked for me. You're always of great help.

[saurabhdrish]

thanks alot it also work for me...

[cmaaga]

@rocky Ok, so i try everything, too and I can't enable thickbox onclick bigpic. But maybe i can use something another: lightbox plugin? I need full size image gallery but i need change image onclik not mouse hover. Any idea?

[perusi]

Mr. Rocky any idea for keeping the mouseover but with a SetTimeOut of 2 seconds? I'm thinking that mouseover is kept and if a visitor keeps the mouse over a thumbnail for a period of 2 seconds then the bigimage is changed, otherwise nothing happens... i think this may be a solution because when there are a lot of thumbnails and they are displayed in a row, a visitor may accidently mouseover another thumbnail if he tries to go with the mouse on the big pic for the zoom efect.... what do you say?

[mtm]

You rock, rocky!!!

Thanks! That's exactly what i was looking for.