SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 188 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 page de documentation est incomplète... Vous devrez donc découvrir et expérimenter par vous-même. Des liens à la fin permettent d’accéder à d’autres documentations.
Soyez sympa, pensez à revenir compléter cette page ;-)

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 ?

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

  • Champs Extras 3

    16 janvier 2012 – 523 commentaires

    Ce plugin permet de créer et/ou de gérer des champs supplémentaires dans les objets éditoriaux de SPIP. Il permet donc de prendre en compte et d’afficher de nouveaux éléments dans n’importe quel objet éditorial de SPIP. Screencast Vous n’aimez pas (...)

  • Réservation d’événements

    16 mars 2015 – 188 commentaires

    Ce plugin permet d’offrir aux visiteurs de s’inscrire pour un évènement du plugin Agenda et de gérer les réservations enregistrées. Installation Le plugin s’installe comme n’importe quel plugin. il nécessite : Agenda API de vérification (...)

  • Les crayons

    23 avril 2008 – 815 commentaires

    Ce plugin permet d’éditer les contenus sur les pages publiques du site, sans passer par l’espace privé de SPIP.

  • LESS pour SPIP : Less-CSS (anciennement LESSpip)

    5 novembre 2010 – 43 commentaires

    Less-CSS (Anciennement LESSpip) est un plugin intégrant facilement le logiciel LESS dans SPIP. LESS est une extension de CSS ajoutant les variables, les classes, les opérations, les imbrications au langage. Facilitant ainsi l’écriture de (...)

  • Recommander

    3 avril 2011 – 16 commentaires

    Ce plugin propose une manière simple de suggérer de recommander par email un article à un ami. Fonction « recommander un article à un ami ». On l’ajoute dans n’importe quel squelette sous la forme : #RECOMMANDERtitre de la page,url de la page,intro (...)

Ça spipe par là