Jump to content

Product page thumb mouse over doesnt work

Recommended Posts


I m using the latest PS

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?


Link to comment
Share on other sites

Thnx for your reply Pascal

But as you can see on the PS demo site:


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 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?


Link to comment
Share on other sites

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}" />
 {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}
 {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.


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...