une gallerie d'images en CSS avec zoom au survol

une gallerie d'images en CSS avec zoom au survol - HTML/CSS - Programmation

Marsh Posté le 21-12-2006 à 14:43:40    

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 :
  1. <ul class="ulaffiche" >
  2.    <li><div><a href="liens vers l'image 1"><img src="miniature de l'image 1" alt="" /></a></div></li>
  3.    <li><div><a href="liens vers l'image 2"><img src="miniature de l'image 2" alt="" /></a></div></li>
  4.    etc...
  6. </ul>


et voilà le css qui va avec :

Code :
  1. .ulaffiche{
  2. 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*/
  3. display:block;
  4. padding:40px; /* pour avoir de la place de chaque côté pour faire dépasser le zoom sur les photos du bord */
  5. margin:0 auto 0 auto; /* pour centrer la galerie sur la page ou elle sera */
  6. background-color:#666666; /*couleur de fond de la gallerie */
  7. overflow:auto; /* pour firefox : permet de prendre en compte les élément float pour le dimensionnement du conteneur de la gallerie */
  8. }
  9. .ulaffiche li {
  10. 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 */
  11. width:128px; /* largeur de la case qui contient une photo */
  12. height:96px; /* hauteur */
  13. display:block; /* pour enlever les puces de la liste */
  14. overflow:hidden; /* pour IE : permet de superposer sur le reste la div plus grosse lors du zoom */
  15. padding:2px; /* bordure autour des images */
  16. background-color:#000000; /* couleur de fond sous les images */
  17. }
  18. *>.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 */
  19. .ulaffiche img {
  20. border:0; /* supprime les bordures bleue des liens */
  21. height:96px; /* définit la hauteur des images */
  22. max-height:96px; /* idem mais pour firefox */
  23. }
  24. .ulaffiche li div a {
  25. float:left; /* positionnement du liens dans la div*/
  26. margin:0 auto 0 auto; /* centre le liens et donc l'image*/
  27. width:128px; /* taille du liens, identique à celle de l'image */
  28. height:96px; /* idem */
  29. }
  31. .ulaffiche li div a:hover {
  32. position:relative; /* position de la div de zoom */
  33. margin-left:-40px; /* marges pour centrer la div zommé par rapport à l'image non zoomé */
  34. margin-top:-25px; /* idem */
  35. padding:2px; /* cadre autour de la div zoomé */
  36. height:150px; /* taille du zoom */
  37. width:200px; /* idem */
  38. 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 */
  39. border:1px solid #00ffff; /* bordure du zoom */
  40. }
  41. .ulaffiche li div a:hover img {
  42. height:150px; /* défini la hauteur des images zoomées */
  43. max-height:150px; /* idem pour firefox */
  44. }
 

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  :whistle:

 

si vous avez des remarque :jap:

 

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
Reply

Marsh Posté le 21-12-2006 à 14:43:40   

Reply

Marsh Posté le 22-12-2006 à 07:13:47    

Domage que le zoom pixelise l`image..  
Pourquoi ne pas faire le contraire? avoir des image de base grande (taille normale quand zoom actif) que tu reduit pour faire les miniatures?
 
Sinon ca a l`air pas mal

Reply

Marsh Posté le 22-12-2006 à 09:16:42    

ça pixelise parce que mes miniature sont pourri au départ, si tu met des miniature de meilleur qualité ç pixelisera pas ;) (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)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed