Discussion :

[Invité]

Bonjour à toutes et à tous,

J'essai de produire un script, qui permet à l'utilisateur, d'accompagner son texte avec l'image de son choix, cette dernière étant contenue dans une galerie générée par du PHP.

Ceci à été facilement réalisé, toutefois, lorsque je clique sur une image, il s'agit en fait de cocher un input type radio caché.
En effet, j'ai un <label for>, élément frère de chaque bouton radio, ces derniers ayant chacun pour id, le nom de l'image (sans l'extension grâce à pathinfo($fichier,PATHINFO_FILENAME).

Donc mon code fonctionne bien mais lorsque je coche un autre bouton radio, et bien le label du bouton radio précédent ne change pas d'aspect, ce qui laisse croire du coup à l'utilisateur que deux images seront ajoutées, et il va être un peu perdu, puisqu'on ne peut ajouter qu'une et une seule photo par post...

Bref, assez parlé, voici mon code :

Alors ici c'est la génération de chaque photo contenu dans le dossier attitré :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
    function parcourir_repertoire($repertoire)
    {
        $le_repertoire = opendir($repertoire) or die("Erreur le repertoire $repertoire existe pas");
        while($fichier = @readdir($le_repertoire))
        {
            // enlever les traitements inutile
            if ($fichier == "." || $fichier == "..") continue;
            if(is_file($repertoire.'/'.$fichier))
            {
                echo    "<div class=\"col s6 l3\">
                            <label class=\"labelImgs\" for=\"".pathinfo($fichier,PATHINFO_FILENAME)."\">
                                <img src=\"./".$repertoire."/".$fichier."\" alt=\"image\" width=\"200\" height=\"200\"/>
                            </label>
                            <input type=\"radio\" id=\"".pathinfo($fichier,PATHINFO_FILENAME)."\" name=\"radio1\" class=\"selectImage\" style=\"display:none;\" value=\"".$fichier."\" />
                        </div>";
            }
        }
        closedir($le_repertoire);
    }
    parcourir_repertoire("./pics");
?>

Ensuite, on a le Jquery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<script>
    $('document').ready(function(){
        $('.selectImage').click(function(){
            if(this.checked)
            {
                var imgSelect = $('input[name=radio1]:checked').val();
                $(this).siblings('.labelImgs').focus().css("border","3px solid #0275d8");
                $('#inserImg').click(function(){
                    $('#close').trigger("click");
                    $('#imgAssociee').val(imgSelect);
                    console.log($('#imgAssociee').val());
                });
            }
        });
    });
</script>

Et le résultat suivant :