Remplir un tableau d'images par clic

Version imprimable

27/10/2015, 16h39
oObzh22

Remplir un tableau d'images par clic

Bonjour,

Je cherche à faire une "présentation interactive".
Étant formateur de secourisme, j’aimerais remplir un "tableau" de + ou - 26 cases avec des vignettes, mais selon les réponses données par les apprenants.

Du style, je clic sur une première vignette, elle va se positionner dans la case 1.
Je clic sur une deuxième vignette, elle va dans la case suivante (case2, ....) et ainsi de suite jusqu'au remplissage complet du "tableau".
Je ne sais pas s'il est possible d'avoir le tableau qui se rempli sur une page (projeter sur grand écran) et le "stock de vignette" sur une autre page (écran d'ordinateur) ?

Merci par avance.
27/10/2015, 21h58
kOrt3x

c'est pas plus simple de faire ça dans un powerpoint ?
29/10/2015, 09h43
oObzh22

Non, car avec PowerPoint, l'ordre d’apparition des vignettes est prédéfinies.
29/10/2015, 13h18
NoSmoking

Bonjour,
il te faut regarder du coté des animations.
Au click, tu récupères la position de l'élément et la position d'affichage finale puis tu lances le déplacement.

Je n'ai pas l'habitude de proposer de s'aider de la bibliothèque jQuery mais dans ton cas je pense que cela sera le mieux même si l'on peut faire en vanilla ;)

exemple réalisé pour le 2^éme défi
• Algorithme d'Euclide
30/10/2015, 21h15
oObzh22

Merci, je vais chercher par là.

Voici un petit exemple simple de la mise en application en utilisant la bibliothèque jQuery

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Déplacement images</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  margin:0;
  padding:0;
  font: 1em/1.5 Verdana, sans-serif;
}
#main {
  position:relative;
  width:60em;
  margin:0 auto;
}
h1 {
  color:#069;
}
#main_dest {
  width:320px;
  margin:0 auto;
}
div[id^="dest"]{
  box-sizing:border-box;
  float:left;
  width:150px;
  height:100px;
  border:1px dashed #ccc;
  margin:5px;
}
#main_img {
  height:10em;
}
#main_img li{
  width:10em;
  height:10em;
  float:left;
  list-style: none;
}
#main_img img{
  position:relative;
  width:150px;
  max-height:100px;
  cursor:pointer;
}
#main_img img:hover {
  box-shadow:1px 1px 20px #ccc;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="main">
  <h1>Déplacement images au clic</h1>
  <div id="main_img">
    <ul>
      <li><img data-dest="dest_1" src="http://club.developpez.com/webdesign/Rubriques/Web/JavaScript/logo_faq_tous_115.gif" alt=""></li>
      <li><img data-dest="dest_2" src="http://club.developpez.com/webdesign/Rubriques/Web/JavaScript/logo_faq_google_maps_150.gif" alt=""></li>
      <li><img data-dest="dest_3" src="http://club.developpez.com/webdesign/Rubriques/Web/JavaScript/faq_jquery_tiny.gif" alt=""></li>
      <li><img data-dest="dest_4" src="http://club.developpez.com/webdesign/Rubriques/Web/JavaScript/faq_senchaextjs_tiny.gif" alt=""></li>
    </ul>
  </div>
  <div id="main_dest">
    <div id="dest_1"></div>
    <div id="dest_2"></div>
    <div id="dest_3"></div>
    <div id="dest_4"></div>
  </div>
</div>
<script>
$('img').on('click', function() {
    var $dest = $('#' + $(this).data('dest')),
        pos = $dest.offset(),
        thisPos = $(this).offset();
 
    $dest.css('background-color', '#f8f8fa');
 
    $(this).animate({
            left: '+=' + (pos.left - thisPos.left),
            top: '+=' + (pos.top - thisPos.top)
        },
        1000,
        function() {
            $dest.css('background-color', '');
        }
    );
});
</script>
</body>
</html>

si tu as besoin d'explication on sera toujours là.

07/11/2015, 11h31
oObzh22

