Permutation d'image et afficher l'image permutée

Version imprimable

Ce que j'aimerai faire c'est que quand l'on clique sur une photo de la div vignette et bien elle s'affiche sur la div film.
mais je ne suis pas très doué en javascript et jquery.

Pouvez-vous m'aider s'il vous plais.

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
<body>
		<div class="masque">
		  <div id="film">
		  <img src="photos/Fotolia_407134.jpg" width="500" height="333" alt=""/>
		  <img src="photos/Fotolia_407115.jpg" width="500" height="333" alt=""/>
		  <img src="photos/Fotolia_407055.jpg" width="500" height="333" alt=""/>
		  <img src="photos/Fotolia_399778.jpg" width="500" height="333" alt=""/>
		  <img src="photos/Fotolia_383893.jpg" width="500" height="333" alt=""/>
		  <img src="photos/Fotolia_369643.jpg" width="500" height="375" alt=""/>
		  <img src="photos/Fotolia_365417.jpg" width="500" height="375" alt=""/>
		  <img src="photos/Fotolia_350312.jpg" width="500" height="333" alt=""/>
		  <img src="photos/Fotolia_345027.jpg" width="500" height="333" alt=""/>
		  <img src="photos/Fotolia_342485.jpg" width="500" height="333" alt=""/>
		  </div>
		</div>
		<div id="clear"></div>
		<button id="prev">Précédant</button>
		<div id="vignette">
			<img src="photoPerm/Fotolia_1.jpg" width="30px" height="30px"/>
			<img src="photoPerm/Fotolia_2.jpg" width="30px" height="30px"/>
			<img src="photoPerm/Fotolia_3.jpg" width="30px" height="30px"/>
			<img src="photoPerm/Fotolia_4.jpg" width="30px" height="30px"/>
			<img src="photoPerm/Fotolia_5.jpg" width="30px" height="30px"/>
			<img src="photoPerm/Fotolia_6.jpg" width="30px" height="30px"/>
			<img src="photoPerm/Fotolia_7.jpg" width="30px" height="30px"/>
			<img src="photoPerm/Fotolia_8.jpg" width="30px" height="30px"/>
			<img src="photoPerm/Fotolia_9.jpg" width="30px" height="30px"/>
			<img src="photoPerm/Fotolia_10.jpg" width="30px" height="30px"/>
		</div>
		<button id="next">Suivant</button>
	</body>

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
<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			#prev{
				float: left;
				margin-left: 5px;
				margin-right: 5px;
			}
			#next{
				float: left;
				margin-left: 5px;
				margin-right: 5px;
			}
			div{
				float: left;
			}
			#clear{
				clear: both;
			}
			.masque{
				width: 500px;
				height: 300px;
				position: relative;
				overflow: hidden
			}
			#film{
				position: absolute;
				top: 0px;
				left: 0px;
			}
			#film img{
				float: left;
			}
		</style>

Code:

1
2
3
4
5
6
$("#vignette img").click(function(){
 
					$(this).attr("src","photos/" + Fotolia_407134.jpg);
					$(this).attr("src","photoPerm/" + Fotolia_1.jpg);
 
				});//fin du permutation d'image

Voir les commentaires de l'exemple :

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/le-frog/jquery-ui.min.css">
  <style>
 
    #vignette, #film { margin: 12px; }
    #vignette > img { width: 30px; height: 30px; }
 
  </style>
  <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/i18n/jquery-ui-i18n.min.js"></script>
  <script>
    'use strict';
    
    $( function(){
      
      /*
       * Les vignettes et les images doivent avoir un point commun.
       * Ici c'est le même URL.
       * En général, on place les vignettes et les photos dans deux
       * dossiers différents mais on conserve le même nom.
       */
      var jObjImgFilm = $( '#imgFilm' );
      
      $( 'img', '#vignette' ).on( 'click', function( ev ){
        jObjImgFilm.attr( "src", $( this ).attr( "src" ) );
      });
      
    });
  </script>
</head>
<body>
 
  <div id="vignette">
    <img src="https://t2.ftcdn.net/jpg/01/05/31/73/240_F_105317397_MKNdNA0e8bucBR6p4f5Fmu7qOvLFL2wY.jpg">
    <img src="https://t1.ftcdn.net/jpg/00/27/94/22/240_F_27942212_2KE6w0CKiT9WEg8N6F7RAY8WoB4bwO5o.jpg">
    <img src="https://t2.ftcdn.net/jpg/01/05/31/87/240_F_105318769_l4oaw6YMyuaGaNotVbHBrWptEEikZFzA.jpg">
  </div>
  <div id="film">
    <img id="imgFilm" src="https://t2.ftcdn.net/jpg/01/05/31/73/240_F_105317397_MKNdNA0e8bucBR6p4f5Fmu7qOvLFL2wY.jpg">
  </div>
 
</body>
</html>

30/03/2016, 17h20
fleedalfire

Merci pour la permutation des images.
J'ai juste un problème avec le code que tu m'as donné c'est que ça fait buggé le button "précédant et le button "suivant"
il recommence du départ avec les buttons et en plus après je ne peux plus utiliser de-nouveau la permutation des images. Si je commence par "précédant" et "suivant" avec je ne peux même pas utiliser la permutations des images.
est-ce que tu saurais me dire qu'est-ce qui fait que les deux codes ne vont pas ensemble.