Présentation
Comme son grand frère, mais en galerie 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 : Simple slideshow -CssPlay
La galerie vous permet d'ajouter un total de 24 images distinctes. Il est également possible d'avoir quelques lignes de texte descriptif qui apparaît sous les vignettes.
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
Note: Celui-ci est très simple et n'utilise pas d'images miniatures. L'image que vous voyez est la taille originale qui est d'abord réduite à un petit rectangle 22px par 22px taille. Le survol stationnaire agrandit l'image soit à 64px par 48px pour les paysages et pour le portraits en 48px par 64px. Un clic sur l'image vous permettra de l'afficher.
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 :
<li><a href="#nogo" class="hor"><img src="images/pic_1h.jpg" alt="" title=""><b>Votre descriptif.</b></a></li> <li><a href="#nogo" class="vert"><img src="images/pic_1v.jpg" alt="" title=""><b>Votre descriptif.</b></a></li> <li><a href="#nogo" class="hor"><img src="images/pic_2h.jpg" alt="" title=""><b>Votre descriptif.</b></a></li> <li><a href="#nogo" class="vert"><img src="images/pic_2v.jpg" alt="" title=""><b>Votre descriptif.</b></a></li>
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 par CSS width (Largeur) :64px par height (hauteur) 48px
- Large par CSS width (Largeur) : 240px par height (hauteur) 320px
- class="hor" signifiant une position horizontale. Format paysage.
- Miniature par CSS width (Largeur) : 48px par height (hauteur) 64px
- Large par CSS width (Largeur) : 320px par height (hauteur) 240px
Et pour finir, remplacer les images dans le lien image <img src="images/pic_1h.jpg" etc ... par les vôtres.
Astuce
Si vous avez des connaissances en CSS, il est possible de modifier les couleurs, fonds etc... Dans simple-slide.css.
Voir l'exemple
