FAT78 - Artisan numérique
 

> Lab > Diaporama "anythingslider"

jeudi 28 janvier 2016

Diaporama "anythingslider" ?

Après avoir installé le plugin "anythingslider" (version 1xx pour spip2.1), la documentation explique comment intégrer dans mes squelettes une partie de code constitué par :
- une boucle spip de recherche des éléments à afficher
- un javascript qui réalise le diaporama des éléments fournis par la boucle

Donc, rien n’empêche d’écrire un modèle "anythingslider.html" dans lequel je mets ce code, agrémenté de variables d’environnement #ENV permettant de passer au diaporama tous les paramètres possibles ... c’est ce que j’ai fait !

Zip - 1.2 ko
anyslide-html.zip

Voici le résultat de mon modèle "anyslideXX" sans aucun paramètre additionnel autre que le numéro XX de l’article contenant les images à afficher :
<anyslide15>

Le diaporama est bien "responsive" et s’adapte automatiquement à la largeur de l’écran (pas besoin de recharger la page) et dynamiquement au format (portrait ou paysage) de l’image. L’image présentée est cliquable et s’affiche en plein écran dans une fenêtre "fancybox". Super !!!

Avec mon modèle <anyslideXX> voici les paramètres qu’on peut passer au diaporama :
- |widthbgd=largeur du fond du diaporama en % (par défaut : 100%)
- |alignbgd=alignement du fond du diaporama à gauche (=left) ou à droite (=right) (par défaut : left)
- |marginbgd=marges horizontales du fond du diaporama en % (par défaut : 0%)
Le diaporama peut ainsi être aligné à gauche ou à droite du texte.
Pour centrer le diaporama il faut donner des valeur "widthbdg" et "marginbgd" telles que "widthbdg" + 2x"marginbgd" = 100%
- |fond=couleur du fond en #rgb (par défaut : #fff =blanc)
- |margin=marges autour du diaporama en % (par défaut : 0)
- |extension=extension des fichiers à charger : jpg ou jpeg ou gif ou png (par défaut : ces quatre extensions sont validées)
- |width=largeur de l’image en % (par défaut : 100% = remplissage à 100% du fond du diaporama)
Le diaporama conserve les proportions des images, donc il n’est pas nécessaire de définir le paramètre de hauteur : néanmoins on peut définir largeur et hauteur des images en pixels, ce qui recadrera toutes les images aux dimensions indiquées mais qui fera perdre le caractère "responsive" du diaporama.
- |vertical=défilement du diaporama vertical (=true) ou horizontal (=false) (par défaut : false)
- |timeout=durée d’affichage de chaque image en msec (par défaut : 2000 =2sec)
- |pause=durée de transition entre deux images en msec (par défaut : 1000 =1sec)
- |numbers=présence en bas du diaporama des onglets numérotés de chaque image (=true) ou absence (=false) (par défaut : true)
- |startstop=présence en bas du diaporama de la commande de défilement (=true) ou d’arrêt (=false) (par défaut : true)

Voici un deuxième diaporama (mais oui, on peut faire tourner deux diaporamas simultanément !) à défilement vertical, qui occupe 40% de la largeur de la page (34%+2*3%) et qui est aligné à gauche : donc le texte lui coule autour. Son écriture :
<anyslide16 |widthbgd=34% |alignbgd=left |marginbgd=3% |numbers=false |startstop=false |vertical=true |timeout=3000 |pause=500>


SPIP | | Plan du site | Suivre la vie du site RSS 2.0