Galerie d'images déroulante sans JavaScript
C'est un effet facile à construire, très simple même et qui avec quelques astuces pourra paraître très élaboré pour l'utilisateur.
Pour afficher une galerie simplement, sans surcharger une page avec des quantités de photos ni créer de vignettes et installer un système d'afficher genre lightbox.
Ce script de démonstration fonctionne avec Firefox, IE, Chrome, Safari, Opera.
Une iframe est intégrée ci-dessous et les images sont placées dans une autre page, affichée à l'intérieur de l'iframe...
Galerie ou lightbox?
On choisira plutôt une galerie associée à une lightbox quand on peut laisser l'utilisateur choisir les images parmi des vignettes, et les agrandir au besoin.
Mais la galerie déroulante à elle aussi, ses avantages:
- Présenter les images une à une.
- Sans faire de vignettes.
- Sans surcharger la page.
Elle crée un effet d'enchaînement qui peut être utile et il est facile de revenir sur une image avec la barre de défilement.
Les deux procédés ont le même inconvénient, les images ne sont pas accessibles aux moteurs de recherche dans le contexte de la page.
Pour promouvoir des images personnelles, il faut les intégrer chacune dans leur page propre avec les données utiles, ce qui est aussi bien pour les moteurs et pas incompatible avec une galerie.
Comment créer la galerie
Deux pages sont nécessaires
1) Créer la page d'images
Il convient pour une galerie horizontale de donner la même hauteur aux images, ce qui peut être fait en bloc avec un script comme Thumbnail Maker de Scriptol sur GitHub.
Si l'on veut présenter la galerie, verticalement, c'est la largeur que l'on rendra uniforme.
Les images sont placées dans une page HTML vide les unes à la suite des autres (sans retour à la ligne). Mais pour éviter le retour à la ligne et avoir une barre de défilement à la palce, on doit définir une largeur fixe à la page. Pour cela on additionne la largeur de toutes les images.
La feuille de style de cette page d'image sera comme ceci:
body
{
width:3096px;
height:400px;
background-color:#ccc;
margin:0;
padding:0;
border:none;
}Un fond gris fournit un meilleur rendu. Avoir on non un bord pour l'iframe est un choix personnel, on pourrait aussi présenter un bord large: border:4px;
Dans la démo on nomme cette page: galerie-deroulante-iframe.html.
2) Insérer une iframe dans la page de présentation
Cela se fait avec le code suivant:
<iframe id="gallery" src="galerie-deroulante-iframe.html">
</iframe>On définit les dimensions de la fenêtre avec une feuille de style:
#gallery
{
height:424px;
width:500px;
}La page de démonstration peut être utilisée comme point de départ pour une utilisation personnelle.
Améliorer l'effet
On peut encore:
- Placer un libellé sous chaque image. L'utilisation d'un tableau serait alors utile, ou une feuille de style élaborée.
- Alterner des textes avec les images.
- Combiner un texte avec les images pour une même vue.
Tout cela fournit un effet de belle facture, qui laisse penser à une mise en oeuvre bien supérieure aux moyens tout à fait minimes réellement employés!