Merci NoSmoking,
C'est cela que je recherche, à la nuance que j'aimerais que la destination ne soit pas fixe.
J'aimerais que la vignette aille dans la 1ère case disponible.

Salut,

Comme ça ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Déplacement images</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  margin:0;
  padding:0;
  font: 1em/1.5 Verdana, sans-serif;
}
#main {
  position:relative;
  width:60em;
  margin:0 auto;
}
h1 {
  color:#069;
}
#main_dest {
  width:320px;
  margin:0 auto;
}
#main_dest div {
  box-sizing:border-box;
  float:left;
  width:150px;
  height:100px;
  border:1px dashed #ccc;
  margin:5px;
}
#main_img {
  height:10em;
}
#main_img li {
  width:10em;
  height:10em;
  float:left;
  list-style: none;
}
#main_img img {
  position:relative;
  width:150px;
  max-height:100px;
  cursor:pointer;
}
#main_img img:hover {
  box-shadow:1px 1px 20px #ccc;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="main">
  <h1>Déplacement images au clic</h1>
  <div id="main_img">
    <ul>
      <li><img src="http://club.developpez.com/webdesign/Rubriques/Web/JavaScript/logo_faq_tous_115.gif" alt=""></li>
      <li><img src="http://club.developpez.com/webdesign/Rubriques/Web/JavaScript/logo_faq_google_maps_150.gif" alt=""></li>
      <li><img src="http://club.developpez.com/webdesign/Rubriques/Web/JavaScript/faq_jquery_tiny.gif" alt=""></li>
      <li><img src="http://club.developpez.com/webdesign/Rubriques/Web/JavaScript/faq_senchaextjs_tiny.gif" alt=""></li>
    </ul>
  </div>
  <div id="main_dest">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
<script>
$(function()
{
	var tab_dest = $("#main_dest").find("div"),
		tab_dest_length = tab_dest.length,
		i_dest = 0;
 
	$("#main_img").find('img').one('click', function() 
	{
		if(i_dest < tab_dest_length)
		{
			var $dest = tab_dest.eq(i_dest),
				pos = $dest.offset(),
				thisPos = $(this).offset();
 
                        i_dest++;
 
			$dest.css('background-color', '#f8f8fa');
 
			$(this).animate({
					left: '+=' + (pos.left - thisPos.left),
					top: '+=' + (pos.top - thisPos.top)
				},
				1000,
				function() {
					$dest.css('background-color', '');
				}
			);
		}
	});
})
</script>
</body>
</html>

@ABCIWEB :
Ton script souffre d'un manque, que ce passe t-il si je re-clique sur une image déjà positionnée alors que les autres ne sont pas encore placées ?

Dans le cas demander autant mettre un événement unique via la méthode .one().

Voici une autre façon de gérer pour ne pas à mettre/gérer de condition

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// récup. des destinations
var $elem_dest = $('#main_dest div').toArray();
// affection d'un click unique
$('img').one('click', function() {
    // récup. le 1st en élément jQuery et le supprime de l'Array
    var $dest = $( $elem_dest.shift()),
        pos = $dest.offset(),
        thisPos = $(this).offset();
 
    $dest.css('background-color', '#f8f8fa');
    // lance animation
    $(this).animate({
            left: '+=' + (pos.left - thisPos.left),
            top: '+=' + (pos.top - thisPos.top)
        },
        1000,
        function() {
            $dest.css('background-color', '');
        }
    );
});

07/11/2015, 17h18
ABCIWEB

@NoSmoking C'est réparé pour le "one" ;)

Pour le reste oui ta solution est plus élégante. Je pense rarement à ce type de code parce que dans la plupart des cas j'aurai souvent besoin de mon tableau entier plus tard et donc je n'ai pas pour habitude de l'amputer.

EDIT : par contre j'aurai une petite critique concernant ton ciblage des images. Avec la méthode $('img') tu prends toutes les images du DOM, bien rare qu'il n'y en ait pas d'autres dans une page Web. D'ailleurs tu cibles bien les images dans ton css alors pourquoi ne pas en faire de même avec javascript...

