Introduction
Cette contribution est une adaptation liée à Nivo-Slider (http://contrib.spip.net/Nivo-Slider-3747).
Ce dernier plugin disponible n’étant pas responsive, nous l’avons refait une adaptation de Nivo Slider pour qu’il le devienne, en nous basant sur le script créé par Gilbert Pellegrom, distribué sous licence MIT.
Nous n’en avons pas fait un plugin, mais si il y a des motivés, ça serait bien ;)
Dépendances
La seule nécessité est d’insérer #INSERT_HEAD dans votre squelette.
Les éléments Jquery sont déjà intégrés dans cette contribution.
Installation
Après avoir créé un dossier « squelettes », on insère les éléments suivants.
Dans inclure/head.html
1-On appelle le script de nivo slide
2-On déclare le chargement du script dans un div=id où il sera appelé dans une page du squelette. (Dans l’exemple suivant, il s’agit de #slider).
3-On appelle les CSS possibles de nivo slider.
Bref, on fait un copier/coller de ce qui suit :
[(#REM) SLIDE JS ]
[<script type="text/javascript" src="(#CHEMIN{slide/scripts/jquery.nivo.slider.js})"></script>]
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
[(#REM) SLIDE CSS ]
[<link rel="stylesheet" href="(#CHEMIN{slide/nivo-slider.css}|direction_css)" type="text/css" media="screen" />]
[<link rel="stylesheet" href="(#CHEMIN{slide/default/default.css}|direction_css)" type="text/css" media="screen" />]
[<link rel="stylesheet" href="(#CHEMIN{slide/light/light.css}|direction_css)" type="text/css" media="screen" />]
[<link rel="stylesheet" href="(#CHEMIN{slide/dark/dark.css}|direction_css)" type="text/css" media="screen" />]
[<link rel="stylesheet" href="(#CHEMIN{slide/bar/bar.css}|direction_css)" type="text/css" media="screen" />]
Création de inclure
Après l’avoir dézippé, on dépose le dossier slide dans le répertoire inclure.
Mot-clé
Nous avons créé un mot-clé « slider » dans l’espace administration, qui appliqué à un article, appelle le logo et le titre. (Avec les droits administrateur : allez dans « Configuration / Contenu du site », puis dans la section « Les mots-clés », et activez les avec « Utiliser les mots-clés »).
Dans une page
Maintenant que tout est mis en place, on modifie une des pages du dossier « squelettes » pour insérer le code suivant et afficher le diaporama.
<!--diaporama-->
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<B_slider>
[(#REM)Liste les articles qui ont le mot-clé slider]
<BOUCLE_slider(ARTICLES){titre_mot=slider}>
<a href="#URL_ARTICLE">[(#LOGO_ARTICLE||inserer_attribut{title,<a href="#URL_ARTICLE">#TITRE</a>})]</a>
</BOUCLE_slider>
</B_slider>
</div>
</div>
<!--fin diaporama-->
En ce qui me concerne, je l’ai affiché dans sommaire.html.
La boucle suivante affiche :
- Le logo de l’article qui a le mot-clé « slider »
- Le titre de l’article
- Le tout étant cliquable pour aller à l’article
Paramètres
Boucles
Les boucles et les balises sont personnalisables comme toutes les boucles SPIP ( cf la doc de spip).
Thèmes
Theme-default est le thème utilisé par défaut, mais quatre thèmes sont disponibles :
- default,
- dark,
- light,
- bar
Pour avoir le css de dark, on remplace
<div class='slider-wrapper theme-default'>
par
<div class='slider-wrapper theme-dark'>
.
Plein d’autres paramètrages
Pour les obtenir, il faut éditer le fichier inclure/head.html
du dossier « squelettes » : le code $('#slider').nivoSlider();
peut être agrémenté de plein d’effets. Voyez la doc originale de Nivo-Slider (partie Play with settings).
Aucune discussion
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 : |