Récupération de l'id d'un élément par clic

Bien le bonjour !

Dans ma base de données, j'ai une table 'photos' et une table 'miniatures'.
Dans ma galerie, les miniatures s'affichent dynamiquement. Le but, c'est d'afficher un pop up quand on clique sur une miniature, lequel pop up contient la photo correspondante provenant de la table 'photos'.
Je dois donc récupérer l'ID de la miniature sur laquelle je clique pour l'envoyer au php qui m'affiche la grande photo. Et je n'y arrive pas !!!! J'ai essayé plein de choses, pourtant....

Un aperçu du code php:

<div class="contenu">
            <div class="gallery">
                <h1>Le Mojo au FIMU en 2014</h1>
                <div class="miniatures">
                    <ul>        
                    <?php
                        $sql = 'SELECT id,chemin,texte FROM miniatures'; 
                        $sql3 = 'SELECT id,chemin,texte FROM photos';
                        $req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error()); 
                        $req3 = mysql_query($sql3) or die('Erreur SQL !<br>'.$sql3.'<br>'.mysql_error()); 
                        $sql3 = 'SELECT id,chemin,texte FROM photos';
                        while($data = mysql_fetch_assoc($req)) {
                            $data3 = mysql_fetch_assoc($req3);
                            echo '<li class="mini"><img id="'.$data['id'].'"class="petiteimage" src="'.$data['chemin'].'" alt="'.$data['texte'].'"></li>';
                            }; 
                  echo '</ul> 
                </div>
            </div>
            <div class="pop">
               <img id="'.$data3['id'].'"src="'.$data3['chemin'].'" alt="'.$data2['texte'].'">';
                    mysql_close();
                ?>
            </div>
        </div>

Et mes bribes de Jquery

jQuery(document).ready(function(){
    
    $(".petiteimage").hover(function(){
        $(this).toggleClass("grossi");
    });
    
    $(".petiteimage").click(function () {
        $(".pop").fadeIn(300);
        
    });

    $(".pop > span, .pop").click(function () {
        $(".pop").fadeOut(300);
    });
     
        $('.mini').click(function(){
        var id = this.id;
        // requete Ajax en utilisant la variable id
    });
            $.ajax({
            type: "POST",
            url: "pict2.php",
            data: DATA,
            cache: false,
            success: function(data){
                $("#number").html(data); 
            }
        });    
        return false;
    });
});

Help ?
Modifié par AlexPatriez (02 Mar 2015 - 11:58)

Bonjour. Il y a pas mal de problèmes de compréhension.

Pour commencer il ne faut plus utiliser mysql_query et l'extension mysql, mais mysqli ou PDO.

Pourquoi les miniatures et les photos ne sont pas dans la même table ?

Ensuite, pour donner une piste sur le fonctionnement d'une galerie de ce type, voici un code HTML standard pour la faire, le PHP devra donc produire un code similaire au suivant:

<ul>
    <li><a href="images/big/mycat.jpg"><img src="images/thumbs/mycat.jpg" alt="Mon chat"></a></li>
    <li><a href="images/big/mycar.jpg"><img src="images/thumbs/mycar.jpg" alt="Ma bagnole"></a></li>
    <li><a href="images/big/me.jpg"><img src="images/thumbs/me.jpg" alt="Moi"></a></li>
</ul>

Ensuite la galerie est affichée en JS (interception des clicks, affichage de l'image en href dans une popin et l'affaire est belle). Toutes les visionneuses que tu trouveras en ligne fonctionne sur ce principe.

Merci pour la syntaxe, je débute ! Je vais regarder ça...
En fait je dois changer ça:

$req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error()); 

en enlevant mysql_query si j'ai bien compris...

Par ailleurs j'aurais aimé ne pas avoir recours au <a> , vu que je ne souhaite pas recharger la page...
Modifié par AlexPatriez (02 Mar 2015 - 12:36)

Bonjour,

L'élément a ne pose aucun problème : comme le propose kustolovic, le clic est intercepté via JS et l'image affichée dans un popin (fenêtre modale). C'est comme ça que fonctionnent beaucoup de galeries d'images, telle que celle-ci par exemple

Merci à tous les deux, je vais continuer à examiner ça.

Audrasjb, ton exemple ne pose pas de problème en dynamique ?

C'est bon !

un bout du php :

     <div class="gallery">
                <h1>Le Près-la-Rose 2013</h1>
                <div class="miniatures">
                    <ul>        
                        <?php
                        $sql = 'SELECT id,chemingrande,texte,lieu,cheminmini FROM photos WHERE lieu="preslarose2013";'; 
                        $req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error()); 

                        while($data = mysql_fetch_assoc($req)) {

                            echo '<li class="mini"><img id="'.$data['id'].'" class="petiteimage" src="'.$data['cheminmini'].'" alt="'.$data['texte'].'"></li>';

                            }; 
                        ?>
                    </ul> 
                </div>
            </div>
        </div>
        
        <footer>
             <nav>
                 <a href="index.html">Accueil</a>
                 <a href="music.php">Music</a>
                 <a href="theband.php">The band</a>
                 <a href="dates.php">Dates</a>
                 <a href="https://www.facebook.com/mojohandbelfort" target="_blank"><img alt="icone facebook" src="imagesmojo/facebook.png" width="20"></a>           
             </nav>
             <p>The New Studio Z  2015</p>
        </footer>
    </body>
</html>


<div class="pop">
    <img id="fenetre" src="">  
</div>

et le js :

 $(".petiteimage").click(function () {
        var chemin =  this.src;
        console.log (chemin);
       chemin = chemin.substr(34,50);
        console.log (chemin);
        chemin = "imagesmojo/"+chemin;
        console.log (chemin);
        document.getElementById("fenetre").src = chemin;
    }); 

ça fonctionne impecc.

Merci à vous en tout cas !