Product page thumb mouse over doesnt work

[Ozgur34]

Hi

I m using the latest PS 1.5.4.1

As default on products page there is large product image and under it there are 4 thumbs (I uploaded 4 images for that sample product). And when I click on large image it opens in thickbox the mega image. So up to here all works fine. Only thing doesnt work is this:

See the PS demo site. As you mouse over the thumbs the larger image above changes relatively too. But on mine it doesnt do such mouse over thing. What do you think that I missed a file or which file I need to edit to be able to see that thumbs mouse over to display larger image function work?

Thanx

[PascalVG]

Hi Ozgur,

I think you can turn this on in Preferences->Products,

scroll down until you see an option:

Enable JqZoom instead of Thickbox on the product page

 

Turn this ON.

 

Hope this helps,

pascal

[Ozgur34]

Thnx for your reply Pascal

But as you can see on the PS demo site:

http://demo-store.prestashop.com/en/evening-dresses/54-bon-chic-bon-genre-silk-dress.html

On that demo site Thickbox is enabled not JqZoom and still mouse over works. Pls move your mouse over thumbs you ll see just hovering changes the larger image. Which I want like that. But with some reason it doesnt work on mine. I uploaded the original PS 1.5.4.1 tpl and css files. But I m guessing maybe some JS issue or something else. My question is this: Which files are related to this thumbs mouse over. I checked tpl and css and js and use the original files. So what to edit to make it work?

thnx

[PascalVG]

The thumbs are 'coded' in themes/<your theme folder>/product.tpl

 

 <!-- thumbnails -->
 <div id="views_block" class="clearfix {if isset($images) && count($images) < 2}hidden{/if}">
 {if isset($images) && count($images) > 3}<span class="view_scroll_spacer"><a id="view_scroll_left" class="hidden" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Previous'}</a></span>{/if}
 <div id="thumbs_list">
  <ul id="thumbs_list_frame">
   {if isset($images)}
 {foreach from=$images item=image name=thumbnails}
 {assign var=imageIds value="`$product->id`-`$image.id_image`"}
 <li id="thumbnail_{$image.id_image}">
  <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')}" rel="other-views" class="thickbox{if $smarty.foreach.thumbnails.first} shown{/if}" title="{$image.legend|htmlspecialchars}">
   <img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium_default')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
  </a>
 </li>
 {/foreach}
   {/if}
  </ul>
 </div>
 {if isset($images) && count($images) > 3}<a id="view_scroll_right" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Next'}</a>{/if}
 </div>
 {/if}
 {if isset($images) && count($images) > 1}<p class="resetimg clear"><span id="wrapResetImages" style="display: none;"><img src="{$img_dir}icon/cancel_11x13.gif" alt="{l s='Cancel'}" width="11" height="13"/> <a id="resetImages" href="{$link->getProductLink($product)}" onclick="$('span#wrapResetImages').hide('slow');return (false);">{l s='Display all pictures'}</a></span></p>{/if}

 

 

Picture change looks like to happen in themes/<your theme folder>/js/product.js

displaymage() function.

 

didn't make a study out of it though... But maybe here's a start for you.

pascal