Créer une galerie sectionnée - CssPlay
Table des matières
Une simple galerie pour exposer astucieusement une bonne huitaine d'images tout au plus.
Le site original est en anglais et met la démo en visuel. Mais le site ne fourni pas d'archive de mise à disposition. Je précise toutefois que pour mettre ce diaporama, il vous faudra poser un lien vers le site de CSSPlay, pour en respecter les droits d'auteurs comme je viens de le faire. (Cela ne coute rien !).
Note: Pour vous faciliter le travail, j'ai partiellement traduit les parties les plus importantes et fais la compilation de la démonstration en archive.
Commencez par télécharger : clip_gallery.zip
Une galerie sur 8 frame.
Encore une fois, c'est très simple, l'index, dans l'archive est déjà prêt à l'emploi. Il ne vous reste juste qu'à faire vos propres modifications.
Placez vos images miniatures et larges dans le dossier : images.
Ensuite, ouvrez index.html avec votre éditeur web ou le bloc-note. C'est en regardant ce bout de code html que vous allez comprendre comment placer les images.
Et pour finir, remplacer les images dans le lien image <img src="images/xxx.jpg" ainsi que les "title" et les "alt" etc ... par les vôtres.
Si vous avez des connaissances en CSS, il est possible de modifier les couleurs, fonds etc... Dans gallery.css.
Présentation
Une simple galerie pour exposer astucieusement une bonne huitaine d'images tout au plus.
Le site original est en anglais et met la démo en visuel. Mais le site ne fourni pas d'archive de mise à disposition. Je précise toutefois que pour mettre ce diaporama, il vous faudra poser un lien vers le site de CSSPlay, pour en respecter les droits d'auteurs comme je viens de le faire. (Cela ne coute rien !).
Note: Pour vous faciliter le travail, j'ai partiellement traduit les parties les plus importantes et fais la compilation de la démonstration en archive.
Télécharger
Commencez par télécharger : clip_gallery.zip
Une galerie sur 8 frame.
L'installation
Encore une fois, c'est très simple, l'index, dans l'archive est déjà prêt à l'emploi. Il ne vous reste juste qu'à faire vos propres modifications.
Les images
Placez vos images miniatures et larges dans le dossier : images.
Ensuite, ouvrez index.html avec votre éditeur web ou le bloc-note. C'est en regardant ce bout de code html que vous allez comprendre comment placer les images.
Code HTML :
<a class="pos1" href="#nogo"><img src="images/hummingbird.jpg" alt="Hummingbird" title="Hummingbird"></a> <a class="pos2" href="#nogo"><img src="images/sunflower.jpg" alt="Sunflower" title="Sunflower"></a> <a class="pos3" href="#nogo"><img src="images/hummingbird2.jpg" alt="Hummingbird" title="Hummingbird"></a> <a class="pos4" href="#nogo"><img src="images/dragonfly.jpg" alt="Dragonfly" title="Dragonfly"></a>
Et pour finir, remplacer les images dans le lien image <img src="images/xxx.jpg" ainsi que les "title" et les "alt" etc ... par les vôtres.
Astuce
Si vous avez des connaissances en CSS, il est possible de modifier les couleurs, fonds etc... Dans gallery.css.
Voir l'exemple
