la photo de fiche produit : transformer le curseur en loupe

  • Posts: 22
  • Thank you received: 1
5 years 2 months ago #311017

-- HikaShop version -- : 4.2.1
-- Joomla version -- : 3.9.11
-- PHP version -- : 7.3.9

Bonjour,

Je découvre hikashop depuis une dizaine de jours pour ma boutique en ligne. je trouve presque toutes les infos qu'il me faut grâce à vos divers forums. N'ayant pas trouvé pour cette question la voici :

j'aimerais que la main qui sert de curseur sur ma photo de produit (quand on est dans le show-bloc-img) soit une petite loupe genre celle avec un +.
Il me semble qu'ainsi les visiteurs comprendraient mieux qu'ils doivent cliquer sur l'image pour la voir agrandie.
J'ai cherché dans l'affichage "vues" du bloc-img mais c'est un peu trop touffu.. pour moi...

Pourriez vous m'indiquer quelles lignes de code génèrent cette fonction ?

Merci d'effacer ce message pour la 2me fois je ne l'ai pas mis dans la bonne section

Last edit: 5 years 2 months ago by Valserine. Reason: asking to erase this second edition of the same post, still not in the right area of the forum

Please Log in or Create an account to join the conversation.

  • Posts: 82868
  • Thank you received: 13375
  • MODERATOR
5 years 2 months ago #311022

Bonjour,

Pas de code PHP à changer. Il suffit de rajouter un peu de CSS pour cela:

.hikashop_product_main_image_subdiv a {
    cursor: zoom-in;
}
www.hikashop.com/support/documentation/1...ize-the-display.html

Please Log in or Create an account to join the conversation.

  • Posts: 22
  • Thank you received: 1
5 years 2 months ago #311044

Bonjour,

en examinant le front-end custom css je trouve ceci :

}
.hikashop_product_image .hikashop_product_image_subdiv,
.hk_product_image .hk_subdiv {
position: relative;
text-align: center;
clear: both;
margin: auto;
}

est-ce bien dans ce bloc que je dois insérer le cursor: zoom-in; ?

Please Log in or Create an account to join the conversation.

  • Posts: 22
  • Thank you received: 1
5 years 2 months ago #311058

rebonjour,
j'ai donc inclus le code donné par Nicolas dans le bloc montré dans mon message précédent. et ça marche !!
certes seulement pour l'image principale mais c'est déjà super !

merci Nicolas !

Please Log in or Create an account to join the conversation.

  • Posts: 4747
  • Thank you received: 644
  • MODERATOR
5 years 2 months ago #311061

Bonjour,

Vous pouvez pour avoir le même effet sur les autres images (sous-images) en multipliant les commandes Css.
Pour trouver facilement les class des éléments html pour votre selector de css , mettez votre souris dessus, puis clique-droit => inspecter (ou inspector tool ou inspect element), un fenêtre s'ouvrira pour afficher l'Html vous permettant de voir la class de l'élément html.

Cordialement

Please Log in or Create an account to join the conversation.

  • Posts: 22
  • Thank you received: 1
5 years 2 months ago #311156

Merci Philip,

pour l'instant j'ai décidé de laisser le curseur loupe seulement sur l'image principale, et ça le fait bien...
d'autant que j'ai plein d'autres paramètres à potasser pour tirer le meilleur d'hikashop, qui est top je trouve. (je viens de virtuemart et quand ça change, ça change !!)
bon week-end

Please Log in or Create an account to join the conversation.

Time to create page: 0.060 seconds
Powered by Kunena Forum