Diaporama Innerfade - développement

Ceci est une ARCHIVE, peut-être périmée. Vérifiez bien les compatibilités !

Ce plugin permet d’obtenir des diaporamas automatisés à partir des documents joints aux articles ou aux rubriques

Ce plugin n’est plus maintenu !

D’autres plugins aux fonctionnalités similaires :

Liens

Ce plugin est une adaptation à SPIP du script Innerfade.

Voir le carnet de notes de développement sur le wiki de SPIP-Contrib Diaporama_innerfade

Installation

ce plugin nécessite la bibliothèque jquery pour fonctionner (intégrée en standard à SPIP 1.91 et plus). Il est à installer comme n’importe quel plugin, soit en résumé [1] :
-  télécharger le fichier à dézipper
-  copier dans le dossier /plugins de SPIP le répertoire diaporama_innerfade contenu dans l’archive zip.
-  ensuite activer le plugin dans l’interface privée de SPIP.

Mise en œuvre

Ajouter le code qui suit dans le squelette à l’endroit où doit apparaitre le diaporama :

<div id="diaporama_innerfade">
	<BOUCLE_diaporama_innerfade (DOCUMENTS) {id_article} {mode=document} {extension IN png,jpg,gif} {par num titre, date}>
	<a href="[(#URL_DOCUMENT)]" type="#MIME_TYPE">
	<img src="[(#FICHIER|image_reduire{0,400}|extraire_attribut{src})]" title="#TITRE"/>
	</a>
	</BOUCLE_diaporama_innerfade>
</div>

Précisions

Le bloc id doit impérativement s’appeler diaporama_innerfade, car c’est ce nom qui active le diaporama. Il est possible d’activer le diaporama sur plusieurs blocs différents, contenant du texte ou des images.

Pour régler la hauteur des images : changer la valeur de image_reduire{0,400}. Attention, si la hauteur est plus grande que 400px, l’image risque de déborder du conteneur... Editer alors le fichier en_tete.php dans plugins/diaporama_innerfade, et donner la même valeur à $diapohauteur.

Pour n’afficher que le diaporama (et pas d’éventuelles miniatures en plus) : rajouter {doublons} dans la boucle .

Pour enlever la bordure blanche : éditer diaporama_innerfade.css dans plugins/diaporama_innerfade ou bien rajouter un tag #diaporama_innerfade dans votre feuille de style.

Voir le site du script pour une explication plus détaillée, et plus bas pour le développement.

Licence

distribué sous licence GNU/GPL.

A faire

1) pour le rédacteur

Rendre le diaporama activable dans l’article au moyen d’une balise genre {diapo|slide|transition=1|duree=4|sequence|hauteur=400} où les options sont :
-  slide : défilement (au lieu du fondu enchainé)
-  transition=x : duree de la transition (en secondes)
-  duree=x : temps d’affichage de chaque image (en secondes)
-  random : succession aléatoire
-  hauteur : hauteur en px

2) pour le webmaster

Avoir accès aux différentes options du script dans l’interface privée de SPIP, où l’on pourrait :
-  définir les options par défaut (durée de chaque image, vitesse de transition etc...)
-  définir sur quelles rubriques activer le plugin (actif sur tous les articles contenant des images de la rubrique), avec les options.
-  et pour chaque rubrique, définir sur quel tag activer un diaporama.

Ainsi il serait possible de créer les diaporamas plus finement, à partir de n’importe quelle liste créée par SPIP, texte ou images (liste d’articles, de rubriques, de documents joints etc...)

Notes