Citation:

dans la plupart des cas j'aurai souvent besoin de mon tableau entier plus tard et donc je n'ai pas pour habitude de l'amputer.

on peut dans ce cas "re-pusher" après, d'ailleurs sans le one cela marche, bonjour la danse des canards :mouarf:
Code:

1 2 3 4 5 6 // récup. le 1st en élément jQuery et le supprime de l'Array var ind = $elem_dest.shift(), $dest = $( ind), pos = $dest.offset(), thisPos = $(this).offset(); $elem_dest.push(ind);
Citation:

...par contre j'aurai une petite critique concernant ton ciblage des images. Avec la méthode $('img') tu prends toutes les images du DOM,...

bien d'accord avec toi il eut mieux valu mettre

Code:

$('#main_img img').on('click', function() {

07/11/2015, 22h23
ABCIWEB

Citation:

Envoyé par NoSmoking

on peut dans ce cas "re-pusher" après, d'ailleurs sans le one cela marche, bonjour la danse des canards :mouarf:

Et oui mais qu'est-ce qu'on ferait pas pour ne pas réécrire une vieille boucle incrémentée à la papa qu'on a apprise à nos débuts, parce qu'on voudrait bien avoir l'impression de progresser en employant pas du "vieux code" :lol:
Là je dirai, si c'est juste pour éviter un if basique, tu dépasses un peu les bornes des limites comme dirait l'autre :lol:

D'ailleurs même pour le code qui nous intéresse ici, ta solution bien qu'élégante n'est pas complétement viable car si $('#main_dest div') ne matche rien tu vas produire une erreur dans la suite du code. Et pour l'éviter je ne vois pas d'autre solution que de faire une condition.

Donc au final tu fais une manipulation sur les tableaux (opération qui doit être aussi gourmande en ressource que d'incrémenter une "pauv" variable) et cela ne t'éviteras pas de faire une condition. Du coup, même si le bilan esthétique peut encore être en ta faveur, à priori je parierais bien quelques euro sur mon "vieux code" niveau performance/simplicité/évolutivité :P ;)

Citation:

ta solution bien qu'élégante n'est pas complétement viable...

une fois de plus bien d’accord avec toi, la plupart du temps les solutions proposées ne sont pas complétement "blindées" et réponde à un contexte et non par pour vocation, à l’exception de quelques-unes, à être redistribuées.

Citation:

Et pour l'éviter je ne vois pas d'autre solution que de faire une condition.

effectivement, je rajouterais donc un if( $elem_dest.length){ avant affectation de l'événement et non dans l'événement, il y aurait d'autres façons de faire bien sûr ;)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 // récup. des destinations var $elem_dest = $('#main_dest div').toArray(); if( $elem_dest.length){ // affection d'un click unique $('#main_img img').one('click', function() { // récup. le 1st en élément jQuery et le supprime de l'Array var ind = $elem_dest.shift(), $dest = $( ind), pos = $dest.offset(), thisPos = $(this).offset(); $dest.css('background-color', '#f8f8fa'); // lance animation $(this).animate({ left: '+=' + (pos.left - thisPos.left), top: '+=' + (pos.top - thisPos.top) }, 1000, function() { $dest.css('background-color', ''); } ); }); }
Citation:

à priori je parierais bien quelques euro sur mon "vieux code" niveau performance/simplicité/évolutivité

il ne saurait être question d'argent entre nous :mrgreen:

On pourrait également chercher quel est le conteneur vide suivant, comme toujours une problématique et x solutions, dans ce cas bien précis je ne pense pas que la performance soit un critère prépondérant même si il ne faut jamais le perdre de vue, sachant d'autre part que lorsque l'on utilise jQuery la performance globale ...!

09/11/2015, 01h55
ABCIWEB

Citation:

Envoyé par NoSmoking

effectivement, je rajouterais donc un if( $elem_dest.length){ avant affectation de l'événement et non dans l'événement

"Avant" l'affectation, ça traite le problème d'un match vide, mais s'il y a plus d'images que de cases disponibles tu auras encore une erreur :mrgreen:

Citation:

Envoyé par NoSmoking

On pourrait également chercher quel est le conteneur vide suivant

C'est ce que fait implicitement le if dans ma proposition de code. De sorte que ma solution n'est ni sensible à l'existence des images ni au nombre d'images trouvées et donc a fortiori ni au nombre de cases disponibles :)

On voit dans cet exemple que la méthode "shift" est moins générique et doit être utilisée avec précautions...

EDIT : Plus précisément elle ne permet pas d'éviter une condition dans l'évènement onclick sauf à limiter drastiquement les possibilités d'utilisation.
11/11/2015, 11h58
oObzh22

Merci NoSmoking & ABCIWEB.

Mais je me suis arrêt au code donné dans le poste #9, car après il n'y a plus de déplacement !!!
Mais cela me va parfaitement.

Je me demande maintenant, s'il est possible d'ajouter une option de retour dans le code.
Sachant que le retour dans le navigateur Web ne fonctionne pas.
11/11/2015, 20h03
NoSmoking

@ABCIWEB :

Citation:

Envoyé par ABCIWEB

mais s'il y a plus d'images que de cases disponibles tu auras encore une erreur :mrgreen:

gagné, je n'ai pas recopier le bon code, il me manque le $elem_dest.push(ind) pour autoriser la rotation dans le tableau qui peut également être réalisé avec la gestion d'un indice.

Je te rassure je n'ai pas d'action chez "SHIFT", c'est mon coté fun qui m'a fait l'utiliser dans ce cas ;)

Quand on reprend la lecture de la discussion ("j’aimerais remplir un "tableau" de + ou - 26 cases")on se doute que ce que l'on a fourni sera incomplet car dans l'idéal il faudrait générer les conteneurs destination dynamiquement, le nombre d'images pouvant être variable.

@oObzh22 :

Citation:

Je me demande maintenant, s'il est possible d'ajouter une option de retour dans le code.

en reprenant la discussion, comme dit juste avant, je me doutais un peu de cette question car effectivement si erreur ou clic trop rapide, je suis un spécialiste, il faut bien pouvoir annuler.

Il faut quand même savoir que de bien poser le problème au départ, cahier des charges précis donc, vont dépendre les solutions envisagées qui peuvent être très différentes d'un cas à l'autre, je parle de l'approche de la méthode.

Dans ton cas c'est tout à fait possible, il te suffit de mémoriser la position de départ pour autoriser le retour à la case départ et une fois de retour remettre de l'ordre.

Là je rejoint ABCIWEB, il faudra surement gérer cela avec une condition dans la fonction événement.

Question au passage, les éléments autres doivent-ils se décaler sur la case précédente laissée libre.
11/11/2015, 21h37
ABCIWEB

Citation:

Envoyé par NoSmoking

Là je rejoint ABCIWEB, il faudra surement gérer cela avec une condition dans la fonction événement.

C'est par principe plus générique : cela évite aussi de refaire le code si on s'avise plus tard d'insérer dynamiquement du html dans la page avec javascript. C'est pour cette raison que je n'évite pas, par défaut, de mettre des conditions et relocalisations dans mes évènements :)
16/11/2015, 21h29
oObzh22

1 pièce(s) jointe(s)

Bonjour, effectivement je me suis pas bien exprimé.

Voilà ce que je voulais mettre en place :

Pièce jointe 192825

J'ai numéroté les casse pour la compréhension.
Je voulais pouvoir remplir les casses (dans cette ordre), mais en interaction avec les apprenants de la formation.

Plusieurs vignettes étant inter-changeable (2 &3 - 6 & 7 selon les encadrés).
Et surtout pour les casses 12/13 & 14/15 ... Si les apprenants parlent de l'étouffement avant l’hémorragie, je veux pouvoir faire aller la vignette de l'étouffement dans la casse 12, et non pas leur dire pour le bon déroulement de ma projection, il me faut une autre réponse.

Voila mon idée de départ.

J'aurais dû le dire dès le départ !!