Cliquer sur une image pour faire apparaître du texte sur page CMS ? Help =)

[dkbane]

Bonjour,

 

Sur un site que je développe (presta 1.6), j'aimerais faire la chose suivante dans une page cms en particulier :

 

- afficher des images

- si l'on clique sur une image, du texte apparaît

- si on reclique le texte disparaît

 

Je sais comment faire sur une div en particulier mais là, dans une page CMS, je ne sais pas comment faire sans que cela impacte les autres pages.

 

Pouvez-vous m'aider ?

 

Au pire je suis disposé à acheter un module mais je ne trouve rien !

 

Merci !

[BeComWeb]

Du markup HTML, du CSS pour cacher ce markup par défaut et du JS pour déclencher les affichages/masquages.

 

Autrement dit le code HTML tu l'intègres via l'éditeur Wysiwyg comme d'habitude.

Tu ajoutes du CSS dans la feuille de style qui te plaira (cms.css étant le plus logique).

Tu crées ton code JS soit dans cms.js sot dans un nouveau fichier.

 

Et en gros ce code js il intercepte les événements click sur tes images.

Ensuite il traite les 2 cas de figure (texte apparent ou texte masqué) :

- si le texte est visible il le masque

- si le texte est masqué il l'affiche

 

Le plus simple serait de bosser avec une div qui contient image et texte et à laquelle on applique ou retire une classe CSS.

 

Markup

<div class="cms_illustration">
   <img src="..." />
   <p>Texte</p>
</div>

CSS

.illustration_cms p{
  display:none;
}
.illustration_cms.show_text p{
  display:block;
}

JS

$('.illustration_cms img').click(function(){
    $(this).parent('div').toggleClass('show_text');
})

Ca devrait faire le job

[dkbane]

Waw, merci !

 

J'ai fait tout ce que tu as dit mais je me retrouve avec le texte visible sous la photo (cache désactivé).

 

Une idée ?

[dkbane]

bon, déjà on avait d'un côté illustration_cms et de l'autre cms_illustration, ça ne pouvait pas marcher ^^

 

maintenant, le texte est bien caché mais il n'apparaît pas lorsque je clique !

[BeComWeb]

bon, déjà on avait d'un côté illustration_cms et de l'autre cms_illustration, ça ne pouvait pas marcher ^^

 

maintenant, le texte est bien caché mais il n'apparaît pas lorsque je clique !

 

Non mais entendons-nous bien, mon message précédent n'était pas à prendre stricto sensu

 

C'est une piste, un début de solution, un exemple hors contexte...

 

Ma réponse c'est : avec une combinaison de HTML / CSS / JS c'est facile à réaliser... pour peu qu'on ait des bases en développement web. Chose indispensable quand on veut mettre "les mains dans le cambouis".

 

D'ailleurs il ne fallait pas mettre "..." comme source de l'image ou "Texte" entre les balises <p>... 

 

Bon là la solution c'est peut-être de wrapper le code JS dans un $(document).ready().

Ou peut-être pas, il faudrait une url pour vérifier.

[dkbane]

Merci pour la réponse.

 

Je suis nul de chez nul en js, j'ai donc procédé en CSS ^^

 

Pour les intéressés, j'ai reproduit ce code en l'adaptant :

https://jsfiddle.net/tEev7/

[BeComWeb]

On sort un petit peu du cahier des charges (affichage au survol et non au clic) mais ça fait le job aussi.

Félicitations en tout cas.

Il y a 2 bons tutos Jquery sur openclassrooms qui t'aideront à progresser.

Donc je t'invite à les lire... et à passer le topic sur "[Résolu]" bien sûr