Créer un diaporama de 100 photos - CssPlay
Table des matières
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.
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.
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.
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.
Ici c'est le premier lien : <img src="images/pic_1vt.jpg"
- pic_1vt.jpg: Le 1VT signifiant : verticale thumbnail
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.
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 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.
Code HTML :
<a class="vert" href="#portrait1"><span><img src="images/pic_1vt.jpg" alt="" title=""></span><em><img src="images/pic_1v.jpg" alt="" title=""></em></a> <a class="vert" href="#portrait2"><span><img src="images/pic_2vt.jpg" alt="" title=""></span><em><img src="images/pic_2v.jpg" alt="" title=""></em></a> <a class="vert" href="#portrait3"><span><img src="images/pic_3vt.jpg" alt="" title=""></span><em><img src="images/pic_3v.jpg" alt="" title=""></em></a> <a class="vert" href="#portrait4"><span><img src="images/pic_4vt.jpg" alt="" title=""></span><em><img src="images/pic_4v.jpg" alt="" title=""></em></a> <a class="vert" href="#portrait5"><span><img src="images/pic_5vt.jpg" alt="" title=""></span><em><img src="images/pic_5v.jpg" alt="" title=""></em></a>
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.
- class="vert" signifiant une position verticale. Format portrait.
- Miniature Portrait par CSS width (Largeur) :46 px par height (hauteur) 62 px.
- Image large (dossier "images") width (Largeur) : 480 px par height (hauteur) 640 px
- class="horiz" signifiant une position horizontale. Format paysage.
- Miniature par CSS width (Largeur) : 62 px par height (hauteur) 46px.
- Image large (dossier "images") width (Largeur) : 640 px par height (hauteur) 480 px
Reconnaitre les liens images miniatures
Exemple pour les verticales
Code HTML :
Ici c'est le premier lien : <img src="images/pic_1vt.jpg"
- pic_1vt.jpg: Le 1VT signifiant : verticale thumbnail
Exemple pour les horizontales
Code HTML :
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
