Carnet Wiki

Diaporama_innerfade

Version 9 — Juillet 2007 tcharlss

Préparation et note pour un plugin diaporama innerfade jquery

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

Etat du projet

Je propose de regrouper en début d’article toutes les contributions qui existent, en un seul paragraphe, pour voir rapidement où ça en est. Nous avons donc :
-  plugin innerfade a (Voir « première tentative »)
-  plugin innerfade v0.2dev (Voir « troisième tentative »)
-  plugin innerfade v0.1 (Voir « deuxième tentative »)

Script innerfade d’origine avec jquery ici

Première tentative

-  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>

En fait il faut un modèle plus générique.
Avec une boucle comme ceci

<ul id="portfolio" style="list-style-type: none ;">
<BOUCLE_PORFOLIO2(DOCUMENTS){id_article ?}{id_rubrique ?}{id_document ?}{mode=document}{extension==jpg|gif|png}{par num titre}{par id_document}>
<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>

Et en haut de ce modèle reprendre le rotator avec un truc du genre

[(#ENV{id_rubrique}|?{' ',''}) 
  [(#SET{objet_spip,id_rubrique})]
  [(#SET{objet_val,[(#ENV{id_rubrique})]})]
]
[(#ENV{id_secteur}|?{' ',''}) 
  [(#SET{objet_spip,id_secteur})]
  [(#SET{objet_val,[(#ENV{id_secteur})]})]
]
[(#ENV{id_document}|?{' ',''}) 
  [(#SET{objet_spip,id_document})]
  [(#SET{objet_val,[(#ENV{id_document})]})]
]
[(#ENV{id_article}|?{' ',''}) 
  [(#SET{objet_spip,id_article})]
  [(#SET{objet_val,[(#ENV{id_article})]})]
]
[(#GET{objet_spip}|?{'',' '}) 
  [(#SET{objet_spip,id_article})]
  [(#SET{objet_val,[(#ENV{id_rotator})]})]
]


[(#SET{width,#ENV{width,100%}})]
[(#SET{height,#ENV{height,100%}})]
[(#SET{displaywidth,[(#ENV{displaywidth,[(#GET{width})]})]})]
[(#SET{displayheight,[(#ENV{displayheight,[(#GET{height})]})]})]
[(#SET{transition,#ENV{transition,fade}})]
[(#SET{align,#ENV{align,center}})]

Et enfin appeler le modèle de la sorte

<innerfade|id_article=5|>

<innerfade|id_rubrique=1|> etc...

-  Pourquoi un plugin plutôt qu’un simple modèle ?

On le trouve en l’état, c’est à dire pas fini et avec un modele article pas générique. cf plus haut.
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 un modèle complètement générique qui traiterait les documents des articles, rubriques, secteurs etc...

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.

2e tentative très réussie faites par Charles mais perfectible

http://www.charlesrazack.com/spip.php?article17

Le zip du plugin de Charles

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 fait Kent1 et Marcimat sur le modèle rotator du plugin XSPF

Il 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...)

Si on se base sur le plugin de Charles :

-  on peut faire un modèle avec cette boucle pour ne pas se limiter aux articles
Boucle à laquelle il faudrait rajouter le #TITRE et le #DESCRIPTIF

<div id="diaporama_innerfade">
        <BOUCLE_diaporama_innerfade (DOCUMENTS) {id_article ?}{id_rubrique ?}{id_document ?} {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})]" alt=" #TITRE" /> 
        </a>
        </BOUCLE_diaporama_innerfade>
</div>

On l’insère dans le corps de l’article <innerfade3> 3 étant l’id article
ou <innerfade|id_rubrique=1>

Ca fonctionne sans intervention en dur dans le squelette, et thickbox est conservé.
Faut, pareil qu’en un, mettre les paramètres dans le modèle pour les configurer.

Mais reste à solutionner le problème des {doublons} qui ne passent pas dans le modèle alors qu’il passaient dans le squelettes.

Et le problème de l’affichage de toutes les images lorsque javascript est désactivé.

Le entete.php pourrait du coup passer dans le modèle. cf plus haut l’exemple du rotator.

-  en-tete.php

<?php
function diaporama_innerfade_insert_head($flux)
{
	$jsFile = find_in_path('js/jquery.innerfade.js');
	$cssFile = find_in_path('css/diaporama_innerfade.css');
	/* options */
	$diapogenre = 'fade'; /* fade ou slide */
	$diapotransition = '3000'; /* duree de la transition en millisecondes */
	$diapoduree = '6000'; /* duree d'affichage d'une image en millisecondes */
	$diapohasard = 'sequence'; /* sequence ou random */
	$diapohauteur = '400px'; /* hauteur en px, em, etc... */
	$incHead = <<<EOH
	
<!-- head diaporama -->
<script src="{$jsFile}" type="text/javascript"></script>
<link rel="stylesheet" href="{$cssFile}" type="text/css" media="all" />
<script type="text/javascript">  
$(document).ready( 
	function(){ 
		$('#diaporama_innerfade').innerfade({
		animationtype: '{$diapogenre}',
		speed: {$diapotransition}, 
		timeout: {$diapoduree}, 
		type: '{$diapohasard}', 
		containerheight: '{$diapohauteur}' });
	} ); 
</script>
<!-- fin head diaporama -->


EOH;


return preg_replace('#(</head>)?$#i', $incHead . "\$1\n", $flux, 1);
}
?>

Troisième tentative

Premier essai avec une interface cfg, qui permet de choisir un bloc (#DIV ou .CLASS) et de lui appliquer le diaporama, avec différentes options. Inspiré du plugin « fenêtre flottantes » (lien à mettre).<br >
Limitations actuelles  :
-  
Limité Ca marche , mais pour l’instant c’est limité à un seul bloc.
- La hauteur du bloc (déclaré dans l’interface) et la valeur de image_reduire{x} du squelette, si la boucle renvoie des images, doivent être les même.Donc intérêt réduit, hormis pour les personnes qui souhaiteraient l’améliorer.
D’ailleurs où trouver une documentation complète pour cfg ?

A télécharger ici plugin innerfade v0.2dev.

L’idéal serait que l’interface propose une liste de blocs, puis l’on pourrait sélectionner tous ceux qui nous intéressent. Avec, pour chacun, les paramètres.
Par exemple, l’interface pourrait fonctionner comme ça :

-  1) choix d’une rubrique
-  2) choix des blocs (#div et .class) utilisés par la rubrique et ses articles, ou juste un article de la rubrique.
-  3) on choisit les paramètres pour chaque bloc sélectionné.

ou bien :

-  1) choix d’un squelette
-  2) choix des blocs
-  3) etc...

J’essaierai de faire un « mockup » de cette interface pour donner une idée.

Une remarque sur la façon d’appeler le diapo depuis un article (en complément de l’approche proposée ci-dessus donc) :
Je n’aime pas vraiment le fait d’avoir à indiquer l’id de l’article pour appeler le diaporama. Je trouve cette méthode très contraignante, et en générale j’évite les plugins ou fonctions qui obligent à le faire.
Un simple <diaporama|options> serait mieux, non ?