[SOLVED] Image Mouse Roll Over Problem

[hurray]

When I roll my mouse over to the second thumbnail, instead of changing the picture to the thumbnail size that fits on the frame, it somehow zooms.
Please check the attached screen shots.
The first one shows how it looks. And the second one is after I do the mouse roll over on the second image.
Here's the URL:

http://shop.ametibetaine.com/plateaux-tibetains/316-pt01-plateau-tibetain-yeux-de-bouddha.html

[hurray]

Here's a part of the code from my product.tpl. I looked around in the forum to see if there was any solution posted but there were none even though few people seem to have had the same problem.

<!-- product img-->

       {if $have_image}
getImageLink($product->link_rewrite, $cover.id_image, 'large')}" {if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="bigpic"/>
       {else}
name|escape:'htmlall':'UTF-8'}" />
       {/if}


       {if count($images) > 0}
       <!-- thumbnails -->

       {if count($images) > 3}{l s='Previous'}{/if}


               {foreach from=$images item=image name=thumbnails}
               {assign var=imageIds value=`$product->id`-`$image.id_image`}

getImageLink($product->link_rewrite, $imageIds)}" rel="other-views" class="{if !$jqZoomEnabled}thickbox{/if} {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">
getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />


               {/foreach}


       {if count($images) > 3}{l s='Next'}{/if}

       {/if}
       {if count($images) > 1}
getProductLink($product)}" onclick="return (false);">{l s='Display all pictures'}{/if}

[razaro]

I got one error on your site

cssdropdown is not defined
script type="text/javascript" cssdropdown.startchrome("chromemenu")

and it is connected with Categories Bar module.I think that js file from that module is not loaded and causing problem to other js files like product.js.
So try this in modules/categoriesbar/categoriesbar.tpl in first change

src="./modules/categoriesbar/chrome.js"

to

src="{$modules_dir}categoriesbar/chrome.js"

[hurray]

Hi razaro,
I did what you had asked me to, but that did not solve it.

[razaro]

Yeah I see now it don't have error (except 2 missing images) and menu is working but it mess up the website.
You could try to completely remove that first line and then try.

And about original problem I think it is this code in product.js

var newSrc = domAAroundImgThumb.attr('href').replace('.jpg','-large.jpg');

it changes image source to

/316-1075/pt01-plateau-tibetain-yeux-de-bouddha-large.jpg

but correct path is

/316-1075-large/pt01-plateau-tibetain-yeux-de-bouddha.jpg

For now I am not sure how to correct it.
Are you images organized different then default prestashop ?

[hurray]

I do not think my images are organized differently.
Believe me, everything was working just fine before yesterday. Yesterday I called my hosting company to turn on the friendly URL option (generate htaccess), and once it was done, this problem appeared.
Could it be related to it?

[razaro]

Yes I forgot about friendly url, that is it.

Default Prestashop have

replace('thickbox','large');

and in product.tpl for thumb image code

getImageLink($product->link_rewrite, $imageIds, 'thickbox')

and you have original size picture

getImageLink($product->link_rewrite, $imageIds)

but you can't use replace() function and

replace('.jpg','-large.jpg')

don't work with friendly url on.

[hurray]

Hi razaro,
So what is the solution? What do I need to do and where to get it to work with friendly url on?

[razaro]

Ty this.
Find in js/product.js file this code

    if (domAAroundImgThumb.attr('href'))
   {
       var newSrc = domAAroundImgThumb.attr('href').replace('.jpg','-large.jpg');
       if ($('#bigpic').attr('src') != newSrc)

and change it to

    if (domAAroundImgThumb.attr('href'))
   {
       var re = new RegExp("(\\/(\\d)*\-(\\d)*)","g");
       var newSrc = domAAroundImgThumb.attr('href').replace(re,"$&-large");
       if ($('#bigpic').attr('src') != newSrc)

That should do it.
Other then that you can use thickbox image instead original but I see it doesn't look great.

[hurray]

Aren't you genius. That worked like a charm.
Tons of thanks.

[Jelmer de Jong]

I had the same problem and used the same solution. Worked perfectly! Thanks a lot!