voilà j'ai fait une gallerie d'images uniquement en HTML/CSS qui fait un zoom de l'image quand on le survole et affiche l'images en grand lorsque l'on clique
pour une démo --> http://guussss.free.fr/comptes/affichage_all.php
ça pourra peut-être intéresser du monde c'est plutôt galère à faire, d'autant plus qu'elle marche sous IE6 / firefox 2 et opera 9, pas testé sous d'autre navigateurs mais étant donné que ça marche sur IE/FF ça doit marcher sur à peu près tous navigateurs qui se respecte
pour le HTML, suffit de faire un code comme ceci :
Code :
- <ul class="ulaffiche" >
- <li><div><a href="liens vers l'image 1"><img src="miniature de l'image 1" alt="" /></a></div></li>
- <li><div><a href="liens vers l'image 2"><img src="miniature de l'image 2" alt="" /></a></div></li>
- etc...
- </ul>
|
et voilà le css qui va avec :
Code :
- .ulaffiche{
- width:660px; /* largeur du conteneur de la gallerie de photos attention à mettre la valeur de la largeur du nombre de colonnes, sinon les photos ne seront pas centrées dans le conteneur*/
- display:block;
- padding:40px; /* pour avoir de la place de chaque côté pour faire dépasser le zoom sur les photos du bord */
- margin:0 auto 0 auto; /* pour centrer la galerie sur la page ou elle sera */
- background-color:#666666; /*couleur de fond de la gallerie */
- overflow:auto; /* pour firefox : permet de prendre en compte les élément float pour le dimensionnement du conteneur de la gallerie */
- }
- .ulaffiche li {
- float:left; /* chaque conteneur sera en float, les images se metteront donc côté à côté avec retour à la ligne quand elles arrive au bou */
- width:128px; /* largeur de la case qui contient une photo */
- height:96px; /* hauteur */
- display:block; /* pour enlever les puces de la liste */
- overflow:hidden; /* pour IE : permet de superposer sur le reste la div plus grosse lors du zoom */
- padding:2px; /* bordure autour des images */
- background-color:#000000; /* couleur de fond sous les images */
- }
- *>.ulaffiche li {overflow:visible;} /* pour firefox (propriété invisible pour IE): permet d'afficher la zone de l'image qui dépasse lors du zoom */
- .ulaffiche img {
- border:0; /* supprime les bordures bleue des liens */
- height:96px; /* définit la hauteur des images */
- max-height:96px; /* idem mais pour firefox */
- }
- .ulaffiche li div a {
- float:left; /* positionnement du liens dans la div*/
- margin:0 auto 0 auto; /* centre le liens et donc l'image*/
- width:128px; /* taille du liens, identique à celle de l'image */
- height:96px; /* idem */
- }
- .ulaffiche li div a:hover {
- position:relative; /* position de la div de zoom */
- margin-left:-40px; /* marges pour centrer la div zommé par rapport à l'image non zoomé */
- margin-top:-25px; /* idem */
- padding:2px; /* cadre autour de la div zoomé */
- height:150px; /* taille du zoom */
- width:200px; /* idem */
- background-color:#aaaaaa; /* couleur du fond de la div, qui apparaitra autour de l'image, notament sur les images en paysage qui auron des grosses bordures à gauche et à droite */
- border:1px solid #00ffff; /* bordure du zoom */
- }
- .ulaffiche li div a:hover img {
- height:150px; /* défini la hauteur des images zoomées */
- max-height:150px; /* idem pour firefox */
- }
|
vous allez me dire pourquoi une div autour du liens?
parce que c'est la seul solution que j'ai trouvé pour avoir une zone zoomée qui soit toujours de la même taille sans déformer l'image et ce quelque soit l'orientation de l'image (portrait/paysage)
un autre avantage est que vous pouvez mettre une image de n'importe quelle résolution dans les miniature (vous pouvez même mettre l'image non miniature sous peine d'avoir une page très lourde à charger), étant donné que c'est le css qui s'occupe de définir la taille des miniature / zoom
pour le reste j'ai fait pas mal de choses dans le css sans trop savoir réellement comment c'est interprété mais en tout cas ça marche 
si vous avez des remarque 
une dernière chose, l'idée de faire ça m'est venue de ce site : http://www.cssplay.co.uk/menu/lightbox2.html
celà dit j'ai juste pris l'idée et refait le css intégralement
et ce site recense plein de bon truc à faire en css 
Message édité par gugus le 21-12-2006 à 14:52:59
(là c'est des miniature générées en php avec une résolution de 128*96 donc pas terrible, d'ailleur les dernière images dela gallerie sont en 200*150 et c'est déjà beaucoup mieux)