Discussion :

[ezhox]

Bonjour à tous,

Je tente de faire une galerie d'image sur la base de bouton radio (car avec la pseudo class target on obtiens un désagréable scroll dans la page au click sur la miniature et on perd l'historique de navigation) et j'aimerai éviter le js

Ça marche presque, j'ai juste un problème de mise en page... Un exemple vaux mieux qu'une longue explication :

le html :

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
<div id="box">
<!-- label et imput qui jouent le rôle de miniature -->
<label for="livre1_mini_couv"><img src="img/livre1_mini_couv.jpg" alt="" ></label>
<input type="radio" id="livre1_mini_couv" name="livre1">
 
<label for="livre1_mini1"><img src="img/livre1_mini1.jpg" alt="" ></label>
<input type="radio" id="livre1_mini1" name="livre1">
 
<!-- les images à afficher au click -->
<div id="main_img">
<img src="img/livre1_couv.jpg" id="livre1_couv_2" alt="">
<img src="img/livre1_illu1.jpg" id="livre1_illu1_2" alt="">
</div>
</div>

Et le css :

Code :

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

1
2
3
4
input[type=radio] { display: none; }
label:hover {cursor: pointer; }
#livre1_mini_couv:checked ~ #main_img img#livre1_couv { opacity: 1; transform: scale(1); }
#livre1_mini1:checked ~ #main_img img#livre1_illu1 { opacity: 1; transform: scale(1); }

Ça ça marche nikel. Maintenant je voudrais faire un peu de mise en page et pour cela ajouter quelque div (par ex pour encadrer toutes les miniatures). Sauf que lorsque que je rajoute une div, il faut que je change le chemin dans mes selecteur, et c'est la que ça marche plus.
Je pensais faire un truc du genre :

Code :

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

#La_div_en_plus #livre1_mini1:checked ~ #main_img img#livre1_illu1 { blah blah }

Mais ça ne fonctionne pas...

Des idées pour rajouter des div et le chemin correcte associé au clik du button ?

[Bovino]

Non, ce n'est pas possible.
Un sélecteur de code adjacent est un sélecteur de frère adjacent, pas de descendant de frère adjacent.
Tu atteins donc une limite de la technique utilisée.

j'aimerai éviter le js

Quelle étrange idée... A l'heure actuelle, JavaScript est largement mieux équipé pour répondre à tes besoins et est largement mieux supporté que CSS3...

[ezhox]

Ok merci. Je sentais la limite sans trop être sur.

Le fait est que je suis beaucoup plus à l'aise avec le CSS qu'avec le JavaScript, et j'ai peur des problèmes de référencement si je m'y prend mal.

largement mieux supporté que CSS3

Ce n'est qu'une question de temps j'espère... Je mise sur le futur et sur la puissance des fonctionnalités que ça m'apporte.

Je vais essayer dans un premier temps de régler mon problème avec des class et si je galère trop je me tournerais vers JavaScript.

A tu des idées ou des exemples de galerie avec miniature et contrôle au clic en JavaScript qui prennent en compte les problèmes de référencement ?