Accueil du site > Diaporamas > Le plugin SPIP Highslide

Le plugin SPIP Highslide

Ajouter un diaporama Highslide dans un article

lundi 18 juin 2012, par Franck Ruzzin

Highslide JS est un diaporama open source écrit en javascript. Le site officiel : http://highslide.com/.
Attention : Pour une utilisation commerciale, il faut acquérir une licence.

 

Le plugin Highslide ajoute un diaporama Highslide dans un article.

Les images qui constituent le diaporama sont jointes à l’article :
- en tant que documents (pour SPIP 1.9)
- déposées dans le portfolio (SPIP 2)

Il y a 4 moyens d’utiliser le plugin :

Les 2 balises :
- #HIGHSLIDEGALLERY insertion avec portfolio
- #HIGHSLIDE insertion sans portfolio

Les 2 modèles :
- <mod_highslidegalleryxxx> insertion avec portfolio (xxx est l’id de l’article contenant les images à intégrer dans le diaporama)
- <mod_highslidexxx> insertion sans portfolio (xxx est l’id de l’article contenant les images à intégrer dans le diaporama)

Le plugin Highslide nécessite l’utilisation du plugin CFG, par lequel on peut configurer certains des paramètres de l’affichage :
- Hauteur des vignettes du portfolio
- Largeur des vignettes du portfolio
- Taille de l’image initiale (si pas de portfolio)
- Position des images dans le diaporama
- Démarrage automatique
- Position du label "numéro de page"
- Opacité d’occultation en %
- Vitesse d’occultation
- Intervalle entre 2 images
- Durée de la transition
- Lecture en boucle

 

Les nouveautés de la version 4.1.13 (SPIP 3)


- Ajout du support de langue vi : Vietnamien

- Ajout du modèle <mod_highslidegallerypagexxx> insertion d’un diaporama HighSlide avec chemin de vignettes. Le diaporama a des dimensions fixées et est intégré à la page.
La syntaxe complète est :
<mod_highslidegallerypagexxx
|largeur=xxx largeur redimensionnée des images (défaut 500)
|hauteur=yyy hauteur redimensionnée des images (défaut 500)
|largeurTotale=lll largeur extérieure du diaporamas (défaut largeur + 24)
|hauteurTotale=hhh> hauteur extérieure du diaporama (défaut hauteur+ 140)

- Ajout du modèle <mod_highgalpagelienxxx> insertion d’un diaporama HighSlide avec chemin de vignettes. Le diaporama a des dimensions fixées et est intégré à la page. On utilise la légende de l’image pour fixer un lien vers un site : Le libellé du lien est le contenu du champ "Titre du document", le lien est le contenu du champ "Description".
La syntaxe complète est :
<mod_highgalpagelienxxx
|largeur=xxx largeur redimensionnée des images (défaut 500)
|hauteur=yyy hauteur redimensionnée des images (défaut 500)
|largeurTotale=lll largeur extérieure du diaporamas (défaut largeur + 24)
|hauteurTotale=hhh> hauteur extérieure du diaporama (défaut hauteur+ 140)

 

Les nouveautés de la version 4.1.9

Ajout du support des langues :
- ar : Arabe
- bg : Bulgare
- ca : Catalan
- cs : Tchèque
- da : Danois
- de : Allemand
- el : Grec
- en : Anglais
- es : Espagnol
- et : Estonien
- fi : Finnois
- fr : Français
- he : Hébreu
- hr : Croate
- hu : Hongrois
- id : Indonésien
- it : Italien
- ja : Japonais
- lt : Lithuanien
- nb : Norvégien bokmål
- nl : Néerlandais
- no : Norvégien nynorsk
- pl : Polonais
- po : Portugais
- ro : Roumain
- ru : Russe
- sk : Slovaque
- sl : Slovène
- sr : Serbe
- sv Suédois
- th : Thaïlandais
- tr : Turc
- uk : Ukrainien
- zh : Chinois

 

IMPORTANT

Pour une utilisation avec les versions de SPIP antérieures à 2, il faut éditer les fichiers
- highslide.html
- highslidegallery.html
- mod_highslide.html
- mod_highslidegallery.html

et retirer dans toutes les boucles le critère {vu=non}

Documents joints

7 Messages de forum

  • Le plugin SPIP Highslide Le 28 septembre 2011 à 15:44 , par Steph

    Bonjour,
    Comment puis je supprimer le port folio par defaut de spip ?
    Parce que la j’affiche en double ;(

    Répondre à ce message

    • Le plugin SPIP Highslide Le 28 septembre 2011 à 19:16 , par Franck Ruzzin

      Bonsoir Steph,

      Il faut retirer les lignes qui insère le portfolio par défaut dans les squelettes SPIP.
      Par exemple, pour le retirer dans tous les cas :

      éditer le fichier inc-documents.html et retirer les lignes 1 à 14 qui insèrent un portfolio.

      Il est possible de laisser un portfolio de manière conditionelle. A voir en fonction du cas particulier de ton site.

      A+,
      Franck

      Répondre à ce message

  • Le plugin SPIP Highslide Le 28 février 2012 à 00:43 , par Renée Picard

    Bonjour

    J’ai un « bug » avec highslide. Il fonctionne 2-3 fois puis plus rien, aucune vignette ne s’affiche.
    Le site est en construction : http://www.conceptvirtuel.ca/mangersaison/spip.php?article6

    Merci

    RP

    Répondre à ce message

  • Bonjour,
    J’utilisais highslide.js (un peu adapté) depuis pas mal d’années dans mon ancien site en PHP. Depuis le passage à SPIP je souhaite remettre cela en place dans les nouvelles pages ; les anciennes l’ont toujours. J’ai cherché s’il y avait pas quelque chose déjà programmé et trouvé ce plugin mais il lui manque justement ce qui m’intéresse le plus dans le HightSlide originel : un zoom clean sur une photo insérée dans le document. Actuellement on ne peut qu’insérer un diaporama entier, obligatoirement basé sur le portfolio d’un article. Sur le point d’insertion on n’a pas le choix de la photo, c’est la première de la galerie donc ça ne convient absolument pas... Pour obtenir ce que je veux il me faudrait donc créer pour chaque photo son article bidon avec son portfolio bidon ne contenant que cette photo !
    J’aimerais donc savoir :
    - Est-ce prévu de l’implémenter ? Le cas échéant, est-ce qu’il y a une raison particulière, technique par exemple ?
    - Est-ce qu’il y a une autre solution ?
    Sinon j’envisage de renoncer aux balises et appeler une fonction perso utilisant HightSlide.js. La Mediabox actuelle est trop limitée mais elle est incrustée dans SPIP 3.0 donc apparemment obligatoire... à moins de "taper fort" dans le noyau.
    Peut-être est-il possible aussi de créer une balise à peine différente, comme "" et de modifier le tri à l’arrivée pour qu’automatiquement ce ne soit pas l’article xxx qui servent de référence mais bien le document xxx, avec le traitement adapté ?
    Cordialement

    Répondre à ce message

    • Solution pour photo isolée, comme avec highslide.js originel ? Le 18 août 2014 à 20:50 , par Franck Ruzzin

      Bonjour Yann,

      Voilà un nouveau modèle (à dézipper et placer dans le dossier modeles du plugin highslide).
      On lui communique l’id d’un document, par exemple : mod_highslidemono7.

      Des paramètres de réglage sont peut être à envisager pour augmenter les possibilités du modèle.

      Cordialement,
      Franck.

      Répondre à ce message

  • Le plugin SPIP Highslide Le 12 août 2015 à 11:11 , par Hanjo

    Merci pour ce plugin sympa !
    Est-ce que un mis à jour est prévu pour la compabilité avec SPIP 3.1 ?
    Merci

    Répondre à ce message

    • Le plugin SPIP Highslide Le 16 août 2015 à 19:29 , par Franck Ruzzin

      Bonjour Hanjo,

      Je crains que non, en raison de l’abandon programmé de Flash (déjà effectif sur périphériques mobiles).
      Il existe un outil (payant) qui marche bien : Flexpaper.
      J’ai testé.

      Cordialement,
      Franck

      Répondre à ce message

Répondre à cet article