Faire le Jacques

Cet article décrit un plugin de diaporama (slideshow) pour le blog b2evolution v5 et v6 (jusqu'à 6.9.7) - v7 non testée.

J'ai précédemment développé une version un peu améliorée du Photoblog de b2evolution (explications sur le forum). Les améliorations portaient notamment sur la possibilité 1/ utiliser un lien pour afficher soit un index limité à la catégorie (l'album) en cours soit un index complet et 2/ (non disponible pour la version v5/v6) de contrôler le défilement automatique des photos de la catégorie (de l'album). Je ne propose plus de télécharger le Photoblog amélioré puisqu'il n'est plus compatible avec les versions récentes de b2evo. cliquer ici

Le nouveau plugin b2slideshow

(voir le lien de téléchargement en bas de page)

J'ai développé pour mon blog b2evolution un plugin affichant un diaporama (slideshow en anglais) dans un article (un post), à partir des fichiers-images contenus dans un même dossier. Selon le choix de l'utilisateur, le diaporama peut s'afficher soit dans la zone d'entête de l'article (le "teaser" dans la terminologie b2evo), soit dans le corps de l'article. Par exemple, le diaporama ci-dessous est paramétré pour s'afficher dans le corps de l'article, présenter une interface en français, de 440 pixels de large et pour changer de photo toutes les 10 secondes. Par défaut le lancement est automatique, mais il peut être paramétré. Voir une autre démo avec les photos affichées en entête dans le photoblog (clic).

 

|< < o>>| 

>>>>>>

 * ?

Diaporama (delai: 10s)

Au départ la photo change toutes les 10 sec mais on peut passer à la suivante en cliquant sur la photo ou faire des réglages avec la barre de navigation estompée en haut de chaque photo. En mode plein écran utiliser les flèches gauche ou droite, le clavier numérique pour changer la vitesse, la touche moins pour sortir.
 
Pour copier une photo arrêter le défilement auto [o] puis utiliser le bouton droit de la souris ...
 
Pour effacer ce texte : cliquer ici !
 
©Jacques Louvel 2010-2020

Notez la barre de navigation située dans le haut de l'image, partiellement estompée hors des changements d'image. Elle permet d'arrêter ou (re)démarrer le diaporama et de régler sa vitesse ou encore de passer d'une photo à une autre manuellement. Elle propose également une option d'affichage plein écran (*) et une aide simplifiée (?). NB on peut aussi passer à l'image suivante en cliquant sur l'image en cours (cela interrompt le diaporama).

Voici les principales fonctionnalités du plugin:

• Insertion d'un diaporama n'importe où dans un article à l'aide d'un code simple similaire aux codes de liens Wikipedia. Deux versions sont disponibles : v1 = avec iframe et v2 (puis v3) = sans iframe (NB seule la version 2/3 a été adaptée aux version 5 et 6 (ou sup) de b2evo)
• Le code utilisé dans le diaporama ci-dessus est par exemple : code version 1 = § § fr : 10 : 360 : photos/vieille_auto&t=1 § §
  { { fr : 10 : 440 : photos/vieille_auto &t=0 } }
  { { vitesse=10 ; taille=440 ; chemin=photos/vieille_auto ; position=1 } }
  On voit qu'il s'agit 'une série de paramètres séparés par ';' . NB ne pas mettre d'espace ! Il y en a ici seulement pour la lisibilité.
• La langue utilisée pour les messages de service est la langue par défaut du blog ou celle définie lors de la création de l'article. On peut créer - facilement - des fichiers de traduction pour d'autres langues en prenant pour modèle le fichier prévu pour fr-FR dans le dossier 'locale' du plugin.
• La vitesse du diaporama est réglable. Le paramètre 10 dans l'exemple signifie 10 secondes entre 2 images; les valeurs possibles vont de 1 à 99 secondes; 0 affiche seulement la première image du dossier.
• La taille de la fenêtre image est réglable. Le code 440 fixe la largeur en pixels de l'image affichée. On dispose de valeurs standard optimisées pour respectivement le photoblog (1024, 800, 720, 620) et les blogs de texte avec barre latérale (440); des valeurs intermédiaires sont toutefois possibles entre 100 et 999 pixels.
• Le chemin conduisant aux images (obligatoirement dans le dossier "mon-b2evo/media/blogs" qui est implicite) est indiqué après la largeur d'image.
• Position du diaporama : la dernière partie du code, après le chemin, contient des paramètres supplémentaires : position=1 indique que le diaporama sera dans le corps de l'article, comme dans l'exemple ci-dessus. Avec position=3 le diaporama serait aussi dans le corps de l'article, mais inclus dans un cadre (iFrame), ce qui autorise plusieurs diaporamas dans le même article. Avec position=0 le diaporama serait dans la zone d'entête, avant le début du texte. Avec position=2, aucun diaporama ne s'afficherait, seulement un index des photos (voir l'option "Index des images").

    L'exemple ci-dessous est paramétré en taille 620px avec l'option position=3. Il est donc inscrit dans un cadre (une "iframe") qui lui permet de cohabiter dans la même page que l'exemple précédent. Pour éviter d'avoir des images qui changent dans tous les sens, ce diaporama supplémentaire ne se lance pas automatiquement lors de l'affichage de la page. Pour le lancer, il faut cliquer dans la barre de commande.

 

