Supprimer zoom des miniatures sur la page produits, tout en gardant le zoom de "bigpic"

[NatJu]

Bonjour,

 

Après avoir modifié mon code, j'ai fait en sorte que mes miniatures de la page produit s'affichent dans "bigpic" (la grosse image produit) non plus grâce au hover, mais grâce à un clic.

Le clic sur les miniatures active aussi le "zoom" ou "thickbox", j'ai donc supprimé la class="thickbox" dans le lien <a> de product.tpl.

 

Cependant, après suppression de cette classe, le zoom n'est plus actif sur mes miniatures comme je le souhaitais, mais aussi sur la grosse image produit.

 

Je souhaiterais pouvoir garder cette fonctionnalité de zoom sur la grosse image produit (id="bigpic").

 

J'ai déjà essayé pas mal de choses et cherché des réponses sur la toile sans succès.

 

J'espère que mon explication est claire.

Merci d'avance,

 

Nathalie

[NatJu]

Bonjour, je fais un petit up de ce topic car ça fait deux jours que je cherche des réponses à travers la toile sans succès.

 

Quelqu'un aurait une idée? Une piste?

 

Nathalie

[Julien64]

Bonsoir,

 

 

Si on pouvait voir le site ça aiderait grandement car on ne sait pas vraiment la tête du code à l'heure actuelle...

N'hésitez pas aussi à donner des infos essentielles du type la version de votre Presta

[NatJu]

Bonsoir, merci de votre réponse!

Je travaille sur mon site en local, je ne peux donc pas vous donner de lien.

 

Voici la portion de code que je me suis évertuée à modifier dans product.tpl

J'avais juste retiré la class "thickbox" du <a> (ici en rouge) et essayé des tas d'autres choses:

<!-- right infos-->
<div id="pb-right-column">
 <!-- product img-->
 <div id="image-block">
 {if $have_image}
  <span id="view_full_size">
[color=#0000cd]<!--<a href="{$link->getImageLink($product->link_rewrite, $image.id_image, 'thickbox_default')}" rel="other-views" class="thickbox"-->[/color]
<img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')}"{if $jqZoomEnabled} class="jqzoom"{/if} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}"/>
[color=#0000cd]<!--</a>-->[/color]
<span class="span_link">{l s='Maximize'}</span>
  </span>
 {else}
  <span id="view_full_size">
<img src="{$img_prod_dir}{$lang_iso}-default-large_default.jpg" id="bigpic" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" width="{$largeSize.width}" height="{$largeSize.height}" />
<span class="span_link">{l s='Maximize'}</span>
  </span>
 {/if}
 </div>
 {if isset($images) && count($images) > 0}
 <!-- thumbnails -->
 <div id="views_block" class="clearfix {if isset($images) && count($images) < 2}hidden{/if}">
 {if isset($images) && count($images) > 2}<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="[color=#ff0000]thickbox[/color]{if $smarty.foreach.thumbnails.first} shown{/if}{if !$smarty.foreach.thumbnails.last} notLastMin{/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>

 

Le problème est que lorsque je retirais le "thickbox" afin de supprimer le zoom sur les miniatures, il était aussi supprimé sur l'image principale produit. J'ai donc essayé de rajouter le code en commentaire bleu, ce qui réactivait le zoom sur la grande image produit. Mais, étant donné que j'avais plusieurs images produit, une seule s'affichait dans la thickbox : la première.

 

J'ai trouvé une solution qui fonctionne ici :

http://www.prestasho...humbnail-click/

Elle consiste à modifier le fichier product.js

 

J'espère que ça aidera des gens ^^

Merci de votre intérêt!

Edited August 29, 2013 by NatJu (see edit history)

[14bis]

Salut à tous, une solution pour Prestashop 1.6 ?

 

[Tatort]

Ca m'aiderai aussi...

Perso j'en suis la. Version 1.6 de Prestashop

 

J'ai changé ça dans le fichier product.js :

 

//add a link on the span 'view full size' and on the big image
$(document).on('hover', '#view_full_size, #image-block', function(e){
    $('#views_block .shown').click();
});

 

 

Par ça :

 

//add a link on the span 'view full size' and on the big image
$(document).on('click', '#view_full_size, #image-block', function(e){
    $('#views_block .shown').click();
});

 

 

Mon problème c'est que maintenant... J'ai bien un clic et plus un hover sur les Thumbnails mais j'ai aussi l’effet fancybox

 

Une idée pour supprimer l'effet zoombox uniquement sur les miniatures ?

 

Merci d'avance