[RESOLU] passer les vignettes de d'horizontal à vertical dans l'agrandissement de l'image...

[defaliz]

bonjour

en cliquant sur l'image principale du produit on obtient un agrandissement de celle-ci mais les petites images sont en lignes alors qu'elles devraient être en colonne...

comment régler le problème ?

je vous remercie

Edited December 14, 2023 by defaliz (see edit history)

[Mediacom87]

Bonjour,

comparez le css de votre site avec le css du thème d'origine pour obtenir le même résultat.

[defaliz]

Merci, j'ai vérifié déjà ça sans succès mais j'ai l'impression que c'est au niveau des autres fichiers CSS, il y en a pas mal ...

De plus avec l'outil "inspecter" du navigateur je n'arrive pas à voir le code de ce block...

[Mediacom87]

il y a 48 minutes, defaliz a dit :

 je n'arrive pas à voir le code de ce block...

Nous, encore moins que vous.

[defaliz]

le bout de code est dans le fichier product-images-modal.tpl

le bloc des vignettes correspond au div :

 ....<div class="js-modal-mask mask {if $imagesCount <= 5} nomargin {/if}">
              <ul class="product-images js-modal-product-images">
                {foreach from=$product.images item=image}
                  <li class="thumb-container js-thumb-container">.....
 

mais je ne vois pas comment passer les vignettes de la ligne à la colonne... est-ce lié à la taille de la div qui contraint les images ?

 

[defaliz]

bon j'ai trouvé

dans le theme.css la ligne 2183

j'ai commenté  {*display: flex;*}

et les vignettes sont en colonne...

voila

 

[Mediacom87]

il y a 25 minutes, defaliz a dit :

dans le theme.css la ligne 2183

On ne doit strictement jamais toucher ou modifier ce fichier.

Si vous souhaitez personnaliser votre thème au niveau CSS ou JS vous devez mettre les modifications dans le fichier custom.css ou custom.js qui doivent être enregistrés au même niveau que theme.css et theme.js.

[defaliz]

Oui je sais, j'ai un custom.css..

C'est juste une info ...

[Mediacom87]

Il y a 2 heures, defaliz a dit :

C'est juste une info ...

L'URL de votre site serait une information beaucoup plus pertinente pour regarder.

[defaliz]

c'est ici

https://plantandstories.com/substrats-et-accessoires/115-cache-pot-vibes-fold-rond-elho.html quand on agrandit le produit

en fait si on modifie le mode display:flex flex-direction: column ; dans le css, on modifie aussi dans la page du produit...

ce que j'essaie c'est d'avoir les vignettes en colonne uniquement dans le mode agrandissement du produit...

donc mon souci n'est pas résolu...

Edited December 13, 2023 by defaliz (see edit history)

[defaliz]

bon, correction,  je suis moyennement satisfait mais ça fonctionne...

je n'ai pas touché au css mais modifé le fichier product-images-modal.tpl en insérant la balise style comme ceci :

      <ul class="product-images js-modal-product-images" style="display:flex; flex-direction:column">

je sais que c'est pas bien pour les maj mais j'ai pas mieux... si il y a une autre astuce...

au passage je cherche à améliorer la loupe pour avoir quelque chose de plus visible...

merci

 

[Mediacom87]

Bonjour,

mettez ceci dans custom.css plutôt :

ul.product-images {
	display: inherit;
}

Pour la loupe, pareil, on regarde le thème d'origine et votre thème pour comparer.

[defaliz]

Merci beaucoup ! ça fonctionne parfaitement c'est plus élégant que ma modif...

pour la loupe, je reprend le site, le précédent dev à modifé pas mal de trucs..

si je prends une install presta 1.7.8 de base on a une belle loupe, j'imagine que c'est du javascript..(cf copie)

mais dans mon cas j'ai une loupe avec le style "cursor: zoom-in"

 

 

[Mediacom87]

Non, c'est du css tout simple.

[defaliz]

oui mais difficile de trouver où se situe les attributs dans le css car en chargeant l'outil de dev "inspecteur" du navigateur la loupe disparait...