[1Pour plus détails sur l’installation des plugins cf. http://www.spip.net/fr_article3396.html

Discussion

18 discussions

  • 1

    Bonjour,

    ce plugin me manque cruellement avec spip2.1, je n’arrive pas à le faire fonctionner... est-il « vraiment » incompatible ? n’y a t-il pas un moyen de le forcer ?

    j’utilise la version 0.2dev qui fonctionnait bien sur spip 2.0.9 (voir ici : http://marcelle-godefroid.fr)

    merci d’avance pour votre réponse.

    • Bonjour,

      Malheureusement, manquant d’informations pour avancer comme je le souhaitais, j’ai arrêté le développement de ce plugin depuis un moment (je suis d’ailleurs surpris qu’il fonctionne jusqu’à la version 2.09 !).
      J’ai vu un autre plugin qui permet de faire la même chose, et fonctionne pratiquement à l’identique, je vous conseille de vous rabattre sur celui-ci (j’ai oublié son nom, il est disponible sur ce même site).
      Au pire vous pouvez insérer le diaporama manuellement dans votre squelette html.

    Répondre à ce message

  • 1

    Bonjour,

    Est-il possible de modifier l’ordre d’affichage des images, sans avoir à tout supprimer et refaire son diaporama ?

    Merci,

    • La solution que je pratique : numérotation des titres puis dans la boucle de sélection des documents on précise par num titre. Pour changer l’ordre, on change la numérotation des titres

    Répondre à ce message

  • 3

    Bonjour, comment faire pour centrer le diaporama ? je pense avoir tout essayé mais je n’y arrive pas :(

    • J’ai le même problème... cela n’apparaît que sous MSIE 7... quelqu’un a-t-il une piste ?

    • J’ai rencontré le même genre de problème lorsque j’ai voulu centrer le diaporama, exception faite que dans mon cas je n’arrivais pas même à obtenir un affichage satisfaisant sur FF. Bref, j’ai essayé un paquet de bidouilles dans le CSS, rien n’y faisait : le script surcharge le CSS (la classe enfant de la div Innerfade) et rend impossible l’utilisation « classique » des styles. Impossible également de changer l’attribut position : absolute, sans quoi tout cesse de fonctionner (en « relative » les images vont se positionner les unes sous les autres... normal).
      J’ai donc pensé à utiliser une marge négative avec la position:absolute, en demandant à SPIP de fournir la largeur de chaque image APRES REDIMENSION, une par une, et en divisant le tout par moins deux :

      [(#FICHIER|image_reduire{650,400}|largeur|div{-2})]

      Mais pour une raison que je n’explique pas, bien que ma marge négative s’affiche dans la source avec la bonne valeur, elle n’est pas prise en compte par le navigateur (?) (cf Inspection Firebug).

      Ma solution finale est très peu ortodoxe, mais elle semble fonctionner correctement sous FF et IE.
      L’idée est que, comme il nous est impossible de bidouiller directement le style sur l’élément enfant de la classe Innerfade (« a », et non « img »), nous devons le définir de façon numérique, tout en changeant cette valeur numérique en fonction de la largeur de l’image. On établit donc un ensemble de paliers :
      largeur entre 1 et 150px, puis entre 151 et 250, puis entre 251 et 350, etc.
      Pour chacun de ces paliers, on définit une valeur numérique pour la marge : -75px si 1<largeur<150, -100px si 151<largeur<250, -200 si 251<largeur<350, etc.
      La boucle finale est la suivante :

      <div id="diaporama_innerfade">
              <BOUCLE_diaporama_innerfade (DOCUMENTS) {id_article} {mode=document} {extension IN png,jpg,gif} {par num titre, date}>
      
      [(#FICHIER|image_reduire{650,400}|largeur|<={150}|?{' ',''})
      <a href="[(#URL_DOCUMENT)]" width="[(#FICHIER|image_reduire{650,400}|largeur)]" height="[(#FICHIER|image_reduire{650,400}|hauteur)]" style="position: absolute; top: 0; left: 50%; margin-left: -75px;">]
         
      
      [(#FICHIER|image_reduire{650,400}|largeur|>{150}|?{' ',''})
      [(#FICHIER|image_reduire{650,400}|largeur|<={250}|?{' ',''})
      <a href="[(#URL_DOCUMENT)]" width="[(#FICHIER|image_reduire{650,400}|largeur)]" height="[(#FICHIER|image_reduire{650,400}|hauteur)]" style="position: absolute; top: 0; left: 50%; margin-left: -100px;">]
      ]
           
      [(#FICHIER|image_reduire{650,400}|largeur|>{250}|?{' ',''})
      [(#FICHIER|image_reduire{650,400}|largeur|<={350}|?{' ',''})
      <a href="[(#URL_DOCUMENT)]" width="[(#FICHIER|image_reduire{650,400}|largeur)]" height="[(#FICHIER|image_reduire{650,400}|hauteur)]" style="position: absolute; top: 0; left: 50%; margin-left: -150px;">]
      ] 
      
      [(#FICHIER|image_reduire{650,400}|largeur|>{350}|?{' ',''})
      [(#FICHIER|image_reduire{650,400}|largeur|<={450}|?{' ',''})
      <a href="[(#URL_DOCUMENT)]" width="[(#FICHIER|image_reduire{650,400}|largeur)]" height="[(#FICHIER|image_reduire{650,400}|hauteur)]" style="position: absolute; top: 0; left: 50%; margin-left: -200px;">]
      ]     
      
      [(#FICHIER|image_reduire{650,400}|largeur|>{450}|?{' ',''})
      [(#FICHIER|image_reduire{650,400}|largeur|<={550}|?{' ',''})
      <a href="[(#URL_DOCUMENT)]" width="[(#FICHIER|image_reduire{650,400}|largeur)]" height="[(#FICHIER|image_reduire{650,400}|hauteur)]" style="position: absolute; top: 0; left: 50%; margin-left: -250px;">]
      ]   
      
      [(#FICHIER|image_reduire{650,400}|largeur|>{550}|?{' ',''})
      [(#FICHIER|image_reduire{650,400}|largeur|<={650}|?{' ',''})
      <a href="[(#URL_DOCUMENT)]" width="[(#FICHIER|image_reduire{650,400}|largeur)]" height="[(#FICHIER|image_reduire{650,400}|hauteur)]" style="position: absolute; top: 0; left: 50%; margin-left: -300px;">]
      ]   
      
      <img src="[(#FICHIER|image_reduire{650,400}|extraire_attribut{src})]" title="#TITRE"/>
              
      </a>
      	</BOUCLE_diaporama_innerfade>
      </div>

      Ici ma div Innerfade (le conteneur) mesure 650px en largeur.
      Il faut bien penser à spécifier les hauteur et largeur des images avec les filtres appropriés, à définir left : 50% et à conserver la position : absolute.
      Si vous voulez que le plugin reste compatible avec Thickbox, replacez le type=« #MIME_TYPE » après chaque ouverture de la balise a, comme dans le code d’origine (je l’ai supprimé car je n’en avais pas l’utilité dans mon cas).

      Évidement le centrage est approximatif, à 50px près. On peut multiplier les paliers pour affiner tout ça.

      Encore une fois, cette solution repose sur un lourd et affreux bidouillage, mais si elle peut dépanner, alors tant mieux. D’ailleurs je pense qu’on devrait pouvoir alléger ça d’une ligne en résumant les deux test (« plus petit, plus grand ») en un seul (« est contenu dans l’intervalle ») mais je ne connais pas la syntaxe...

      Espérant que ce post pourra aider, en attendant qu’une vraie solution soit mise en place pour ce très bon plugin qu’est Innerfade.

    • EDIT : Hop ! On oublie le message précédent, il existe une solution pour avoir un centrage impec’ qui, comme je l’avais pressenti, est beaucoup moins fastidieuse et très simple :

      <div id="diaporama_innerfade">
              <BOUCLE_diaporama_innerfade (DOCUMENTS) {id_article} {mode=document} {extension IN png,jpg,gif} {par num titre, date}>
      
      <a href="[(#URL_DOCUMENT)]" type="#MIME_TYPE" width="[(#FICHIER|image_reduire{650,400}|largeur)]" height="[(#FICHIER|image_reduire{650,400}|hauteur)]" style="position: absolute; top: 0; left: 50%; margin-left: [(#FICHIER|image_reduire{650,400}|largeur|div{-2})]px !important;">
      <img src="[(#FICHIER|image_reduire{650,400}|extraire_attribut{src})]" title="#TITRE"/>    
      </a>
      	</BOUCLE_diaporama_innerfade>
      </div>

      Cinquante lignes de code en trop pour avoir simplement oublié de mentionner « px » dans la marge (la fameuse « raison que je n’expliquais pas »).
      Ca m’apprendra...

    Répondre à ce message

  • Bonjour,

    Est-il possible d’ajouter une pagination pour passer vers une image suivante ou précèdente ?

    Merci

    Répondre à ce message

  • webmestre Ambassade de France Rabat

    C’est simplement génial Ca fonctionne très bien MERCI le décorateur
    Il sera bientot visible sur http://www.ambafrance-ma.org

    Répondre à ce message

  • S’lt

    Il y a eu des modifications sur le plugin innefade présent sur la zone.
    Doit on mettre la documentation à jour ici ou créer un nouvel article ?

    Répondre à ce message

  • Hello,

    est-ce qu’il y aurait moyen d’utiliser ce diaporama comme background d’une div ?

    Répondre à ce message

  • Bonjour,

    Le diaporama ne fonctionne pas je ne sais pas comment faire ?

    Cordialement

    Alain

    Répondre à ce message

  • Est ce possible de faire en sorte que ca ne tourne pas en boucle ?

    Répondre à ce message

  • Merci pour ce plugin, je viens de l’installer sur un site de déco en page d’accueil avec une petite modification dans en_tete.php.
    Si un peu de temps cet été, j’irais un peu voir de près les améliorations a apporter.
    Résultat super a voir ici : http://www.case10.fr

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom