Un slideshow plein écran en arrière-plan

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 Suske

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.
Tableau récapitulatif
ParamètreValeur par défautValeurs 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
- petit => 640px / jpg 0.75
- grand => 1600px / jpg 0.65

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.


[1Selon 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.

[2Linux Mint Debian Edition

Messages

  • 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 :)

  • 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

  • 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.

  • @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.

Un message, un commentaire ?

modération a priori

Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

Qui êtes-vous ?
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides.