Créer un diaporama multi-onglets - CssPlay
Table des matières
Un slideshow uniquement en css sans javascript ? Oui cela existe. Je suis tombée dessus par le plus grand des hasards.
Ce script vous permettra de présenter des mini-albums d'images sur votre site/blog. Le site original est en anglais et met la démo en visuel. Mais 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 : Complex slideshow -CssPlay
Les quatre onglets vous permettent d'ajouter un total de 96 images distinctes. Il est également possible d'avoir quelques lignes de texte descriptif qui apparaît sous les vignettes.
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.
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 taille 22px par 22px. Le survol stationnaire agrandit l'image soit à 64px par 48px pour les paysages et pour les 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.
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.
Et pour finir, remplacer les images dans le lien image <img src="images/pic_1h.jpg" etc ... par les vôtres.
Si vous avez des connaissances en CSS, il est possible de modifier les couleurs, fonds etc... Dans complex-slide.css.
Présentation
Un slideshow uniquement en css sans javascript ? Oui cela existe. Je suis tombée dessus par le plus grand des hasards.
Ce script vous permettra de présenter des mini-albums d'images sur votre site/blog. Le site original est en anglais et met la démo en visuel. Mais 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 : Complex slideshow -CssPlay
Les quatre onglets vous permettent d'ajouter un total de 96 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 taille 22px par 22px. Le survol stationnaire agrandit l'image soit à 64px par 48px pour les paysages et pour les 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 complex-slide.css.
Voir l'exemple
