Discussion :

[maxtrident]

bonjour
script de galerie récupéré sur le net et modifié mais Pas moyen de faire un overflow-x: scroll; uniquement sur la partie des miniatures... soit les balises button.
en le mettant dans slider_focus = ça scroll avec l'image aussi et autre part ça foire.

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
	<style>
*{box-sizing:border-box}
 
 
.slider_focus{
 
max-width: 600px;
margin: 2rem auto;
 
	}	
 
.slider_focus ul{
margin: 0;
/*reset ul*/
padding: 0;
list-style-type:none;
/*reset ul*/
display:flex;
position: relative;
justify-content: center;
 
aspect-ratio:3/2;gap:.5rem;
 
 
}
 
 
.slider_focus ul li{
 
align-self:flex-end;
display: flex;
align-items: center;
justify-content: center;
margin-bottom:.5rem;
height:4rem;
width: 4rem;
}
 
.slider_focus ul li button	
 
{ 
all:unset;
padding:0;
border:0;
cursor: pointer; 
}
 
 
::-moz-focus-inner {
    border: 0;
 
padding-inline: 0px;
}
 
.slider_focus ul li button img{
 
border-radius: 10%;
border:2px solid white; 
width:4rem;
height:4rem;
margin-top:180px;
height:4rem;object-fit: cover;
	}
 
 
.slider_focus ul li span img{
 
display:block;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
transform:translateX(-100%);
z-index:0;
opacity:0;
will-change: transform,opacity;
transition:transform .6s,opacity .6s
 
	}
 
 
.slider_focus ul:not(:focus-within) li:first-child span img,
.slider_focus ul li:focus-within span img{
transform:translateX(0%);
opacity:1;
cursor: pointer;	
	}
 
.slider_focus ul:not(:focus-within) li:first-child button img,	
.slider_focus ul li:focus-within button img{outline:2px solid black;border-radius: 10%; opacity:.4}
 
.hight_vignet{
position:relative;	
min-height:50px;
z-index:-1;
}
.haut_img{
position:relative;	
height:1px;
width:100%;
z-index:-1;
}
</style>

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
 
<div class="haut_img"></div>	
<div class="slider_focus">
<ul>
	<?php
        foreach ($listfoto as $foto){
        ?>
	<li tabindex="0">
<button title="cliquez pour voir l'image" tabindex="-1"><img src="<?php echo $repfoto.$foto; ?>"></button>
 
<span onclick="zomfoto('<?php echo $foto; ?>');">
<img src="<?php echo $repfoto.$foto; ?>" >
</span>
</li>
 
	<?php
        }
        ?>
	</ul>
 
	</div>
	<div class="hight_vignet"></div>

Si quelqu'un à une solution ?
merci

[NoSmoking]

Bonjour,

script de galerie récupéré sur le net et modifié mais Pas moyen de faire un overflow-x: scroll; uniquement sur la partie des miniatures... soit les balises button.

c'est la structure même adoptée, même conteneur, qui ne te permet pas de dissocier l'overflow.

De quelle galerie s'agit-il ?

[maxtrident]

j'en ai tellement testé...ça doit etre celle la https://www.guyom-design.com/blog/as...uto_diapo_css/ Slider avec la pseudo-classe :focus-within
elle est responsive sauf si tu met plus de 4 photos donc il faut mettre un scrool... pas possible non plus en ajoutant un div sur la partie miniature car dans la boucle.
si pas solution, je vais essayer de faire la boucle uniquement sur les miniatures et quand on clic, afficher la photo avec du js... mais le problème ça va charger la photo a chaque clic donc pas terrible pour les effet si trop grosse.

[NoSmoking]

si pas solution, je vais essayer de faire la boucle uniquement sur les miniatures et quand on clic

as tu essayé la version avec des <input type="radio"> à mon avis plus souple car tu peux placer les <label> liés où bon te semble.

PS : cela me rappelle : Galerie au clic sans JavaScript que le temps passe

[maxtrident]

merci pour ton lien... j'avais trouvé celui avec du java mais sans java c'est mieux.

[maxtrident]

bon j'ai fait avec le script car avec le type radio tu peut pas faire de scroll car image et miniature dans la boucle.
après je vais essayer de faire du carousel sur les miniatures.
mais bon la je n'arrive pas à faire un effet sur les photos ça ne fonctionne que 2 fois.
j'ai essayer avec classList.remove mais ça ne fait rien

l'effet que le voudrais qui relance a chaque clic sur miniature

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
.effetfoto {
 
	-webkit-animation: efoto .50s;
	animation: efoto .50s;
}
 
@-webkit-keyframes efoto {
  0% {
    opacity: 0;
	  -webkit-transform:scale(0.25);
     -moz-transform:scale(0.25);
      -ms-transform:scale(0.25);
       -o-transform:scale(0.25);
          transform:scale(0.25);
  }
  100% {
    opacity: 1;
		  -webkit-transform:scale(1);
     -moz-transform:scale(1);
      -ms-transform:scale(1);
       -o-transform:scale(1);
          transform:scale(1);
  }
}
 
@keyframes efoto {
  0% {
        opacity: 0;
	  -webkit-transform:scale(0.25);
     -moz-transform:scale(0.25);
      -ms-transform:scale(0.25);
       -o-transform:scale(0.25);
          transform:scale(0.25);
  }
  100% {
    opacity: 1;
	  -webkit-transform:scale(1);
     -moz-transform:scale(1);
      -ms-transform:scale(1);
       -o-transform:scale(1);
          transform:scale(1);
  }
}

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
<div id="galerie">
  <dl id="photo" >
    <dt>Titre de la photo 1</dt>
    <dd><img id="big_pict" class="effetfoto" src="<?php echo $repfoto.$listfoto[0]; ?>" alt="Photo 1 en taille normale" /></dd>
  </dl>
  <ul id="galerie_mini">
  	<?php
        foreach ($listfoto as $foto){
        ?>
 
    <li>
      <a href="<?php echo $repfoto.$foto; ?>" title="<?php echo $foto; ?>"><img src="<?php echo $repfoto.$foto; ?>" alt="Cliquer pour choisir une photo" /></a>   
	  </li>
    <li>
	<?php
        }
        ?>
</ul>
 
 
</div>

Code javascript :

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
function displayPics()
{
  var photos = document.getElementById('galerie_mini') ;
  // On récupère l'élément ayant pour id galerie_mini
  var liens = photos.getElementsByTagName('a') ;
  // On récupère dans une variable tous les liens contenu dans galerie_mini
  var big_photo = document.getElementById('big_pict') ;
  // Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
 
  var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
  // Et enfin le titre de la photo de taille normale
  // Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
  for (var i = 0 ; i < liens.length ; ++i) {
    // Au clique sur ces liens 
    liens[i].onclick = function() {
      big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
      big_photo.alt = this.title; // On change son titre
      titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
 
	  document.querySelector('dd').classList.remove('effetfoto');
	  document.querySelector('dd').classList.add('effetfoto');
      return false; // Et pour finir on inhibe l'action réelle du lien
    };
  }
}
 
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
window.onload = displayPics;

[NoSmoking]

car avec le type radio tu peut pas faire de scroll car image et miniature dans la boucle.

pas trop compris où il y a un soucis, tu fais ce que tu veux ou presque dans ta boucle

Code php :

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
// init
$slideLabels = ['<div id="slide-labels">'];
$slideImages = ['<div id="slide-images">'];
$count = 1;
// ajout des éléments
foreach ($listfoto as $foto){
  $id = 'radio_' .$count++;
  $img = $repfoto .$foto;
  $slideLabels[] = '  <label for="' .$id .'"><img src="' .$img. '" alt=""></label>';
  $slideImages[] = '  <input type="radio" name="slide-radio" id="' .$id. '"><img src="' .$img. '" alt="">';
}
// fermeture
$slideLabels[] = '</div>'.PHP_EOL;
$slideImages[] = '</div>'.PHP_EOL;
// affichage final
echo implode(PHP_EOL, $slideImages);
echo implode(PHP_EOL, $slideLabels);

... c'est une façon de faire.