Cet exercice consiste à utiliser des transitions css pour gérer l’affichage d’une galerie d’images. Dans un second temps, la galerie doit être rendue totalement fonctionnelle avec javascript.
Consignes de l’exercice
Récupérez les fichiers de travail nécessaires pour faire l’exercice. Si vous souhaitez compliquer un peu l’exercice, vous pouvez ne pas récupérer les fichiers html et css et vous contentez de récupérer les images.
Pour télécharger un fichier, faites un clic droit sur le fichier désiré et choisissez l’option Télécharger.
Pour télécharger plusieurs fichiers, sélectionnez les fichiers désirés puis cliquez sur Télécharger les sélectionnés. Les fichiers seront téléchargés sous la forme d’une archive .zip. Veillez à bien extraire le contenu de l’archive avant de commencer à travailler.
Modifiez le CSS afin de reproduire l’effet présenté dans l’exemple ci-dessous.
DémonstrationModifiez le CSS afin de reproduire l’effet présenté dans l’exemple ci-dessous..
DémonstrationÀ l’aide de javascript, faites en sorte que la galerie permette de zoomer l’image au clic sur la vignette comme dans l’exemple ci-dessous.
DémonstrationCorrection
Sauf mention contraire*, l'article Transitions CSS : Birds Gallery [CSS17] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons
Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.
* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.