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...)
Discussions par date d’activité
18 discussions
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
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
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 :
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 :
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 :
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
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 :
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.
Suivre les commentaires : |