Carnet Wiki

Diaporama_innerfade

Version 15 — Juillet 2007 NicolasR

<blockquote class="spip">

carnet de notes de développement du plugin présenté sur SPIP-Contrib dans cette rubrique

</blockquote>

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 :
-  drBouvierLeduc
-  Alexandra
-  Kent1 (Quentin)
-  B_B (Bruno)

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 V3 (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
Modele pour les articles.
Un modéle plus générique est dans la
v3
En tenant compte des apports de rotator.

-  Dans le corps d’un article on met <article427|innerfade> pour la V1
En version plus générique on doit pouvoir mettre <innerfade|id_article=1>  <innerfade|id_rubrique=1>

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

-  Ce qui finalement donne cf

[(#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><innerfade|id_article=1> </template>
	http://medienfreunde.com/lab/innerfade/ pour la doc ]
	[(#REM)
	Modele <innerfade|id_article=1>  <innerfade|id_rubrique=1> etc...
	#MODELE{innerfade}]
	[(#REM) Parametres ID or class of the element containing the fading objects
		animationtype: Type of animation 'fade' or 'slide' defaut=fade
		speed: Fadingspeed in milliseconds or keywords (slow, normal or fast)(Default: 'normal')
		timeout: Time between the fades in milliseconds (Default: '2000')
		type: Type of slideshow: 'sequence' or 'random' (Default: 'sequence')
		containerheight: Height of the containing element in any css-height-value (Default: 'auto')  runningclass: CSS-Class which the container get’s applied (Default: 'innerfade') ]
[(#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{type,#ENV{type,sequence}})]
[(#SET{speed,#ENV{speed,'normal'}})]
[(#SET{timeout,#ENV{timeout,2000}})]
[(#SET{containerheight,#ENV{containerheight,'500px'}})]


<script language="javascript" type="text/javascript" src="#CHEMIN{js/jquery.innerfade.js}"></script>
<!-- Penser a mettre dans le repertoire squelettes 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: 'normal',
						timeout: 2000,
						type: 'sequence',
						containerheight: '500px'
						});
					
					$('.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?}{id_rubrique?}{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 et avec un modele article pas générique.

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.

Remèdes en attendant, faire une rubrique cachée dans les menus où l’on y mets les documents.
Puis on fais ressortir ce qu’on veut en les appelant par les modèles. Mais bon si on pouvait trouver à faire passer doublons dans les modèles, ca serait plus cool.

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> ?
euh ba non ca marche pas. ca affiche le message du noscript si js désactivé, mais ca affiche aussi les images js les unes sous les autres
-  ca doit être faisable d’afficher une image paginée ?
La c’est tellement efficace, et ca pagine tellement bien qu’il n’y a plus d’innerfade. Si quelqu’un a une idée ?
-  En fait dans le script de Bruno, c’est pas le js qui masque les autres images quand js désactivée, mais bien la css.

#slideshow {
position:relative;
width:433px;
height:161px;
overflow:hidden;
border:1px solid #ccc;
margin:0 auto 1em;
}
#slideshow img {
position:absolute;
left:0;
top:0;
width:433px;
height:161px;
} 

Il faut donc mettre une feuille de style à notre plugin, un innerfade.css, et par rapport à la div contenaire de notre modèle, y mettre plus ou moins les styles suivants. Je sais pas si avec CFG on peut paramétrer les largeur et hauteurs de la css ?

ul#portfolio{
list-style-type: none;
position: relative;
width: 433px;
height:161px;
overflow: hidden;
border: 1px solid #ccc;
margin:0 auto 1em;
}


ul#portfolio img{
position:absolute;
left:0;
top:0;
width:433px;
height:161px;
}

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).
Limitations actuelles :
-  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.

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 ?

[Elements de réponses]
En fait pour les articles un simple <innerfade5> doit suffire, 5 étant l’id_article.
Il me semble qu’on est obligé de passer par un modèle si on veut pouvoir l’utiliser au sein d’un champ texte d’un article ou d’une rubrique. Dans le cas d’un modèle on est donc obligé de passer l’id article, l’id rubrique ou l’id document. L’environnement ne passe pas automatiquement dans un modèle.

Le modèle est la seule solution pour un truc générique qui s’applique aussi bien aux articles, rubriques, documents etc... En suivant rotator, je viens de refaire le modèle générique. Cf plus haut dans la version v2. Reste quand même à vérifier que les paramètres de personnalisations passent lors de l’appel au modèle. Et là je suis pas sure. J’ai pas tout compris encore.

Sinon bien ta mise en CFG, c’est super.