Afficher/cacher image + texte masonry

Fermé
Alexia - 24 avril 2015 à 15:34
Bonjour,

Je viens vers vous après des recherches sur le net qui n'ont pas portés leurs fruits. Cela fait quelques semaines que je suis sur un petit bout de code que je n'arrive pas à faire fonctionner comme je veux.

L'idée de base est simple et très classique: j'ai plusieurs images sur une page et quand je clique sur l'une d'entre elle, j'affiche un petit texte explicatif.

Le problème: au clic, mes image "zoom" (j'utilise les scripts masonry). Quand je reclic sur l'image, elle diminue. Le texte s'affiche "correctement" au premier clic, mais quand je diminue l'image, le texte ne part pas (normal me direz-vous en voyant mon code, puisque la fermeture du texte est un lien à la suite du texte et ne prend pas en compte l'image).

Et c'est là que je coince, je ne sais pas comment faire pour mettre le code pour cacher mon texte sur l'image (comme c'est du js de masonry et que je ne suis pas forcement tres calée en js).

HTML
<div>
                        <a href="#" onclick="javascript:afficher_cacher('texte_1');"><img src="img/dentelle.png" class="item"  /></a>
                        <div id="texte_1" class="texte">Petit texte explicatif avec l'image 1.
                        <a onclick="fermer('texte_1');" href="#">Fermer</a></div>
                    </div>
                   <div>
                        <a href="#" onclick="javascript:afficher_cacher('texte_2');"><img onclick="fermer('texte_2');" src="img/com.png" class="item"  /></a>
                        <div id="texte_2" class="texte">Petit texte explicatif avec l'image 2.
                        <a onclick="fermer('texte_2');" href="#">Fermer</a></div>
                    </div>


JS
function afficher_cacher(id) {
    var divs = document.getElementsByTagName('div');
    
    for (var i=0; i<divs.length; i++) {
        if (divs[i].className=='texte') { 
            divs[i].style.display = "none"; 
        }
    } 
    document.getElementById(id).style.display = "block"; 
}

function fermer(id) {
    document.getElementById(id).style.display = "none";
}



Les code de masonry ont été téléchargé ici: http://masonry.desandro.com/

Si quelqu'un pouvait m'aider avant qu'il ne me reste plus un cheveux sur ma tête, ça serait super sympa