AnythingSlider version 1.x.x

Présentation d’AnythingSlider

Pour une présentation complète du script AnythingSlider et de son utilisation, voir :

• la page de démo
• la page de démo des effets spéciaux
• la documentation

Fonctionnement

Une fois activé, ce plugin charge le script jQuery AnythingSlider dans les pages publiques du site. Plus précisément, il charge le script de base, jquery.anythingslider.min.js, ainsi que les CSS du thème par défaut, à savoir anythingslider.css et anythingslider-ie.css [1]. Il utilise pour cela balise #INSERT_HEAD. Vous devez donc vérifier que votre squelette la prévoit.

Charge ensuite à vos squelettes d’appeler le script en suivant la documentation du plugin.

Voici un exemple d’insertion dans un squelette :

<B_liste_articles>
<div class="liste anythingslider articles">
	<h2 class="h2">Démo AnythingSlider</h2>
	<ul id="slider1">
	<BOUCLE_liste_articles(ARTICLES){!par date}{0,10}>
	<li class="item hentry" style="width:100%;">
		<h3 class="h3 entry-title"><a href="#URL_ARTICLE" rel="bookmark">
			[(#LOGO_ARTICLE||image_reduire{150})]<span>#TITRE</span>
		</a></h3>
		[<div class="info-publi"><abbr class="published" title="[(#DATE|date_iso)]">(#DATE|affdate_jourcourt)</abbr></div>]
		[<div class="introduction entry-content">(#INTRODUCTION)</div>]
		<div class="meta-publi">
			<a class="lire-la-suite" href="#URL_ARTICLE"><:zpip:lire_la_suite:><span class="lire-la-suite-titre"><:zpip:lire_la_suite_de:> <em>#TITRE</em></span></a>
		</div>
	</li>
	</BOUCLE_liste_articles>
	</ul>
</div>
<script type="text/javascript">// <![CDATA[
	$(document).ready(function(){
		$('#slider1').anythingSlider({
			expand: false,
			resizeContents: false,
			startText : "Start",
			stopText : "Stop",
			theme : 'simple', // Si la CSS du thème n'a pas été activée dans le formulaire de config, le thème par défaut sera utilisé.
			buildArrows: true,
			buildNavigation: true,
			buildStartStop: false,
			toggleControls: false,
			startStopped: false,
			delay : 2000
		});
	});
 //]]></script>
</B_liste_articles>

Si vous utilisez Zpip, vous pouvez voir le résultat en vous rendant sur la page http://mon.site.net/spip.php?page=demoanythingslider.

Si vous utilisez Aveline, vous disposez déjà de noisettes pour l’utilisation d’AnythingSlider (voir AnythingSlider pour Aveline).

Script optionnels

Pour disposer de plus d’effets, vous pouvez activer plusieurs scripts additionnels :

• jquery.anythingslider.video.min.js
• jquery.anythingslider.fx.min.js
• jquery.easing.1.2.js
• swfobjet.js

Pour insérer ces scripts dans vos pages, vous pouvez utiliser le formulaire de configuration d’AnythingSlider (disponible via les Menus ou en allant directement sur ./ecrire/?exec=configurer_anythingslider. Il vous suffit dès lors de cocher les scripts à inclure dans les en-têtes des pages du site publique.

Thèmes

Le plugin SPIP est livré avec plusieurs thèmes pour script AnythingSlider. Cette liste de thèmes pourra être amenées à augmenter au cours du temps.

Note de version : pour les personnes ayant utilisé la version 0.1.3 du plugin (qui embarquait la version 1.5.9 d’AnythingSlider), sachez que la gestion des thèmes. Si auparavant le script pouvait charger lui-même les CSS des thèmes utilisés, ces derniers doivent maintenant être chargés dans l’en-tête des pages HTML [2].

Vous pouvez choisir sur le même formulaire de configuration les thèmes que vous souhaitez charger. Sélectionnez les thèmes désirés et enregistrez votre configuration

Utilisation depuis un autre plugin

Si vous souhaitez développer un plugin qui nécessite AnythingSlider et des scripts optionnels et/ou des thèmes, la démarche est relativement simple et analogue au plugin jQuery UI pour SPIP .

Tout d’abord, il est nécessaire d’ajouter un élément <necessite ... /> à votre plugin.xml (cf documentation) comme ceci :

<necessite id="anythingslider" version="[1.0.0;]" />

Ensuite, le plugin AnythingSlider déclarant son propre pipeline pour les thèmes et scripts optionnels, anythingslider_charger, il suffit d’ajouter les fichiers que l’on souhaite utiliser comme ceci (dans l’exemple, on utilise monplugin comme préfixe de notre plugin imaginaire, on souhaite utiliser le script additionnel pour la gestion des vidéo et les thèmes construction et metallic) :

function monplugin_anythingslider_charger($scripts){
    $scripts[] = "jquery.anythingslider.video.min.js";
    $scripts[] = "theme-construction.css";
    $scripts[] = "theme-metallic.css";
    return $scripts;
}

Une saisie themes_anythingslider peut être utilisée dans vos formulaires pour sélectionner un thème parmi ceux activés.