Crée un pop up textuel depuis une image sur mon wordpress [Résolu/Fermé]

Signaler
Messages postés
48
Date d'inscription
jeudi 27 novembre 2014
Statut
Membre
Dernière intervention
19 septembre 2016
-
Messages postés
48
Date d'inscription
jeudi 27 novembre 2014
Statut
Membre
Dernière intervention
19 septembre 2016
-
Bonjour, suite a mon projet en entreprise je suis en passe de finir mon wordpress
Mais voila je bloque sur l'utilisation des pop ups car je cherche le moyen de crée un pop up en cliquant sur une image de mon site


exemple wordpresseur: quand l'on clique sur le détail d'une extension ou thème
- fond devient noir claire
- page centré qui s'affiche
- image et texte à lire + menu déroulant si cela est long

Merci de me répondre au plus vite
si vous comprenais mon besoin faite le moi savoir
merci d'avance

1 réponse

Messages postés
5834
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
7 novembre 2020
1 134
Bonjour
tapes plugin popup wordpress sur google tout simplement et tu trouveras plein de plugins, tu n'auras plus qu'a les tester
Messages postés
48
Date d'inscription
jeudi 27 novembre 2014
Statut
Membre
Dernière intervention
19 septembre 2016

Merci de ta réponse "elgazar"
mais je le fais depuis deux semaine déjà.
mon ami google ne peux m'aider, je cherche vraiment un dans le style décrit en en-tête
pop-up en cliquant sur une image avec tout le décriptif de l'image
exemple: un portable -----> aprés un clique ----> pop-up avec la configuration
voiture -----> après un clique -----> pop-up avec les caractéristique technique

je cherche vraiment que cela s'ouvre dans un pop-up en restant gratuit
c'est le seul détail qui me manque pour mon site wordpress :/
auriez-vous une piste plus précise s'il vous plaie
Merci D'avance
Messages postés
5834
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
7 novembre 2020
1 134
ce que tu demandes c'est le comportement normale d'une popup donc je vois pas où est le problème même un script javascript peut faire l'affaire par contre si tu veux qu'elle soit un peu plus jolie que la simple box windows, penche-toi du coté des fenêtres modales en css3

code et démo sur cette page clique sur le bouton ouvrir l'exemple, au milieu de la page
Messages postés
48
Date d'inscription
jeudi 27 novembre 2014
Statut
Membre
Dernière intervention
19 septembre 2016

bonjour elgazar, suite a la lecture de votre page je trouve cela très compliqué à mettre en place
J'ai bien vu le pop-up "Ouvrir l'exemple" j'aime bien mais c'est quel script de la page du coup car cela fais que 1 ans que je suis dans les codes.
car selon vous ou devrais-je mettre ce script dans mon wordpress? Dans la page ou je veux le voir j'ai essayé sans succès
Dans mes feuille css? si c'est le cas comment je le ferais répondre sur ma page wordpress?
Mon thème wordpress: OneTone
Messages postés
5834
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
7 novembre 2020
1 134
le code complet avec les css et le code html est sous le titre " exemple complet avec style"

Pour le mettre dans wordpress , la méthode la plus simple est de mettre le code css sauf les deux balises <style> du début et de fin dans le fichier style.css de ton thème.


ensuite tu récupére le code html, tu va dans l'édition de ton article, tu clique sur l'onglet éditeur texte et tu colles le code. Tu n'a plus qu'a le modifier pour mettre un lien en image et modifier les autres paramètres (titre, description, etc) par exemple
<div id="oModal" class="oModal">
<div>
<header>
<a href="#fermer" title="Fermer la fenêtre" class="droite">X</a>
<h2>le titre de ta popup </h2>
</header>
<section>
<p>Contenu de la popup </p>
<section>
<footer class="cf">
<a href="#fermer" class="btn droite" title="Fermer la fenêtre">Fermer</a>
</footer>
</div>
</div>

<a href="#oModal"><img src="adresse réelle de l'image" alt=alt de l'image" width="591" height="443" class="alignnone size-medium wp-image-2101" /></a>


Pour récupérer le lien de l'image, il suffit de cliquer sur "ajouter media" dans l'éditeur et de sélectionner ton image, tu verras un code img src dans l'éditeur texte et colle le a la place du texte en gras dans le lien puis efface celui que wordpress vient de créer (tu n'en a plus besoin)
Messages postés
48
Date d'inscription
jeudi 27 novembre 2014
Statut
Membre
Dernière intervention
19 septembre 2016

Merci cela est l'une des solution les plus efficace que j'ai pu avoir merci beaucoup a toi elgazar ^^