Créer un diaporama de 100 photos - CssPlay

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 :
<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>


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 :
<a class="horiz" href="#lscape1"><span><img src="images/pic_1ht.jpg" alt="" title=""></span><em><img src="images/pic_1h.jpg" alt="" title=""></em></a>


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



Cette page a été vue 2679 fois