Aller au menu - Aller au contenu

Icône TP : diaporama original en CSS

Avatar
Par Avatar Ceriko
Mise à jour : 18/12/2010
Difficulté : Facile Facile Durée d'étude : 6 heures
933 visites depuis 7 jours, classé 134/786

Sujet


Nous allons apprendre à créer un diaporama original dont toutes les miniatures se trouveront autour de la zone d'agrandissement. Il sera entièrement réalisé en CSS et dans un premier temps il comportera 36 photos.

Voici un exemple de ce que je vous propose d'apprendre à faire afin que vous compreniez bien (exemple volontairement très basique pour agréablement vous surprendre par la suite).

Public concerné


Ce TP a principalement été rédigé à l'intention des Zéros qui viennent de suivre le cours de M@teo21 et qui cherchent une assistance pour travailler un peu plus sur le CSS et être capables de gérer un site de plusieurs pages. Plus tard on simplifiera même le code à l'aide de PHP, grâce auquel on réduira drastiquement le nombre de pages en augmentant considérablement nos possibilités.

Prérequis


Pour la partie I : tous les chapitres requièrent une bonne connaissance du tutoriel XHTML / CSS de M@teo21.
Pour la partie II : il faudra en plus une bonne maîtrise du cours de PHP du même auteur (au moins la partie I dans sa totalité et le début de la partie II : Transmettre des données avec l'URL).

J'insiste sur le fait que, sans les bases requises, vous perdrez votre temps.
Et j'ajoute que si vous n'êtes pas intéressés par PHP, vous pouvez vous contenter de la partie I : vous saurez réaliser un joli diaporama dès le troisième chapitre.

Raison d'être de ce TP


Pour être tout à fait franc, c'est le tutoriel que j'aurais moi-même aimé trouver pour continuer à apprendre rapidement et simplement. Et suivant le principe du Site du Zéro, je partage.

Quoi d'autre ?


On ajoutera progressivement des fonctionnalités à notre diaporama pour lui donner de la gueule ! Et vous allez apprendre à le modifier selon vos souhaits sans plus avoir besoin de moi. C'est-à-dire un nombre de photos variable, des tailles et des formes différentes, de la transparence, des bordures… Un TP, quoi !

Précisions


Il ne sera absolument pas question de JavaScript ou de Flash dans ce TP, on parlera uniquement CSS et XHTML.
Il n'est pas prévu de faire fonctionner ce diaporama sur IE6/7/8. Pas de patch IE au programme, donc.

Voici ce que vous saurez faire à la fin de ce tutoriel !


Image utilisateurImage utilisateur


Alors, motivés ?
Retour en haut
Ce cours est composé des parties suivantes :
Retour en haut
Nous en avons terminé avec notre projet qui, je le souhaite sincèrement, vous a plu et vous sera utile.

Si vous avez des remarques sur le contenu, des suggestions d'amélioration, des objections, des doutes, des problèmes à comprendre certains points ou au contraire des éclaircissements à apporter, vous savez où aller !

Oh, et n'hésitez pas à m'envoyer un lien vers vos créations !

Cordialement,
Ceriko.
Retour en haut

Partager

Retour en haut

Lire aussi

Icône
Prêts pour notre mégadiaporama ?
Icône
Quelques notions de CSS
Icône
Customisons notre diaporama… (1/2)
Icône
Un diaporama original en CSS
Retour en haut
27 commentaires pour "TP : diaporama original en CSS"
Note moyenne : 3.76 / 4 (38 votes)
Pseudo Commentaire
Hors ligne Hyperboreen # Posté le 28/02/2012 à 23:10:23

Hello Ceriko,
Je travaille (dur) à la création de mon site et j'ai repris ton code pour le diaporama. Je l'ai beaucoup modifié pour intégrer un diaporama correspondant à mes besoins en terme de format... Par contre, il y a un truc que je n'arrive pas a optimiser: quand tu modifies la taille de ton navigateur (zoom et dézoom), le diaporama saute complètement... j ai réussi à "fixer" les vignettes avec des inline-block mais pas la photo agrandie...
Est ce que j'ai raté qq ch?
Hors ligne pouxinette # Posté le 03/03/2012 à 16:53:22
Avatar

 Super tuto! Mais peut on faire la même chose avec en plus la possibilité de cliquer sur la miniature et que l'agrandissement reste visible et fixe jusqu'à ce qu'on survole une autre miniature?tout en restant en css et html?
merci d'avance!
Hors ligne Ceriko # Posté le 04/03/2012 à 12:09:03
Life is good !
Avatar

Avis : Très bon

Ville : Barcelona
Pays : Espagne

 @ pouxinette

A ma connaissance le CSS ne gère pas les clics comme tu l'entends (à part le focus), donc non. Mais l'agrandissement reste déjà visible jusqu'à ce que tu survoles une autre miniature, non ?

Ou bien tu veux que l'agrandissement reste visible même si tu sors de la miniature ? Dans ce cas là c'est possible que l'agrandissement reste lorsque tu déplaces la souris sur l'agrandissement, mais pas lorsque le pointeur sort complètement du diaporama après avoir survolé une miniature. Comme dans cet exemple.

Pour ça il faudra que tu te tournes vers le js.
Créez un diaporama original en CSS à partir de zéro

Modérateur sur DarkyROM : donnez le meilleur à votre Galaxy S :D
 
Hors ligne pouxinette # Posté le 05/03/2012 à 16:18:59
Avatar

 Oui en fait je cherche à ce que l'agrandissement reste meme si on sort complètement la souris du diaporama, car j'ai mis des commentaires à côté qui peuvent etre longs.
Bon ben y'a plus qu'à apprendre le javascript... Merci pour ta réponse!
Hors ligne Ceriko # Posté le 05/03/2012 à 20:34:45
Life is good !
Avatar

Avis : Très bon

Ville : Barcelona
Pays : Espagne

 Citation : Hyperboreen
Hello Ceriko,
Je travaille (dur) à la création de mon site et j'ai repris ton code pour le diaporama. Je l'ai beaucoup modifié pour intégrer un diaporama correspondant à mes besoins en terme de format... Par contre, il y a un truc que je n'arrive pas a optimiser: quand tu modifies la taille de ton navigateur (zoom et dézoom), le diaporama saute complètement... j ai réussi à "fixer" les vignettes avec des inline-block mais pas la photo agrandie...
Est ce que j'ai raté qq ch?


Salut,

Je ne comprends pas bien ton problème... par contre je me suis rendu compte que sous Windows/Chrome mon résultat final a un problème lorsque je l'agrandis, oups !
Créez un diaporama original en CSS à partir de zéro

Modérateur sur DarkyROM : donnez le meilleur à votre Galaxy S :D
 

Voir tous les commentaires
Ce tutoriel a été corrigé par les zCorrecteurs.