Création de sections avec galerie photo correspondantes

**Bensljul** · 13/12/2018, 09h10

Bonjour à tous,

Dans le but de me créer mon site pour exposer mes photos, je cherche à faire des sections qui affiche une galerie photos lorsque l'on clique dessus.
J'ai tout d'abord tester en commencer par 1 section avec sa galerie photo dont voici les différents codage :

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
<!DOCTYPE html>
 
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Test</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
	<link rel="icon" type="image/png" href="index.jpeg" />
</head>
<body>
<button class="btnsec">Section1</button>
	<div class="gal">
			<img  src="prep-jenkins1.PNG" style="width: 50%"/>
			<img  src="prep-jenkins2.PNG" style="width: 50%"/>
			<img  src="prep-jenkins3.PNG" style="width: 50%"/>
			<span class="pre">Précédente</span>
			<span class="sui">Suivante</span>
		</div>
</div>
<!--<button class="btnsec">Section2</button>
<div class="section">
		<div class="gal">
			<img  src="prep-toolbox1.PNG" style="width: 50%"/>
			<img  src="prep-toolbox2.PNG" style="width: 50%"/>
			<span class="pre">Précédente</span>
			<span class="sui">Suivante</span>
		</div>
</div>-->
<script src="script.js"></script>
</body>
</html>

le script jquery :

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
$(document).ready(function(){
	var $img = $('.gal img'),
			$gal = $('.gal'),
			$btn = $('.btnsec'),
			$pre = $('.pre'),
			$sui = $('.sui'),
			indexImg = $img.length -1,
			indexbtn = $btn.length,
			index
			i = 0,
			$currentimg = $img.eq(i);
 
 
	$gal.css('display','none');
 
	$btn.click(function(){
		$gal.toggle();
		$img.css('display','none');
		$currentimg.css('display','block');
 
		$pre.click(function(){
			i --;
			if(i >= 0){
				$img.css('display','none');
				$currentimg = $img.eq(i);
				$currentimg.css('display','block');
			}
			else{
				i = 0;
			}
		});
 
		$sui.click(function(){
			i ++;
			if(i <= indexImg){
				$img.css('display','none');
				$currentimg = $img.eq(i);
				$currentimg.css('display','block');
			}
			else{
				i = indexImg;
			}
		});
	});
});

Ceci fonctionne lorsque je n'ai qu'une seule section car le souci vient quand j'en créee une deuxième.... je pense qu'il faut que j'itère sur les index des différent blocs mais je n'arrive pas a faire cette manip XD

Si vous avez une méthode pour le faire je serais heureux de la connaître

merci d'avance !

Invité · 13/12/2018, 14h57

Bonjour,

1- pour parcourir les différentes galeries :

Code :

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

1
2
3
$('.gal').each( function(){
...
});

2- ensuite, il faut distinguer les éléments de chaque galerie : ce sont les "enfants" de $(this) (qui représente LA galerie en question)

Code :

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

1
2
3
4
5
6
7
8
$('.gal').each( function(){ // pour chaque galerie
	var $gal = $(this); // représente LA galerie
	var $img = $(this).find('img'); // les images de CETTE galerie
	var $btn = .......... // (voir le point 3-)
	var $pre = $(this).find('.pre');
	var $sui = $(this).find('.sui');
...
});

3- Concernant le bouton "btnsec", il est en dehors du div de class "gal".
Il faut le mettre dedans (il sera plus simple à cibler), et donc revoir la structure HTML de chaque galerie.

**Bensljul** · 20/12/2018, 15h00

Bonjour,

Désolé pour mon retard de réponse ^^

entre temps j'ai fais des recherches et j'ai trouver qu'en jquery, il existe une librairie "accordion" j'ai donc modifié mon code tel quel tout en prenant votre solution ! :

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
52
<html>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>CAVIMAC-VISION</title>
	<link href="test.css" rel="stylesheet" type="text/css" />
	<script src="jquery-3.3.1.min.js"></script>
	<script src="jquery-ui.js"></script>	
	<script src="test.js"></script>
	<link rel="icon" type="image/png" href="index.jpeg" />
</head>
<body>
	<div id="accordion">
		<h1>Bis</h1>
		<div class="gal">
			<img src="bis.png"/>
			<img src="bis_201809.PNG"/>
			<img src="bis_201808.PNG"/>
			<img src="bis_201807.PNG"/>
			<img src="bis_201806.PNG"/>
			<img src="bis_201805.PNG"/>
			<img src="bis_201804.PNG"/>
			<img src="bis_201803.PNG"/>
			<img src="bis_201802.PNG"/>
			<img src="bis_201801.PNG"/>
			<img src="bis_201711.PNG"/>
			<img src="bis_201710.PNG"/>
			<img src="bis_201709.PNG"/>
			<img src="bis_201708.PNG"/>
			<img src="bis_201707.PNG"/>
			<img src="bis_201706.PNG"/>
		<span id="control">
			<button class="pre">Précédent</button>
			<button class="sui">Suivante</button>
		</span>
		</div>
		<h1>Attribution</h1>		
		<div class="gal">
			<img src="AttributionCodeConfclassentiel.PNG"/>
			<img src="AttributionCodeConfclassentiel_201809.PNG"/>
			<img src="AttributionCodeConfclassentiel_201808.PNG"/>
			<img src="AttributionCodeConfclassentiel_201807.PNG"/>
			<img src="AttributionCodeConfclassentiel_201806.PNG"/>
			<img src="AttributionCodeConfclassentiel_201805.PNG"/>
			<img src="AttributionCodeConfclassentiel_201804.PNG"/>
		<span id="control">
			<button class="pre">Précédent</button>
			<button class="sui">Suivante</button>
		</span>
		</div>
	</div>
</body>
</html>

Jquery :

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
$(document).ready(function(){
 
	$("#accordion").accordion({
		collapsible: true,
		autoHeight: true,
		active: false,
	 });
 
	$(".gal").each(function(){
		var $gal = $(this);
			$img = $(this).find('img'),
			$pre = $(this).find('.pre'),
			$sui = $(this).find('.sui'),
			indeximg = $img.length - 1,
			i = 0,
			$current = $img.eq(i);
 
		$img.hide();
		$current.show();
 
		$pre.click(function(){
			i--;
			if(i >= 0){			
				$img.hide();
				$current = $img.eq(i);
				$current.show();
			}
			else{
				i = 0;
			}
		});
 
		$sui.click(function(){ 
			i++;
			if(i <= indeximg){
				$img.hide();
				$current = $img.eq(i);
				$current.show();
			}
			else{
				i = indeximg;
			}
		});	
	});
});

alors du coup ça fonctionne mais la galerie ne fonction que sur celle avec pour titre h1 et ceux même quand je clique sur la galerie de la 1ere section

Invité · 20/12/2018, 15h13

Bonjour,

1-

Code :

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

<span id="control">

Un id doit être unique.
Il faut une classe.

2- remplace

Code :

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

$xxx.click(function(){

par

Code :

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

$xxx.on('click', function(){

**Bensljul** · 03/01/2019, 09h22

Bonjour à tous et bonne année évidemment

J'ais tjrs le meme probleme je n'ai qu'une galerie qui est prise en compte

Invité · 03/01/2019, 13h04

Bonjour,

Code :

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

1
2
3
	$(".gal").each(function(){
		var $gal = $(this);
			$img = ...

Remplace le point-virgule par une virgule.

**Bensljul** · 07/01/2019, 15h18

nan mais que je suis *** ><

Merci beaucoup ca fonctionne du tonnerre

Création de sections avec galerie photo correspondantes

jQuery

Discussions similaires

Partager

Partager