Comment faire un zoom dans product-list.tpl ?

[ttl5v]

Bonjour à tous !

 

Voilà, je suis vraiment une truffe en développement et pas moyen de trouver comment faire...

Je souhaiterais mettre en place sur mon Prestashop un zoom sur la photo dans la liste des produits.

En résumé, éviter de passer par la page produit pour voir en grand la photo (j'ai mes raisons).

 

Ca se complique en plus car j'ai une photo transparente qui passe dessus chacune de mes photos afin d'y mettre un canapé...

Je vous mets l'URL du site afin que vous puissiez comprendre le but de tout ça

 

http://www.jaimemonmur.com/18-faune

 

Je modifierais plus tard mon post, pour éviter le référencement dessus LOL

Donc mon but ici est de faire un zoom Jquery dessus... Mais à quel endroit je dois modifier mon code, et surtout quoi mettre ?

 

{if isset($products)}

<!-- Products list -->

<ul id="product_list" class="clear">

{foreach from=$products item=product name=products}

<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">

<div class="center_block">

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'liste')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($listeSize)} width="{$listeSize.width}" height="{$listeSize.height}"{/if}/>

<div style="float:left; position:absolute; margin: -202px 0 0 0; z-index:1;"><a href="{$link->getImageLink($product.link_rewrite, $product.id_image, 'large')}"><img width="200" height="200" style="border: 0px;" src="http://www.jaimemonmur.com/themes/jaimemonmur/img/bg-prix1.png"></a></div>

<h3>{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}<a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h3>

<p class="product_desc">{$product.description_short|truncate:360:'...'|strip_tags:'UTF-8'}</p>

</div>

<div class="right_block">

{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>

{elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="discount">{l s='Reduced price!'}</span>{/if}

{if isset($product.online_only) && $product.online_only}<span class="online_only">{l s='Online only!'}</span>{/if}

{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}

<div class="dfPrice">

{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}

{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}</span>{/if}

</div>

{/if}

</div>

</li>

{/foreach}

</ul>

<!-- /Products list -->

{/if}

[ttl5v]

Version du site : 1.4.7.3

[ttl5v]

Personne n'a de solution ? je précise que le canapé en png dessus ne sera pas à mettre en grand, c'est juste pour montrer ce que cela peut donner de loin mais en zoom c'est juste la photo qui y sera...

Edited September 7, 2012 by ttl5v (see edit history)