SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

289 Plugins, 197 contribs sur SPIP-Zone, 73 visiteurs en ce moment

Accueil > Affichage multimédia > Galeries et diaporamas > Nivo Slider > Diaporama responsive avec Nivo Slider

Diaporama responsive avec Nivo Slider

15 septembre 2015 – par naga44 – commentaires

12 votes

Un diaporama responsive basé sur « Nivoslider ».

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 :

  1. [(#REM) SLIDE JS ]
  2. [<script type="text/javascript" src="(#CHEMIN{slide/scripts/jquery.nivo.slider.js})"></script>]
  3. <script type="text/javascript">
  4.     $(window).load(function() {
  5.        $('#slider').nivoSlider();
  6.    });
  7.     </script>
  8.  
  9. [(#REM) SLIDE CSS ]
  10. [<link rel="stylesheet" href="(#CHEMIN{slide/nivo-slider.css}|direction_css)" type="text/css" media="screen" />]
  11. [<link rel="stylesheet" href="(#CHEMIN{slide/default/default.css}|direction_css)" type="text/css" media="screen" />]
  12. [<link rel="stylesheet" href="(#CHEMIN{slide/light/light.css}|direction_css)" type="text/css" media="screen" />]
  13. [<link rel="stylesheet" href="(#CHEMIN{slide/dark/dark.css}|direction_css)" type="text/css" media="screen" />]
  14. [<link rel="stylesheet" href="(#CHEMIN{slide/bar/bar.css}|direction_css)" type="text/css" media="screen" />]

Télécharger

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.

  1. <!--diaporama-->
  2. <div class="slider-wrapper theme-default">
  3.     <div id="slider" class="nivoSlider">
  4.         <B_slider>
  5.             [(#REM)Liste les articles qui ont le mot-clé slider]
  6.             <BOUCLE_slider(ARTICLES){titre_mot=slider}>
  7.                 <a href="#URL_ARTICLE">[(#LOGO_ARTICLE||inserer_attribut{title,<a href="#URL_ARTICLE">#TITRE</a>})]</a>
  8.             </BOUCLE_slider>
  9.         </B_slider>
  10.     </div>
  11. </div>
  12.  
  13. <!--fin diaporama-->

Télécharger

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

Démo

http://www.naga44.org/

Dernière modification de cette page le 15 septembre 2015

Retour en haut de la page

Vos commentaires

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Agenda 2.0 et ultérieur

    3 novembre 2008 – 1137 commentaires

    Voici la version pour SPIP 2.0 du Plugin Agenda pour SPIP 1.9.2, avec une interface remaniée pour encore plus de plaisir. La lecture de Calendrier Mini 2.0 est également chaudement recommandée, étant donné que Agenda 3 est dépendant de ce (...)

  • Champs Extras 3

    16 janvier 2012 – 634 commentaires

    Ce plugin permet de créer et/ou de gérer des champs supplémentaires dans les objets éditoriaux de SPIP. Il permet donc de prendre en compte et d’afficher de nouveaux éléments dans n’importe quel objet éditorial de SPIP. Screencast Vous n’aimez pas (...)

  • Éditorial (HTML5UP)

    27 novembre 2017 – 61 commentaires

    Squelette SPIP pour intégrer le modèle Editorial de HTML5UP https://html5up.net/editorial Configuration La page de configuration permet quelques réglages. On y défini la couleur principale du site, des informations de contact et le contenu de la (...)

  • Timeline Me

    18 janvier – 10 commentaires

    TimelineMe - ​http://mickaelr.github.io/jquery-timelineMe/ - est un plugin jquery qui permet d’afficher des informations sur une ligne de temps. Le présent plugin pour SPIP l’utilise et propose un modèle pour afficher les articles d’une rubrique de (...)

  • GIS 4

    11 août 2012 – 1479 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)