Accueil > Documentation > Mode d’emploi du plugin Supersized SlideShow pour SPIP
Mode d’emploi du plugin Supersized SlideShow pour SPIP
dimanche 3 février 2013, par
Description et utilisation
Une seule page de squelette (slide.html) est proposée. Pour lancer le slideshow, il suffit donc d’appeler la page spip.php?page=slide
avec éventuellement des paramètres. Cette page permet l’affichage de portfolios d’images [1] :
- provenant de l’ensemble du site en l’absence de paramètre (
spip.php?page=slide
) - attachées à une rubrique ou un article s’ils sont précisés (
spip.php?page=slide&id_rubrique=1
par exemple).
Les lignes supérieures servent à une navigation basique :
- retour à l’accueil du site (vie la nom du site ou le logo du site si présent)
- liste cliquable de slideshow disponibles, en l’absence de paramètre id_rubrique et id_article
- retour à la page article ou rubrique du slideshow dont les images sont affichées dans le slideshow
Le clic sur l’image entraîne son affichage "hors slider".
La barre de navigation propose les fonction classiques : stop/play, nombre de photos, repères de navigation (paramétrables), affichage/masquage de la barre de vignettes. Un contrôle basique est possible au clavier, barre d’espacement pour le start/stop et flèches pour l’avancement/recul. A noter encore : si vous titrez vos image, ce titre s’affiche dans la barre de navigation.
Le plugin propose aussi un modèle <supersized|>
qui crée le lien vers le slideshow de la rubrique ou de l’article dans lequel le modèle est inséré. Des paramètres peuvent être précisés lors de l’appel au modèle, sous la forme <supersized|paramètre1=valeur|paramètre2=valeur|...>
Paramètres
En plus de id_rubrique
ou id_article
, le squelette prend quelques paramètres optionnels en considération. En voici la liste suivi du tableau des valeurs par défaut et des surchages possibles.
- nbre_max : le nombre maximum d’images à insérer dans le slideshow (entier, par défaut 25)
- tri : les critères habituels de tri de SPIP (
{par ...}
, voir http://www.spip.net/fr_article5531....) - triinverse : idem que tri mais avec
{inverse}
(http://www.spip.net/fr_article5530....) - transition : le type de transition entre les images (00 ou chiffre entre 1 et 7, par défaut : 3 - recouvrement depuis la droite)
- pause : durée d’affichage des images
- vitesse : durée de la transition
- nolinks : empêcher l’affichage des bulles de navigation par images
- noclic : empêche d’ouvrir l’image seule depuis le clic sur le slideshow (gaston).
- taille : permet de choisir la taille maximum des images parmi 3 formats (640px,1200px, 1600px). Le poids des images est adapté selon leur taille.
Paramètre | Valeur par défaut | Valeurs alternatives |
---|---|---|
nbre_max | 25 | toute valeur entière |
tri | - | titre,num,etc. |
triinverse | - | titre,num,etc. |
transition | 3 | 00-aucune, 1-fondu, 2-recouvrement du haut , 3-recouvrement de droite, 4-recouvrement du bas, 5-recouvrement de gauche, 6-glissement de droite, 7-glissement de gauche |
pause | 5000 | millisecondes - durée d’affichage des images |
vitesse | 1000 | millisecondes - durée de la transition |
nolinks | 0 | 1 -pas d’affichage de bulles de navigation par images |
noclic | 0 | 1 => les images du slideshow ne sont pas cliquables |
taille | normal | 1200px / jpg 0.70
![]() ![]() |
Pour afficher pendant 5 secondes les 10 premières images du portfolio de la rubrique 1 avec une transition de type fondu réalisée en 0,5 secondes, on utilisera donc : spip.php?page=slide&pause=5000&nbre_max=10&tri=id_document&id_rubrique=1&transition=1&duree=500
(spip.php?page=slide&pause=5000&...).
A propos des images
Depuis la version 0.3.0, supersized réduit par défaut les images du slide, ce qui permet de dispenser les utilisateurs qui le souhaitent du travail de compression préalable.
Il va de soi que, sauf à vouloir tuer votre serveur et les navigateurs de vos clients, il faut mettre en ligne des images d’un poids raisonnable. Tenant compte de la résolution des "plus grands" écrans, l’auteur du script propose 1200px max pour la plus grande longueur. Par ailleurs, réduire la résolution est également une bonne chose. Depuis la version 0.5 de ce plugin, le slideshow est disponible en 3 tailles qui permettent de gérer la panoplie des écrans.
Navigateurs
Ce plugin donne un résultat tout à fait convenable sur :
Opéra 12 (Mac/LMDE [2])
Firefox 17 (LMDE)
Chromium 22 (LMDE)
Wine Internet Explorer (wine 1.4.1 / LMDE ;-) )
Webkit (rekonq 0.9.2 - LMDE)
Internet Explorer 8
sur mon mobile Symbian^3, Opera mobile et Nokia browser (webkit) souffrent avec les transitions mais la vitesse et l’affichage sont ok.
... et chez vous ?
Evolutions possibles
Voir Journal des évolutions.
[1] Selon le principe historique de SPIP, les images et documents qui ne sont pas dans le portfolio sont en principe destinés à être insérés dans le texte d’un article ou d’une rubrique. Nous ne ciblons pas ces images là avec ce plugin.
[2] Linux Mint Debian Edition
Messages
1. Mode d’emploi du plugin Supersized SlideShow pour SPIP, 4 février 2013, 18:17, par Jacques
Merci beaucoup pour ce plugin qui permet de visualiser les photos de façon très agréable !
Je voulais l’utiliser sur un article avec beaucoup de photos alors j’ai utilisé le modèle
<supersized|>
. J’ai recopié slide.html dans mon dossier squelettes et j’ai poussé la limite à 125 !Ensuite il m’a fallu commenter l’affichage du logo du site. Le mien cachait toutes les photos.
Enfin d’avoir mis tant de photos faisait déborder les "bulles" de navigation sur la flèche permettant de faire apparaître les vignettes, alors j’ai inséré un style inline pour rajouter un margin-right, ce qui donne ligne 133 de slide.html :
<ul id="slide-list"style="margin-left: -350px; margin-right: 130px;"></ul>
Ensuite c’est tellement agréable de regarder les photos défiler :)
2. J’y arrive pas, mais très bon boulot., 16 avril 2013, 15:42, par gaston
Bonjour,
Ça fait deux ans que je tente d’adapter ce type de diaporama pour spip, en bricolant car c’est pas trop mon domaine,
J’avais réussis a reprendre le principe du site
http://www.ringvemedia.com/shanghai-photos, et a faire une boucle spip pour l’actualisé, avec aussi une ligne no-conflit entre le jquery moontools et spip,
Mais il adapte mal les photos sur diffèrent navigateur, et niveau code ça doit pas etre très propre.
Et donc, c’est super qu’un pluging voit le jour et merci à Suske !.
Cependant les photos ne s’affichent pas, j’ai spip3, mis supersize dans un dossier plugins, j’ai une rubrique=3.html dans l’aquelle je veux y appeler la page slide.html.
C’est là que je comprend pas trop comment l’appeler, avec inclure ? en y mettant Voir le slideshow il ne se passe rien. En y mettant tout le code de la page, j’ai bien le css avec tout les boutons, les liens vers le plugins sont actif, mais aucune image ne s’affichent...
Si quelqu’un a une idée je suis preneur :
http://sitederecherches.web4me.fr/spip.php?rubrique3
3. Mode d’emploi du plugin Supersized SlideShow pour SPIP, 16 avril 2013, 16:30, par gaston
Bon en faite c’était tout bête, il faut après chaque chargement d’image l’attaché au portfolio. Je cherche comment supprimer l’option clique sur l’image pour afficher hors slide.
4. Mode d’emploi du plugin Supersized SlideShow pour SPIP, 1er mai 2013, 17:44, par Suske
@gaston : J’ai rajouté une option à cette effet. Il suffit désormais d’indiquer le paramètre
noclic=1
dans l’appel au modèle ou dans une url. Cela se trouve dans la v. 0.4 que je publie ce jour.