Autres paramètres optionnels non utilisés dans les exemples ci-dessus
(voir la liste complète des paramètres plus bas)

• Liste des images : le diaporama affiche toutes les images (dont les formats sont autorisés) contenues dans le dossier indiqué par le chemin. Cependant le paramètre 'liste=fichier.txt' permet de passer au plugin le nom d'un fichier texte contenant les noms des fichiers images à afficher ainsi que, optionnellement, pour chaque fichier un titre ou commentaire à placer sous l'image.
• Index des images : on peut ajouter, dans le corps du message, en complément du diaporama ou en remplacement, un index (paramètre index=1) des fichiers du diaporama sous forme de vignettes cliquables.
• Mode plein écran : le diaporama peut se dérouler plein écran (pour passer dans ce mode utiliser l'option '*' de la barre de commande ou la touche '+' du clavier. Echap ou touche '-' pour quitter le mode). Quand le diaporama est plein écran, on peut utiliser les touches flèches gauche et droite pour passer à l'image précédente ou suivante (comme dans le mode normal, cela interrompt le diaporama automatique)
• Zoom profond : le paramètre zoom=0 permet l'affichage d'une image dite en "zoom profond" (utilisant le script libre openSeaDragon). Cela signifie que le visiteur peut zoomer dans l'image jusqu'à un niveau déterminé par le blogueur lors de la préparation de l'image. Voir les détails sur le site openSeaDragon (en anglais). Voir un exemple ICI.
• Compatibilité avec B2evo : la version actuelle du plugin (v3.2) est compatible avec les versions 5 et 6 de b2evo. Le plugin a été entièrement réécrit pour autoriser d'une part des mots-clés plus "parlants" (voir plus loin) et d'autre part pour rendre tous les paramètres optionnels (sauf, bien sûr, le chemin des images à afficher). Les anciens codes restent valides, mais il faut simplement réenregistrer les articles pour que le diaporama s'exécute.

Un peu de technique : le plugin que je propose est le descendant d'un diaporama que j'avais programmé pour présenter mes photos familiales. Le plugin est à classer dans la catégorie "plugin de rendu" (rendering). Il est écrit en PHP et il prépare du code HTML dont l'affichage est contrôlé par du javascript. L'insertion du code html se fait directement dans une div située soit dans le corps de l'article (paramètre t = 1), soit à la place du "teaser" ou image d'entête (paramètre t = 0) qui doit dans ce cas avoir été préalablement définie. Le blogueur a donc dans tous les cas uniquement un code court à entrer (voir l'exemple ci-dessus).

Les skins compatibles. Les skins de b2evo ne sont pas toutes construites sur le même modèle et certaines entraînent un traitement particulier pour que le diaporama s'exécute *dans le teaser* (l'exécution dans le corps de l'article ne devrait poser de problème dans aucune skin). Les skins suivantes sont compatibles avec l'exécution dans le "teaser": photoblog (bien sûr), evopress, nifty_blue (yellow, green), nifty_corners, dating_mood, pixelgreen. D'autres qui n'ont pas été testées peuvent cependant être compatibles également. Un test vérifie la compatibilité lors de la tentative de lancement du diaporama et il vous en informe.

Les navigateurs compatibles. Le plugin et la page diaporama ont été testés avec les principaux navigateurs dans leurs versions récentes : MSIE de 9 à 11, Firefox, Opera, Google Chrome et dérivés. Tout va bien pour tous (sauf un problème de rapport hauteur/largeur des images en plein écran pour Chrome).

Tous les paramètres (tous optionnels sauf le chemin vers les images)
Les valeurs par défaut des paramètres peuvent être adaptées dans le fichier jl_b2diarama.ini.inc (prudence !)

• modèle { {lang=xx;interval=n;width=n;path=xxxxxx;etc...} }
• langue (ou locale) = utilisée dans les textes d'aide : c'est celle définie lors de la création de l'article; ajoutez votre langue en adaptant le fichier fr-FR du dossier "locale" (créez le sous-dossier pour votre langue et copiez-y le fichier modifié en remplaçant le français par votre langue)
• intervalle (ou vitesse) = n => rythme du diaporama (en secondes)
• taille (ou largeur) = largeur de l'image (utiliser les valeurs par défaut : 440,620,720,800,1024). Pour certaines skin dont la largeur disponible est limitée, la taille de l'image sera automatiquement réduite à 440px. Un "truc" : pour forcer à conserver votre choix, donnez une taille 1px plus petite que la valeur par défaut (par exemple 719 pour 720).
• chemin (ou dir) = il commence !! après !! "votre-b2evo-blog/media/blogs/"
• h (ou aide) = 0 => 1: affiche la fenêtre d'aide au lancement (par défaut 0)
• e (ou ext) = jpg,png => extensions de fichiers autorisés, separés par virgule (par defaut jpg,jpeg,png,gif,tif,tiff )
• r (ou rapport) = 0.xx => rapport hauteur/largeur de l'image (par défaut 0.75) - mettre 0.67 for 24x36 or 0.55 for 16/9
• m (ou mode) = 1 => mode image (par défaut 1=nombre d'image indéterminé) ; 0=seulement une image rafraîchie
• c (ou circ) = 0 => mode du diaporama (par défaut 0 stop à la dernière image) ; n>0 = boucle n fois
• p (ou prem) = # => numéro de la 1ère image à afficher
• d (ou der ou fin) = # => numéro de la dernière image à afficher
• o (ou ordre) = x => ordre de la présentation (par défault = 2, ne rien faire => selon la date du fichier sur la plupart des systèmes), = -1, ordre inverse
  autres valeurs : selon les noms des fichiers 0=random, 1=alphanum, -2=inverse alphanum
• l (ou liste) = nom d'un fichier contenant une liste d'image (fichier texte : 1 ligne = nom-de-fichier.ext ; légende de l'image). # On peut aussi utiliser un fichier par défaut pour cette liste; le nom doit être jlb2_(nom-du-dossier-images).txt => si ce fichier est présent et qu'aucun paramètre "liste" est donné, il sera utilisé automatiquement
• t (ou teaser ou pos) = 0 => position du diaporama (par défaut 0=teaser, entête de l'article ) ; 1=dans le corps de l'article ; 2=seulement un index dans le corps d'article ; 3=dans le corps d'article à l'intérieur d'un cadre (autorise les diaporamas multiples ans la même page)
• i (ou index) = 0 (par défaut, pas d'index) >0 miniatures cliquable ajoutées dans le corps d'article autres valeurs 1 => largeur zone =100%, largeur miniatures =120 // 2 => largeur zone =100%, largeur miniatures =90 / 3 => largeur zone =100%, largeur miniatures =100 / >10 => largeur zone =100%, largeur miniatures = la valeur de i
• j (ou cbox) = 0 => comment afficher l'image après un clic sur une miniature (par défaut 0 dans une colorbox) =1 remplacer l'image du teaser (entête d'article)
• z (ou zoom ou osd) si present et >=0 requête pour une image en zoom profond (open seadragon, OSD) ; z est alors la valeur par défaut du zoom
  OSD doit se trouver dans /votre-b2evo-dir/plugins/b2slideshow_plugin/openseadragon/ (par défaut) sinon, vous devez changer la var $diarama_osd dans le fichier ini
• zv (ou zvis) = 1 => rapport de visibilité (par défaut 1) utiliser 1.05 pour empêcher l'affichage des bords bordures droite ou gauche
• zt (ou ztype) = type de l'OSD: 0, deep zoom (défaut) ; 1, simple image avec construction de la pyramide d'éléments (plus lent); 2, id 1 sans construction
• zwh = 0 autoriser le repliement horizontal de l'image : 0, faux (défaut) ; 1, vrai
• zwv = 0 autoriser le repliement vertical de l'image : 0, faux (défaut) ; 1, vrai
• s (ou saute) = n => nuémro de l'image à ignorer lors des diaporama dans une colorbox (généralement la 1ère qui est aussi dans le teaser)
• Tous les paramètres sont optionnels sauf le chemin vers les images (voir le fichier jl_b2diarama.ini.inc file)
• => au cas où un seul paramètre est présent, il est considéré comme le chemin même sans les mots clés "chemin=" ou "dir="

Téléchargement cliquer ICI (inclut openSeadragon)

Une fois le fichier téléchargé, le décompresser dans le dossier portant le même nom que le fichier zip (cela devrait être le comportement par défaut dans Windows, mais vérifier que la décompression ne crée pas un niveau de sous-dossier supplémentaire). Puis copier le dossier dans sa totalité dans le sous dossier "plugins" de votre b2evo. Enfin, installez le plugin depuis la section Admin dans Réglages généraux/Plugins.

Lors de la première utilisation, il peut être nécessaire de valider le formateur de texte (renderer) en cochant la case prévue dans le bas de la colonne de droite quand vous éditez (modifiez) votre post en mode expert.