SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

288 Plugins, 197 contribs sur SPIP-Zone, 191 visiteurs en ce moment

Accueil > Affichage multimédia > Galeries et diaporamas > Diaporama Innerfade > Diaporama Innerfade - développement

Diaporama Innerfade - développement

14 juillet 2007 – par tcharlss – 23 commentaires

Toutes les versions de cet article : [français] [italiano]

9 votes

Attention, cette contribution est EN CHANTIER : elle n’est peut-être pas fonctionnelle.

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 :

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

Dernière modification de cette page le 16 octobre 2012

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 28 novembre 2010 à 14:53, par luapmada En réponse à : Diaporama Innerfade - développement

    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.

    • Le 29 novembre 2010 à 09:51, par tcharlss En réponse à : Diaporama Innerfade - développement

      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

  • Le 12 octobre 2009 à 11:10, par ? En réponse à : Diaporama Innerfade - développement

    Bonjour,

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

    Merci,

    • Le 6 novembre 2010 à 09:31, par cogefip En réponse à : Diaporama Innerfade - développement

      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

  • Le 7 avril 2009 à 21:03, par ? En réponse à : Centrer le Diaporama Innerfade

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

    • Le 14 mai 2009 à 12:12, par CP En réponse à : Centrer le Diaporama Innerfade

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

    • Le 28 septembre 2009 à 14:47, par Nestor En réponse à : Centrer le Diaporama Innerfade

      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.

    • Le 28 septembre 2009 à 19:19, par Nestor En réponse à : Centrer le Diaporama 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

  • Le 6 mars 2009 à 16:36, par val En réponse à : Diaporama Innerfade - développement

    Bonjour,

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

    Merci

    Répondre à ce message

  • Le 6 mars 2009 à 13:32, par webmestre Ambassade de France Rabat En réponse à : Diaporama Innerfade - développement

    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

  • Le 28 janvier 2009 à 11:24, par cam.lafit En réponse à : Diaporama Innerfade - développement

    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

  • Le 17 novembre 2008 à 17:33, par ? En réponse à : Diaporama Innerfade - développement

    Hello,

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

    Répondre à ce message

  • Le 3 novembre 2008 à 14:05, par rezolinux En réponse à : Diaporama Innerfade - développement

    Bonjour,

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

    Cordialement

    Alain

    Répondre à ce message

  • Le 20 octobre 2008 à 13:17, par fulvio En réponse à : Diaporama Innerfade - développement

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

    Répondre à ce message

  • Le 19 juillet 2007 à 18:55, par Anne En réponse à : Diaporama Innerfade - développement

    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

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • ViaSPIP 3.1

    26 février 2016 – 19 commentaires

    Après la sortie de SPIP 3.1, voici la nouvelle version du squelette ViaSPIP qui reste dans la lignée des précédentes versions. ViaSPIP 3.1 est toujours un squelette généraliste pour SPIP, sous forme de plugin, visant à offrir une alternative au (...)

  • Lecteur Multimédia

    28 février 2007 – 323 commentaires

    Le plugin « lecteur multimedia » permet la lecture et l’affichage de sons ou de vidéos. Il enrichit l’affichage des raccourcis des documents ajoutés <docX>. Il ajoute des lecteurs flash adaptés aux formats .MP3 et .FLV. Le plugin agit sur tous (...)

  • Le Squelette Zpip

    11 novembre 2009 – 353 commentaires

    Ce squelette n’est plus maintenu, il est remplacé par SPIPr-dist Zpip est un modèle de squelette réutilisable, modulaire et disposant d’une galerie de thèmes. Ce modèle de squelette rend l’installation d’un site avec son thème plus facile, et la (...)

  • Zpip-vide v2

    9 novembre 2012 – commentaires

    Zpip-vide fournit un squelette Z vide de contenu, à remplir de noisettes avec le noiZetier. Compatibilité Cette version 2 de Zpip-vide, développée pour SPIP 3, est toujours compatible avec Zpip v1. Elle est par contre incompatible avec Zpip v2 (...)

  • Menus

    18 août 2009 – 985 commentaires

    Créez enfin vos menus facilement !