RESOLU:pb de calcul de largeur thumbs_list

[u2popart]

Bonjour a tous
J'ai achete un template, que j'ai pas mal modifie design, qq codes.. mais j'ai un pb quand je veux faire des declinaisons de pdts, ce qui rajoute un menu deroulant a droite de l'image, mes thumbs images se decalent vers le bas et ne sont plus cote a cote. regardez sur cette page http://u2popart.com/new-york/1-love-design-new-york.html

jai trouve la solution sur la page en elle meme .html, il ne calcule que la taille des img (70px mutiplie par 2=140) MAIS il ne prend pas en compte la marge de 10px Enfin je pense que c'est ca le probleme!!

Avec firebug je corrige ce probleme en mettant donc 160px sur thumbs_list li

mais je ne sais pas ou le modifier pour le voir afficher sur ttes mes pages.
Merci de votre aide

[jeckyl]

Salut,

as tu regardé comment c'était traité sur le template de base de Prestashop comme la présentation est identique ?

[Vincent Decaux]

Il faut que tu modifies le fichier product.tpl de ton thème.

Tu trouves ces lignes (ligne 155 environ) :

></pre>
<ul>

En modifiant le 'width = 80', tu joues sur la largeur totale.
Par contre sur ton thème, elle est de 143px ... Je ne sais pas quelle opération est faite ?!

[u2popart]

merci vincent mais je ne trouve pas du tt cette ligne dans mon fichier product.tpl
la seule chose qui parle d'images est ici:

<!-- 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" width="{$largeSize.width}" height="{$largeSize.height}" />
       {else}
name|escape:'htmlall':'UTF-8'}" />
       {/if}


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



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

getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="thickbox {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}
{*        {if count($images) > 1}
getProductLink($product)}" style="display:none;" onclick="$('a#resetImages').hide('slow');return (false);">{l s='Display all pictures'}{/if}*}

[u2popart]

et mon .css
a propos du id=thumbs_list j'ai ca:

#views_block {width:230px;height:70px;margin:10px 0 0 0;padding:10px 0 0 0;border-top:1px solid #e2e4e8;}
#thumbs_list {}
#thumbs_list ul {width:240px;overflow:hidden;}
#thumbs_list li {width:70px;height:70px;float:left;cursor:pointer;margin:0 10px 0 0;}
#thumbs_list li a img {width:70px;height:70px;}

j'ai essaye via firebug de changer dans le css ca ne change pas..
par contre quand je change dans le html cree ca marche..il faudrait donc interagir avec la creation du fichier html

[Vincent Decaux]

Le souci vient donc du thème à priori.
Il faut remplacer la ligne :

></pre>
<ul>

par :

></pre>
<ul> 

Et jouer sur le paramètre width = 80, mais dans cette configuration, ça devrait être bon.

[u2popart]

merci encore vincent
je viens de le faire ca n'a rien change..
je ne comprends vraiment pas, regarde sur cette page, j;ai 2 images aussi qui se mettent bien cote a cote car je n;ai pas mis l'option declinaison et je nai donc pas le menu deroulant, par contre la description est plus grande sur la droite mais ca marche bien:
http://www.u2popart.com/usa/39-love-design-san-francisco.html

alors que sur la page: http://u2popart.com/new-york/1-love-design-new-york.html
tjrs pareil!!! je n'y comprends rien
merci de m;aider

[u2popart]

re vincent, apres plein d'essais j'ai reussi, en fait j;ai recuperer le code du template free de prestashop sur product.tpl et le css que j;ai modifie aussi, ca donne ca:
global.css

#views_block {
   margin: 10px auto;
   width: 230px;
   border-top:1px solid #e2e4e8;
   padding:10px 0 0 0;
}
#thumbs_list {
   overflow: hidden;
   float: left;
   width: 240px
}
#thumbs_list ul {
   padding-left: 0;
   list-style-type: none;
   margin-top: 5px
}
#thumbs_list li {
   float: left;
   cursor: pointer;
   width: 80px;
   height: 80px
}
#view_scroll_left, #view_scroll_right {
   background: url('../img/thumbs_left.gif') no-repeat center;
   text-indent: -3000px;
   width: 9px;
   height: 18px;
   float: left;
   margin-top: 30px;
   padding-right: 4px;
   padding-left: 4px
}
#view_scroll_right { background-image: url('../img/thumbs_right.gif') }
span.view_scroll_spacer {
   float: left;
   width: 17px;
   height: 80px
}

et product.tpl:

<!-- 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, 'thickbox')}" rel="other-views" class="thickbox {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)}" style="display:none;" onclick="$('a#resetImages').hide('slow');return (false);">{l s='Display all pictures'}{/if}

merci de m'avoir mis sur la voix
je ne sais pas ou je doit ecrire resolu?

[jeckyl]

En gros vous avez fait ce que j'avais dit en reprenant le code d'origine du template de base de Prestashop ...

[u2popart]

oui a peu pres mais je ne pensais pas au depart avoit a change tout ca.. merci en tout cas.
par contre maintenant je ne sais pas si c'est a cause de ca ou si j;ai un probleme serveur mais il ne m'affiche plus les photos quand j'en upload de nouvelles!!!!

[Vincent Decaux]

@jeckyl
Qui a-dit le contraire ? :-P
Je prends tous les mérites avec ton idée ! ^^

Non il n'est jamais facile de s'y retrouver dans le fichier product.tpl ! J'ai préféré donner les lignes, mais j'avoue qu'il est toujours bon d'avoir un thème non modifié sous les yeux.
Je ne pense pas que ce soit à cause de notre modification, car elle touche uniquement le template. Le problème est résolu au fait ?

[u2popart]

non je suis dessus la, en fait jai voulu agrandir ma thickbox, de la passer de 600x600 a 800x800 il me met erreur est survvenue reessayer ulterieurement!! en fait il me regenere certaines photos (les 3/4 de mes pdts) mais bloque tjrs au meme produit!! je ne comprends pas...
exemple: http://u2popart.com/57-volkswagen-van-black-white.html
cela vient il de mon serveur? ou erreur de presta?

[ccyyrriillee]

Bonjour,

Je dépoussière ce post sur lequel je viens de tomber en cherchant une solution à mon problème (qui est le même bien évidemment...)
Par contre quand je joue sur la valeur du width=80 dans mon product.tpl ça ne change rien du tout, la valeur calculée reste obstinément la même (soit 243px au lieu des 261px que je veux obtenir).

Je force le truc avec un width:261px!important dans le css et ça fonctionne mais ça me pose question.

Si quelqu'un peut m'expliquer ça je suis preneur.

Merci d'avance...

[Tramber]

Je tombe par hasard sur ce post pour un autre problème similaire...
Je sais pas si t'as trouvé ccyyrriillee mais moi j'ai fais ça :

></pre>
<ul>

et ça marche.
Si ça peut aider...

Tramber

[Tramber]

Heu en fait j'ai résolu mon problème,
j'ai réussit à aficher les thumbs sur 3 lignes de 3 colonnes, mais encore un petit bug dans le scroll.

Pour revenir à ce que j'ai écris au dessus, il faut aussi changer dans themes/tontheme/js/product.js

dans ce cas à la ligne 318 env. :

$('#thumbs_list_frame').width((parseInt(($('#thumbs_list_frame >li').width())* i) + 3) + 'px'); //  Bug IE6, needs 3 pixels more ?

enfin je ne pense pas dire de bétises, mais pour mon souci j'ai du modifier cette ligne pour que le calcul de la largeur soit enfin correcte.