Diaporama responsive avec Nivo Slider

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 :

[(#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).

Démo

http://www.naga44.org/

Discussion

3 discussions

  • 2

    Bonjour,
    Je souhaite augmenter le temps entre chaque slide.
    Comment faire merci.

    D’avance je vous en remercie.

    Répondre à ce message

  • 1

    Super ! Pour info le plugin NivoSlider est nativement responsive depuis près de 2 ans : http://zone.spip.org/trac/spip-zone/changeset/80294/_plugins_/nivoslider/trunk

    Il suffit que les feuilles de style du site incluent une directive du type

    img {max-width:100%;height:auto;}

    habituelle dans tout site responsive.

    • Bonjour Cerdic,

      J’étais bien passé par ce genre de modif, mais je me retrouvais avec des glitchs d’affichage que je n’ai jamais réussi à corriger... (Sous Zpip)

      C’est pour ça que je suis passé par « la bidouille » mentionnée ci-dessus.

    Répondre à ce message

  • 2

    Bonjour,
    question bête, on garde bien le plugin actif pour que votre adaptation fonctionne ?
    (Le slider ne fonctionne que si Nivoslider est actif, mais je n’ai pas le responsive sur mes images... donc soit je me suis planté qqpart, soit l’adaptation n’est pas prise en compte et c’est Nivoslider classique qui tourne ?...)

    J’ai aussi un affichage des numéros (nombre de résultats de la boucle (123...) par dessus les images qui se décalent en dessous au slide suivant.

    Merci

    • Bonjour,

      le plugin est désativé dans l’adaptation montrée ici. En le gardant activé, on aura des conflits.

    • Génial, merci Ben !
      (il manquait juste le « inclure/ » devant les chemins du head

      Bisous (de Raf)

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

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.

Qui êtes-vous ?
[Se connecter]

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom