Bonjour.
Il affiche correctement les images, et au click sur les images j'ai cette div qui descend avec les données chargé. ça c'est bon c'est ce que je veux.
Par contre je ne comprend. Si la boucle est charger correctement pourquoi quand je lui demande le nombre d'image via console.log() et il me dit 0.

Si je met juste les images dans le html et bien ça fait planté l'affichage des donnée correspondant à l'image cliquer.

Il faut absolument que les données et si possible les images cliquer soit charger via le json.

PS: est-ce que vous auriez peut être un autre moyen de faire que les boutons prédécent et suivant fonctionne avec les images chargées et ne fasse pas planté les données charger.

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
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
106
107
108
109
110
111
112
$(document).ready(function(){
 
	//chargement de donnée du fichier data.json
	$.getJSON("data.json",function(data){
 
		for (var i=0;i<data.length;i++) {
			var gdphoto = "<img src=" + data[i].grandePhoto + "/>";
 
			var gdfilm = "<div>";
			gdfilm += gdphoto;
			gdfilm += "</div>";
 
			$("#film").append(gdfilm);
		}
 
		$("#film img").click(function(){
			var index = $(this).parent().index();
			var message = "<div class='information'>"
			message += "<img src=" + data[index].grandePhoto + "/>";
			message += "<h2>" + data[index].nom + "</h2>";
			message += "<h3>" + data[index].titre + "</h3>";
			message += "<h4>" + data[index].pop + "</h4>";
			message += "<p>" + data[index].description + "</p>";
			message += "</div>"
 
			$("#detail").html(message);
 
			$("#detail").animate({"top":0},900);
		});//
 
        récupérer le nombre d'image qu'il y a dans #film
	var nbreImages = $("#film img").length;
		console.log(nbreImages);
 
	//récupérer la longueur d'une image via sont attribut (.attr) height
	var longueurImg = parseInt($("#film img").css("height"));
 
	//multiplié le nombre d'images par sa longueur
	var longueurTotal = nbreImages * longueurImg;
 
	//attribué le longueurTotal à #film via .css("height",val)
	$("#film").css("height",longueurTotal);
 
	var blabla = 1;
 
	var posFilm;
 
	vf = true;
 
	//clique sur next
	$("#next").click(function(){
 
		if(vf == true){
 
			if(blabla < nbreImages){
				vf = false;
 
				//incrémenter avant d'afficher
				blabla++
 
				//relever la position du film et la stocker dans posFilm
				posFilm = $("#film").position().top;
 
				//repositionner #film avec animate à posFilm
				$("#film").stop().animate({"top":posFilm - longueurImg}, function(){vf = true;});
 
				//couleur de fond au hasard
				var r = parseInt(Math.random()*255);
				var v = parseInt(Math.random()*255);
				var b = parseInt(Math.random()*255);
 
				couleurRandom = "rgb("+ r +"," + v + "," + b + ")";
				$("#prev, #next").css("background-color",couleurRandom);
 
			}
 
		}
 
	});//fin du click next
 
	//clique sur précédant
	$("#prev").click(function(){
 
		if(vf == true){
 
			if(blabla > 1){
 
				vf = false
 
				//décrémenter avant d'afficher
				blabla--
 
				//relever la position du film et la stocker dans posFilm
				posFilm = $("#film").position().top;
 
				//repositionner #film avec animate à posFilm
				$("#film").stop().animate({"top":posFilm + longueurImg},function(){vf = true;});
 
				//couleur de fond au hasard
				var r = parseInt(Math.random()*255);
				var v = parseInt(Math.random()*255);
				var b = parseInt(Math.random()*255);
 
				couleurRandom = "rgb("+ r +"," + v + "," + b + ")";
				$("#prev, #next").css("background-color",couleurRandom);
 
			}
 
		}
 
	});//fin du click prev
});//fin du ready
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
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
/*CLASS*/	
.photo img{
	width: 500px;
	height: 333px;
	border-radius: 30px;
}
.information{
	background-color: white;
	width: 90%;
	height: 90%;
	margin-left: 4%;
	margin-top: 2%;
	border-radius: 15px;
}
.information img{
	height: 480px;
	margin-top: 2%;
	margin-left: 2%;
	border-radius: 15px;
}
.information h2{
	margin-top: -450px;
	text-align: center;
	margin-left: 43%;
}
.information h3{
	text-align: center;
	margin-left: 43%;
}
.information h4{
	margin-top: 40px;
	margin-left: 65%;
}
.information p{
	margin-left: 55%;
	margin-top: 40px;
	width: 400px;
}
 
/*ID*/
#click{
	font-weight: bold;
	width: 250px;
	position: absolute;
	z-index: 10;
	margin-top: 10%;
	margin-left: 5%;
}
#prev{
	float: left;
	cursor: pointer;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	margin: 5% 5% 0% 46.5%;
}
#next{
	float: left;
	cursor: pointer;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	margin-top: 5%;
}
#masque{
	width: 500px;
	height: 333px;
	position: relative;
	/*overflow: hidden;*/
	margin-left: 33%;
	margin-top: 1%;
}
#film{
	position: absolute;
	left: 0px;
	top: 0px;
}
#film img{
	width: 500px;
	height: 333px;
	border-radius: 15px;
	background-size: contain;
 
}
#detail{
	position: absolute;
	top: -500%;
	left: 0px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: rgba(0,0,0,.5);
	width: 100%;
	height: 100%;
	z-index: 99;
}
#detail div{
	width: 90%;
}
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
<!DOCTYPE>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>Seconde page</title>
		<script src="js/jquery-2.2.1.js"></script>
		<script src="js/menuglobal.js"></script>
		<script src="js/seconde_page.js"></script>
		<link href="css/style.css" rel="stylesheet"/>
	</head>
	<body>
<p id="click">Cliquer sur la photo pour plus d'info sur la ville que vous voulez visiter.</p>
		<div id="masque">
			<div id="film">
 
			</div>
		</div>
		<div id="bouton">
			<button id="prev"> <- </button>
			<button id="next"> -> </button></button>
		</div>
	</body>
</html>
Tout est charger via un document json

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
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
[
	{
		"nom": "Berlin",
		"titre": "Ville Allemande",
		"pop": "3 400 000 habitants",
		"vignette": "http://lorempixel.com/40/40/city/1/",
		"grandePhoto": "http://lorempixel.com/570/570/city/1/",
		"description": "Berlin est la capitale et la plus grande ville d'Allemagne, ainsi que la deuxième ville de l'Union européenne par sa population. Située dans le nord-est du pays, elle forme un land (État fédéré) à part entière et compte environ 3,4 millions d'habitants. Ses habitants s'appellent les Berlinois."
		}, 
		{
		"nom": "Los Angeles",
		"titre": "Ville Américaine",
		"pop": "3 792 621 habitants",
		"vignette": "http://lorempixel.com/40/40/city/2/",
		"grandePhoto": "http://lorempixel.com/570/570/city/2/",
		"description": "Los Angeles est la deuxième plus grande ville des États-Unis après New York. Elle est située dans le sud de l'État de Californie, sur la côte pacifique. Les Américains l'appellent souvent par son diminutif, L.A. . Los Angeles signifie « les anges » en espagnol et ses habitants sont appelés Angelenos."
		}, 
	{
		"nom": "Pékin",
		"titre": "Ville Chinoise",
		"pop": "19 600 000 habitants",
		"vignette": "http://lorempixel.com/40/40/city/10/",
		"grandePhoto": "http://lorempixel.com/570/570/city/10/",
		"description": "Pékin2 est la capitale de la République populaire de Chine. Située dans le nord du pays, la municipalité de Pékin (北京市, abrégé en 北京), d'une superficie de 16 800 km2, borde la province du Hebei ainsi que la municipalité de Tianjin. Pékin est considérée comme le centre politique et culturel de la Chine, tandis que Hong Kong et Shanghai dominent au niveau économique."
		}, 
		{
		"nom": "New York",
		"titre": "Ville Américaine",
		"pop": " 8 336 697 habitants",
		"vignette": "http://lorempixel.com/40/40/city/4/",
		"grandePhoto": "http://lorempixel.com/570/570/city/4/",
		"description": "New York1, officiellement City of New York, autrement connue sous les noms et abréviations de New York City ou NYC, est la plus grande ville des États-Unis et l'une des plus importantes du continent américain. Elle se situe dans le Nord-Est des États-Unis, sur la côte atlantique, à l'extrémité sud-est de l'État de New York."
		}, 
		{
		"nom": "Dallas",
		"titre": "Ville Américaine",
		"pop": " 6 371 773 habitants",
		"vignette": "http://lorempixel.com/40/40/city/5/",
		"grandePhoto": "http://lorempixel.com/570/570/city/5/",
		"description": "Dallas est une ville de l'État du Texas, aux États-Unis. Elle couvre une surface de 997 km² et comptait 1 241 162 habitants en 2012 (9e ville des États-Unis). Avec la ville voisine de Fort Worth, Dallas fait partie d'une vaste aire urbaine de 6 371 773 habitants, le Dallas/Fort-Worth Metroplex, ou simplement « the Metroplex », la 4e aire urbaine du pays. Dallas est listée comme ville mondiale gamma par l'université de Loughborough de Londres. La ville est le siège du comté de Dallas."
		}, 
		{
		"nom": "Paris",
		"titre": "Ville Française",
		"pop": " 2 200 000 habitants",
		"vignette": "http://lorempixel.com/40/40/city/6/",
		"grandePhoto": "http://lorempixel.com/570/570/city/6/",
		"description": "Paris est la commune la plus peuplée et la capitale de la France, le chef-lieu de la région Île-de-France et l'unique commune-département du pays.<br />Elle se situe au centre du Bassin parisien, sur une boucle de la Seine, entre les confluents de celle-ci avec la Marne et l’Oise. Ses habitants s’appellent les Parisiens. <br />La ville est divisée en vingt arrondissements. D’après le recensement de l’Inseeb 1, la commune de Paris comptait au 1er janvier 2010 plus de 2,2 millions d'habitants."
		}, 
		{
		"nom": "Sydney",
		"titre": "Ville Australienne",
		"pop" : "4 490 662 habitants",
		"vignette": "http://lorempixel.com/40/40/city/7/",
		"grandePhoto": "http://lorempixel.com/570/570/city/7/",
		"description": "Sydney est la ville la plus peuplée d'Australie avec une aire urbaine comprenant en 2009 une population de 4 490 662 habitants répartis sur près de 12 150 km2. Elle est la capitale de l'État de Nouvelle-Galles du Sud et est située sur la côte sud-est du pays. Ses habitants s'appellent les Sydneyites ou Sydneysiders. Première des colonies européennes d'Australie, Sydney fut fondée en 1788 à Sydney Cove par le capitaine Arthur Phillip qui commandait la première flotte venant du Royaume-Uni."
		}, 
		{
		"nom": "San Francisco",
		"titre": "Ville Américaine",
		"pop": " 8 336 697 habitants",
		"vignette": "http://lorempixel.com/40/40/city/9/",
		"grandePhoto": "http://lorempixel.com/570/570/city/9/",
		"description": "San Francisco, officiellement City and County of San Francisco, est une ville des États-Unis située dans l'État de Californie. Son nom est couramment abrégé en SF et la ville est surnommée The City by the Bay1. La ville est située à l'extrémité nord de la péninsule de San Francisco, entre l'océan Pacifique à l'ouest et la baie de San Francisco à l'est."
		}
]