Présentation
Une simple galerie pour y poser 100 photos ou images à votre gout unique .
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
:
SlideShow-for-100-images.zip
La galerie fait mention de 10 mini-galeries prédéfinies de # 1 à # 10 vous permettant d'afficher une série de dix images,
soit un total de 100 images distinctes.
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.
Détails: Pour que vous compreniez bien la corrélation entre images et propriété css, je vais pousser un peu plus loin mes explications.
Ici la class dans lien
href est très importante ! C'est la
class qui définira si votre image est un format
paysage ou
portrait.
Reconnaitre les liens images miniatures
Exemple pour les verticales
Ici c'est le premier lien :
<img src="images/pic_1vt.jpg"
-
pic_1vt.jpg: Le 1VT signifiant : verticale thumbnail
Exemple pour les horizontales
Ici c'est le premier lien :
<img src="images/pic_1ht.jpg"
-
pic_1ht.jpg: Le 1VT signifiant : horizontale thumbnail
Et pour finir, remplacer les images dans le lien image
<img src="images/xxx.jpg" 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