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

**fleedalfire** · 23/03/2016, 10h48

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 :

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
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 :

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
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 :

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

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

**danielhagnoul** · 24/03/2016, 11h31

Voir les commentaires de l'exemple :

Code html :

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
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>

**fleedalfire** · 30/03/2016, 17h20

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.

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager