Créer une galerie sectionnée - CssPlay

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



Cette page a été vue 1904 fois