Version 4 — Juillet 2007 — Luis Speciale
Objectif : regrouper ce qui traîne ici et là pour mutualiser les idées et les efforts
ce qui existe
ce qu’on pourrait faire
Les personnes intéressées par ce plugin et désirant travailler sur le projet :
- Charles
- Alexandra
- Kent1
- B_B
Et d’autres tout le monde peut s’exprimer sur cette page gribouille
Script innerfade with jquery ici
- Un plugin sous forme de modèle
Test visible ici
- Dans le corps d’un article on met <article427|innerfade>
- Le modèle, quant à lui, se trouve ici
article_innerfade.html
[(#REM)
Documents en innerfade diaporama
Modele SPIP d'apres InnerFade with JQuery http://medienfreunde.com/lab/innerfade/
http://medienfreunde.com/stats/getfile.php?id=3 pour recuper le zip le jquery.innerfade.zip
<template><article1|innerfade></template>]
[(#REM)
Modele <article1|innerfade> : diaporama avec les images en portfolio
#MODELE{article_innerfade}]
<script language="javascript" type="text/javascript" src="#CHEMIN{js/jquery.innerfade.js}"></script>
<!-- Penser a mettre dans le repertoire squelettes ou dans le plugin un dossier js avec le script - jquery.innerfade.js pour que le modele fonctionne -->
<!-- pas besoin de jquery puisque c'est natif dans spip desormais <script language="javascript" type="text/javascript" src="#CHEMIN{js/jquery.js}"></script> -->
<script type="text/javascript">
$(document).ready(
function(){
$('#news').innerfade({
animationtype: 'slide',
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '1em'
});
$('ul#portfolio').innerfade({
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '400px'
});
$('.fade').innerfade({
speed: 'slow',
timeout: 1000,
type: 'sequence',
containerheight: '1.5em'
});
});
</script>
<ul id="portfolio" style="list-style-type: none ;">
<BOUCLE_PORFOLIO2(DOCUMENTS){id_article}{mode=document}{extension==jpg|gif|png} {par num titre, date}>
<li>
<div class="diapo">
<img src="[(#URL_DOCUMENT||image_reduire{350,400}|extraire_attribut{src})]" alt=" #TITRE" />
<div class="diapo">
[<h3>(#TITRE|supprimer_numero)</h3>]
[(#DESCRIPTIF|paragrapher)]
</div>
</div>
</li>
</BOUCLE_PORFOLIO2>
</ul>- Pourquoi un plugin plutôt qu’un simple modèle ?
On le trouve en l’état, c’est à dire pas fini
ici
Pour l’insertion js, que tout soit regroupé dans un seul dossier.
Ne pas dire mettez un dossier js dans votre squelette avec le script.
Il faut un truc prêt à l’emploi je pense.
Ensuite il faudrait regrouper les modèles.
Ne pas faire seulement un modèle article_innerfade, mais aussi un modèle complètement rubrique_innerfade , et un plus générique qui traiterait les documents des articles , rubriques , secteurs etc de innerfade ...
Ensuite il faudrait je pense, à la même manière de XSPD pour rotator, comme l’ont fait kent1 et Marcimat, mettre les paramètres par des #set pour les passer dans l’appel du modèle.
- Principaux inconvénients de cette méthode
1/ Les critères {doublons} ne passent pas dans le modèle
Du coup on les retrouvent aussi dans la boucle portfolio de la dist.
Faut penser à enlever les extensions de la boucle portfolio.
<BOUCLE_afficher_document(DOCUMENTS) {id_document} {id_article} {mode=document}{extension!==(jpg|gif|png)$}>
Faudrait voir comment passer le critère doublons sans agir en dur sur la boucle du squelettes.
Ceci sera aussi valable pour la méthode 2 si on passe par des modèles.
2/ Si on désactive le jquery, toutes les images s’affichent. Ce qui peut niquer la mise en page.
C’est valable pour la méthode 1 comme pour la méthode 2.
Solutions ?
- un truc spéciale dans une balise <noscript></noscript> ?
- ca doit être faisable d’afficher une image paginée ?
Sinon essayer d’adapter le script de b_b qui lui n’affiche que la première image si js désactivée.
Cf ici
Script ici
Site de l’auteur mais le lien est down.
http://www.charlesrazack.com/spip.php?article17
Les trucs qui sont biens :
- Compatible avec l’effet thickbox.
Comme le dit Charles, pour l’instant il faut l’appeler en dure dans le squelette. Donc pas viable.
Remèdes :
- Modèles
- Passage en CFG du plugin pour passer les paramètres etc...
De manière à mettre un truc équivalent à
{diapo|slide|transition=1|duree=4|sequence|hauteur=400}
Ces paramètres 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
- largeur : largeur en px
- bordure du slide : avec ou sans bordure, couleur de la bordure
Et là il nous faut faire comme ont ce qu’a fait Kent1 et Marcimat sur le modèle [rotator du plugin XSPF->http://zone [rotator->http://zone .spip.org/trac/spip-zone/browser/_plugins_/_dev_/xspf/modeles/rotator.html] de cfg.
Ils y a des trucs à reprendre sur le traitement des documents sous forme de modèle, qui s’applique aussi bien aux articles, qu’aux documents des rubriques, des secteurs etc... c’est complètement générique.
Et on appelle le modèle avec ses paramètres <rotator|id_article=32|transition=circles|width=500px|rotatetime=5|>
On peut envisager la même chose plus ou moins avec innerfade.
On pourrait donc faire ce que mentionne Charles avec CFG
- 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...)