animation sur n'importe quelle image d'un groupe d'images "au clique"

Version imprimable

30/05/2012, 15h34
artenis

animation sur n'importe quelle image d'un groupe d'images "au clique"

Bonjour,

je souhaite parvenir à la même fonctionnalité que la fonction ".hover" de jquery mais pour la fonction ".click" :
c'est à dire: sur un groupe d'images, pouvoir animer une image lorsque l'on clique dessus, et supprimer cette animation lorsque l'on clique sur une autre image du groupe.
il s'agit d'images récupérer en php , ainsi je n'ai que l'attribut "img" utilisable

espérant avoir été assez clair, je vous remercie par avance pour vos réponses.

n'hésitez pas à me donner un lien déjà existant si ce sujet est déjà présent, je n'ai pas su trouver la bonne question à mon problème.
30/05/2012, 15h38
SpaceFrog

dis nous un peu plus sur tes balises images ? elle sont ou dans ton code html ?
dans un conteneur ?

le selecteurs de jquery peuvent pointer sur ce que tu veux a condition de savoir par ou mettre la main sur l'objet visé ...

voici le code php qui recupere les images du dossier image et le conteneur qui la contient :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
        $dos = "images/";
        $dir = opendir($dos);
        while($file = readdir($dir)){
                        
            $allow_extension = array('jpg', 'png', 'gif');
            $extension = strtolower(substr($file,-3));
            if(in_array($extension,$allow_extension)){
                ?>
                <div id="s-search-img">
                <img src="images/<?php  echo $file; ?>" width="130" height="80"/>
                <div id="s-search-img-name"><?php  echo substr($file,0,23); ?></div>
                </div>
                <?php
                    
            }
        }
        ?>

ici il s'agirait effectivement du conteneur appelé: "#s-search-img" et non sur "img".
j'ai ainsi environ une 50aine d'images , et veux pouvoir cliquer sur n'importe qu'elle d'entre elles et s'anime et "désanime" lorsque je clique sur une autre image.

merci pour vos futurs réponses

30/05/2012, 16h50
SpaceFrog

Code:

$("#s-search-img img").aminate()
30/05/2012, 17h11
artenis
c'est bien gentil, mais cette partie là je la connait, ce qui me gene c'est de creer le code (simple) qui effectue cette animation sur chaque image :

lorsque je clique sur une image : elle s'anime,
lorsque je clique sur autre image , l'ancienne image se désanime et celle cliquée s'anime à son tour.
suis-je compréhensible ?

voici ce que j'avais déjà éssayé:
Code:

1 2 3 $('#s-search-img img').click(function(){ $('#s-search-img').css({background:'#6CF',border:'2px solid #6CF'}); });
et n'avait pas marché (seul la fonction est différente :animate) mais ce n'est pas là l'important.

j'avais pensé à "prev et next"
30/05/2012, 17h15
SpaceFrog

ha oki ...
ce qui ne va etre compliqué c'est d'animer le background ...

qu'entend tu exactement par animer ...
31/05/2012, 00h13
artenis

animer: soit .css soit .animate, je m'en moque, ce qui (comme tu le dis va être difficile) m'interesse c'est de pouvoir attribuer la fonctionnalité dont je parle à l'ensemble des images:

mon but est de faire comme (input type file) : la fenetre windows apparait et mes images locales apparaissent, alors quand je clique sur une image (ou autre chose) celui-ci ce colore en bleu, je peux ensuite cliquer sur ouvrir pour obtenir le nom de l'image et le récupérer dans mon formulaire.

vous voyez ou pas ?

pourquoi a t-on créer une fonction .hover qui permet de la faire au survol mais pas sur .click pour le clique ?

a moins qu'un plugin existe ? mais gg ne comprends pas mes questions et moi même je ne sais quoi lui poser

merci pour vos réponses , futures
31/05/2012, 08h36
SpaceFrog

le selecteur qui te sera utile c'est

Code:

not($(this))

ou alors attribuer une classe genre "active" à l'élement cliqué ...

1 pièce(s) jointe(s)

merci bien pour cette réponse, je vais étudier cette fonction,

j'ai peut-être trouvé un moyen un peu plus simple ,mais je suis toujours confronter à un probleme:

voici mon code:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <div style="padding:10px 10px 10px 10px; overflow:auto; margin-top:50px; width:578px; height:395px; border:2px solid white; background:white;"> <?php $dos = "images/"; $dir = opendir($dos); while($file = readdir($dir)){ $allow_extension = array('jpg', 'png', 'gif'); $extension = strtolower(substr($file,-3)); if(in_array($extension,$allow_extension)){ ?> <div id="s-search-img"> <form action="manage-image.php" method="post"> <input type="checkbox" name="img_gal[]" value="<?php $file; ?>" style="visibility:hidden;" > <img src="images/<?php echo $file; ?>" width="130" height="80"/> </form> <div id="s-search-img-name"><?php echo substr($file,0,23); ?></div> </div> <?php } } ?> </div>
comme vous pouvez le voir, je récupère mes images dynamiquement, et j'applique des checkbox sur chacune d'elle (encore faut-il que le script soit bon?). Je souhaite au click d'une (image/checkbox) modifier le css qui entoure l'image (#s-search-img).

je pensais donc a faire ceci:
Code:

1 2 3 $('#locus-img input').click(function(){ $('#s-search-img').toggleClass('select-img'); });
locus-img étant le conteneur principal de la recherche d'image
et .select-img est une class qui change le background du conteneur de l'image

Comment récupérer le nom de l'image sélectionnée (insertion dans un input texte situé derriere la recherche d'image) au clique de Ouvrir/accepter.
je pense a ajax, y at-il un autre moyen ?

merci encore à ceux qui pourront m'aider et principalement à SpaceFrog

Code:

1
2
3
$(this).next('img')
ou
$(this).closest('img')