Impressum

Version 1 du Bandeaux SPIP « Nivo Slider (jQuery) » alternés avec « Bannière-2 » et le « Logo du site »

Les boucles imbriquées SPIP (GROUPES_MOTS) et (MOTS) testent l’existence d’un mot-clé.
mardi 8 mars 2011
par  François Daniel Giezendanner
popularité : 1%
2 votes

Article mis à jour le lundi 28 mars 2011

 Préambule

Le développement présenté dans cet article est remplace par celui de l’article :

 Introduction

Il s’agit d’un petit exercice d’intégration d’un slider d’images animées, en l’occurrence le célèbre Nivo Slider, pour le bandeau d’un site motorisé par un CMS.

Le module ainsi créé permet de choisir (par mots-clés) entre 4 bandeaux différents pour le site :

  1. Le bandeau Nivo Slider affichant 12 images en fondu enchaîné.
  2. Le bandeau Nivo Slider affichant 12 images avec transitions aléatoires.
  3. La bannière créée avec le plugin « Bannière 2 ».
  4. Le logo du site.

 Création d’une « Version simple » du plugin original « Nivo Slider »

Cette version bandeau est une version purgée de nombreux attributs de « Nivo Slider » pour tourner dans le coins haut-gauche d’une page Web. A cette fin il faut modifier quelque peu les fichiers CSS et adapter le fichier html. Nous avons préparé une version en vue de son intégration dans le squelette SARKA. Trois fichiers html :

  • demo-fdg-04-fade-1-6sec.html : affichage de 12 images avec transitions en fondu enchainé. Durée de transition : 1 sec, durée d’affichage de chaque image : 6 sec.
  • demo-fdg-04-random-1-6sec.html : affichage de 12 images avec transitions aléatoires. Durée de transition : 1 sec, durée d’affichage de chaque image : 6 sec.
Zip - 1.5 Mo
« Version simple » du plugin original « Nivo Slider »

 Version intégrée à SARKA

Mise en place de la librairie : « bandeau-nivo-slider » à placer dans le répertoire /lib/ :

Zip - 33.9 ko
Librairie : bandeau-nivo-slider

Création des 2 fichiers html suivant qui seront appelés par l’instruction INCLURE :

  • /plugin/sarka/noisette/bandeau-nivo-slider-fade-12img.html
  • /plugin/sarka/noisette/bandeau-nivo-slider-random-12img.html

par le fichier :

  • /plugin/sarka/noisette/bandeau/inc_bandeau_haut.html

Lequel permet de choisir de faire apparaître en guise de bandeau au choix :

  • Le bandeau Nivo Slider de 12 images en fondu enchaîné
  • Le bandeau Nivo Slider de 12 images avec transitions aléatoires
  • La bannière créée avec le plugin « Bannière 2 »
  • Le logo du site

en associant à un article (n’importe lequel de votre choix) les mots clés respectivement :

  • Mot-clé : bandeau-nivo-slider-fade-12img
  • Mot-clé : bandeau-nivo-slider-random-12img
  • Mot-clé : bandeau-banniere-2
  • Mot-clé : n’associer aucun mot-clé

Le système permet de jouer des set d’images de diverses dimensions (même dimension au sein d’un set d’images). Par contre, pour jouer un nombre différent d’images et/ou des transitions différentes, il faut apporter des petites corrections au code.

Le choix de 12 images permet de jouer :

  • 2 images (dupliquées 6 fois et numérotée de 01 à 12)
  • 3 images (dupliquées 4 fois et numérotée de 01 à 12)
  • 4 images (dupliquées 3 fois et numérotée de 01 à 12)
  • 6 images (dupliquées 2 fois et numérotée de 01 à 12)
  • 12 images (1 fois numérotée de 01 à 12)

Les noms attribués sont toujours les mêmes :

  • bandeau-slider-01.jpg
  • bandeau-slider-02.jpg
  • bandeau-slider-03.jpg
  • bandeau-slider-04.jpg
  • bandeau-slider-05.jpg
  • bandeau-slider-06.jpg
  • bandeau-slider-07.jpg
  • bandeau-slider-08.jpg
  • bandeau-slider-09.jpg
  • bandeau-slider-10.jpg
  • bandeau-slider-11.jpg
  • bandeau-slider-12.jpg

Voici l’ensemble des fichiers, y inclus la librairie « bandeau-nivo-slider » et 12 images comme jeux d’essai :

Zip - 3.4 Mo
Set : bandeau Nivo Slider pour SARKA (mots-clés dans boucle ARTICLE)

Le code du fichier :

  • /plugin/sarka/noisette/bandeau/inc_bandeau_haut.html

Comporte trois boucle SPIP BOUCLE_xxx(ARTICLES) imbriquées pour procéder à l’aiguillage entre ces 4 possibilités :

[(#REM) <!-- Bandeau Haut --> ]
<div class="bandeau_haut">       
        [(#PIPELINE{
                bandeau_haut_debut,
                [(#ARRAY{args, [(#ARRAY{id_rubrique, #ENV{id_rubrique}})], data, ''})]}
        )]
        <div class="nav_bandeau">  
           <!-- Navigation dans les langues -->
                [(#CONFIG{sarkaspip_menus/position_langues, 4}|=={4}|?{' '})
                        <INCLURE{fond=noisettes/bandeau/inc_bandeau_langues}>
                ]
       <!-- Navigation dans les raccourcis -->
                [(#CONFIG{sarkaspip_menus/position_pages, 1}|=={4}|?{' '})
                        <INCLURE{fond=noisettes/navigation/inc_menu_pages_speciales}{position=bandeau_haut}>
                ]
       <!-- Navigation dans les raccourcis -->
                [(#CONFIG{sarkaspip_menus/position_formulaires, 1}|=={4}|?{' '})
                        <INCLURE{fond=noisettes/navigation/inc_menu_formulaires}{id_rubrique=#ENV{id_rubrique,0}}{position=bandeau_haut}>
                ]
        </div>

<B_bandeau_nivo_slider_fade>
        <!-- Code HTML optionnel avant-->
<BOUCLE_bandeau_nivo_slider_fade(ARTICLES){type_mot=squelette_habillage}{titre_mot=bandeau-nivo-slider-fade-12img}>
        <INCLURE{fond=noisettes/bandeau-nivo-slider-fade-12img}>
</BOUCLE_bandeau_nivo_slider_fade>
        <!-- Code HTML optionnel après-->
</B_bandeau_nivo_slider_fade>
        <B_bandeau_nivo_slider_random>
                <!-- Code HTML optionnel avant-->
        <BOUCLE_bandeau_nivo_slider_random(ARTICLES){type_mot=squelette_habillage}{titre_mot=bandeau-nivo-slider-random-12img}>
                <INCLURE{fond=noisettes/bandeau-nivo-slider-random-12img}>
        </BOUCLE_bandeau_nivo_slider_random>
                <!-- Code HTML optionnel après-->
        </B_bandeau_nivo_slider_random>
                <B_bandeau>
                        <!-- Code HTML optionnel avant-->
                <BOUCLE_bandeau(ARTICLES){type_mot=squelette_habillage}{titre_mot=bandeau-banniere-2}>
                        #BANNIERE{1}
                </BOUCLE_bandeau>
                <!-- Code HTML optionnel après-->
                </B_bandeau>
                        #SET{logo, #LOGO_SITE_SPIP}
                        [(#CONFIG{sarkaspip_bandeau/logo_reduit, 1}|=={1}|?{' '})
                                [(#SET{logo, [(#LOGO_SITE_SPIP||image_reduire{#CONFIG{sarkaspip_bandeau/taille_logo, 150}})]})]
                        ]
                        [<a class="site_logo" href="#URL_SITE_SPIP" title="<:sarkaspip:accueil_site:>">(#GET{logo})</a>]
                        <div class="site_nom">
                                [(#CONFIG{sarkaspip_bandeau/titre_site, 1}|=={1}|?{' '})
                                   [<h1><a href="#URL_SITE_SPIP" title="<:sarkaspip:accueil_site:>">(#NOM_SITE_SPIP)</a></h1>]
                                ]
                           [<h2>(#CONFIG{sarkaspip_bandeau/slogan})</h2>]
                        </div>
                        <br class="nettoyeur" />
                        [(#PIPELINE{
                                bandeau_haut_fin,
                                [(#ARRAY{args, [(#ARRAY{id_rubrique, #ENV{id_rubrique}})], data, ''})]}
                        )]
                <//B_bandeau>
        <//B_bandeau_nivo_slider_random>
<//B_bandeau_nivo_slider_fade>
</div>

Le code du fichier :

  • /plugin/sarka/noisette/bandeau-nivo-slider-fade-12img.html
        <div id="slider" class="nivoSlider">
                <a href="#URL_SITE_SPIP"><img src="IMG/jpg/bandeau-slider-01.jpg" /></a>
                <a href="#URL_SITE_SPIP"><img src="IMG/jpg/bandeau-slider-02.jpg" /></a>
                <a href="#URL_SITE_SPIP"><img src="IMG/jpg/bandeau-slider-03.jpg" /></a>
                <a href="#URL_SITE_SPIP"><img src="IMG/jpg/bandeau-slider-04.jpg" /></a>
                <a href="#URL_SITE_SPIP"><img src="IMG/jpg/bandeau-slider-05.jpg" /></a>
                <a href="#URL_SITE_SPIP"><img src="IMG/jpg/bandeau-slider-06.jpg" /></a>
                <a href="#URL_SITE_SPIP"><img src="IMG/jpg/bandeau-slider-07.jpg" /></a>
                <a href="#URL_SITE_SPIP"><img src="IMG/jpg/bandeau-slider-08.jpg" /></a>
                <a href="#URL_SITE_SPIP"><img src="IMG/jpg/bandeau-slider-09.jpg" /></a>
                <a href="#URL_SITE_SPIP"><img src="IMG/jpg/bandeau-slider-10.jpg" /></a>
                <a href="#URL_SITE_SPIP"><img src="IMG/jpg/bandeau-slider-11.jpg" /></a>
                <a href="#URL_SITE_SPIP"><img src="IMG/jpg/bandeau-slider-12.jpg" /></a>
        </div>

        <script type="text/javascript" src="lib/bandeau-nivo-slider/scripts/jquery-1.4.3.min.js"></script>
        <script type="text/javascript" src="lib/bandeau-nivo-slider/scripts/jquery.nivo.slider.pack.js"></script>
        <script type="text/javascript">
$(window).load(function() {
        $('#slider').nivoSlider({
                effect:'fade', //Specify sets like: 'fold,fade,sliceDown'  Liste :     * sliceDown : sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random, slideInRight, slideInLeft
                slices:15,
                animSpeed:1000,
                pauseTime:6000,
                startSlide:0, //Set starting Slide (0 index)
                directionNav:false, //Next & Prev
                directionNavHide:true, //Only show on hover
                controlNav:false, //1,2,3...
                controlNavThumbs:false, //Use thumbnails for Control Nav
                controlNavThumbsSearch: '.jpg', //Replace this with...
                controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
                keyboardNav:false, //Use left & right arrows
                pauseOnHover:false, //Stop animation while hovering
                manualAdvance:false, //Force manual transitions
                captionOpacity:0.8, //Universal caption opacity
                beforeChange: function(){},
                afterChange: function(){},
                slideshowEnd: function(){} //Triggers after all slides have been shown
        });
});
   </script>

 Variante sans associer les mots clés à un article : Boucles imbriquées SPIP (GROUPES_MOTS) et (MOTS)

Les boucles imbriquées SPIP (GROUPES_MOTS) et (MOTS) testent l’existence d’un mot-clé.

Avec cette variante on n’associe plus les mots-clés à un article mais on teste l’existence ou l’inexistance des mots-clés.

Ici on exploite la technique présentée dans l’article :

Les mots-clés à créer sont :

  • Mot-clé : bandeau-nivo-slider-fade-12img
  • Mot-clé : bandeau-nivo-slider-random-12img
  • Mot-clé : bandeau-banniere-2
  • Mot-clé : mot-clé n’existe

Lorsque l’on désire qu’ils n’existent pas il suffit de les modifier, par exemple en leur ajoutant un ou plusieurs caractères, ici trois tirets ---

  • Mot-clé : bandeau-nivo-slider-fade-12img---
  • Mot-clé : bandeau-nivo-slider-random-12img---
  • Mot-clé : bandeau-banniere-2---

Le principe est qu’un seul des trois mots-clés existe, par exemple avec :

  • Mot-clé : bandeau-nivo-slider-fade-12img---
  • Mot-clé : bandeau-nivo-slider-random-12img
  • Mot-clé : bandeau-banniere-2---

C’est « Le bandeau Nivo Slider de 12 images avec transitions aléatoires » qui est activé.

Avec :

  • Mot-clé : bandeau-nivo-slider-fade-12img---
  • Mot-clé : bandeau-nivo-slider-random-12img---
  • Mot-clé : bandeau-banniere-2---

c’est « Le logo du site » qui est activé.

Voici l’ensemble des fichiers, y inclus la librairie « bandeau-nivo-slider » et 12 images comme jeux d’essai :

Zip - 3.4 Mo
Set : bandeau Nivo Slider pour SARKA (mots-clés dans boucle MOTS)

Le code du fichier :

  • /plugin/sarka/noisette/bandeau/inc_bandeau_haut.html

Comporte une boucle SPIP BOUCLE_groupes(GROUPES_MOTS) et trois boucles SPIP BOUCLE_mots(MOTS) imbriquées pour procéder à l’aiguillage entre ces 4 possibilités :

[(#REM) <!-- Bandeau Haut --> ]
<div class="bandeau_haut">       
        [(#PIPELINE{
                bandeau_haut_debut,
                [(#ARRAY{args, [(#ARRAY{id_rubrique, #ENV{id_rubrique}})], data, ''})]}
        )]
        <div class="nav_bandeau">  
           <!-- Navigation dans les langues -->
                [(#CONFIG{sarkaspip_menus/position_langues, 4}|=={4}|?{' '})
                        <INCLURE{fond=noisettes/bandeau/inc_bandeau_langues}>
                ]
       <!-- Navigation dans les raccourcis -->
                [(#CONFIG{sarkaspip_menus/position_pages, 1}|=={4}|?{' '})
                        <INCLURE{fond=noisettes/navigation/inc_menu_pages_speciales}{position=bandeau_haut}>
                ]
       <!-- Navigation dans les raccourcis -->
                [(#CONFIG{sarkaspip_menus/position_formulaires, 1}|=={4}|?{' '})
                        <INCLURE{fond=noisettes/navigation/inc_menu_formulaires}{id_rubrique=#ENV{id_rubrique,0}}{position=bandeau_haut}>
                ]
        </div>

<BOUCLE_groupes(GROUPES_MOTS){titre=squelette_habillage}>
        <B_bandeau_nivo_slider_fade>
                <!-- Code HTML optionnel avant-->
        <BOUCLE_bandeau_nivo_slider_fade(MOTS){titre=bandeau-nivo-slider-fade-12img}>
                <INCLURE{fond=noisettes/bandeau-nivo-slider-fade-12img}>
        </BOUCLE_bandeau_nivo_slider_fade>
                <!-- Code HTML optionnel après-->
        </B_bandeau_nivo_slider_fade>
                <B_bandeau_nivo_slider_random>
                        <!-- Code HTML optionnel avant-->
                <BOUCLE_bandeau_nivo_slider_random(MOTS){titre=bandeau-nivo-slider-random-12img}>
                        <INCLURE{fond=noisettes/bandeau-nivo-slider-random-12img}>
                </BOUCLE_bandeau_nivo_slider_random>
                        <!-- Code HTML optionnel après-->
                </B_bandeau_nivo_slider_random>
                        <B_bandeau>
                                <!-- Code HTML optionnel avant-->
                        <BOUCLE_bandeau(MOTS){titre=bandeau-banniere-2}>
                                #BANNIERE{1}
                        </BOUCLE_bandeau>
                        <!-- Code HTML optionnel après-->
                        </B_bandeau>
                                #SET{logo, #LOGO_SITE_SPIP}
                                [(#CONFIG{sarkaspip_bandeau/logo_reduit, 1}|=={1}|?{' '})
                                        [(#SET{logo, [(#LOGO_SITE_SPIP||image_reduire{#CONFIG{sarkaspip_bandeau/taille_logo, 150}})]})]
                                ]
                                [<a class="site_logo" href="#URL_SITE_SPIP" title="<:sarkaspip:accueil_site:>">(#GET{logo})</a>]
                                <div class="site_nom">
                                        [(#CONFIG{sarkaspip_bandeau/titre_site, 1}|=={1}|?{' '})
                                           [<h1><a href="#URL_SITE_SPIP" title="<:sarkaspip:accueil_site:>">(#NOM_SITE_SPIP)</a></h1>]
                                        ]
                                   [<h2>(#CONFIG{sarkaspip_bandeau/slogan})</h2>]
                                </div>
                                <br class="nettoyeur" />
                                [(#PIPELINE{
                                        bandeau_haut_fin,
                                        [(#ARRAY{args, [(#ARRAY{id_rubrique, #ENV{id_rubrique}})], data, ''})]}
                                )]
                        <//B_bandeau>
                <//B_bandeau_nivo_slider_random>
        <//B_bandeau_nivo_slider_fade>
</BOUCLE_groupes>
</B_groupes>
<//B_groupes>

 Installation

  • Placer la librairie « bandeau-nivo-slider » dans le répertoire /lib/
  • Placer les 2 fichiers html suivant dans le dossier /plugin/sarka/noisette/ :
    • /plugin/sarka/noisette/bandeau-nivo-slider-fade-12img.html
    • /plugin/sarka/noisette/bandeau-nivo-slider-random-12img.html
  • Placer le fichier inc_bandeau_haut.html dans le répertoire /plugin/sarka/noisette/bandeau/ :
    • /plugin/sarka/noisette/bandeau/inc_bandeau_haut.html

 Avantages de ce module

Ce module est installé dans un distribution unique sans qu’il soit nécessaire de l’adapter de site en site, il ne nécessite aucun réglage et fonctionne pour des bandeaux de toutes dimensions.


 Inconvénients de ce module

Ce module est conçu pour un nombre donné fixe d’images, en l’occurence ici 12 images et pour des transitions prédéfinies, ici « random » et « fade ». Pour d’autres réglages il faut créer des fichiers supplémentaires du type « bandeau-nivo-slider-fade-12img.html » et « bandeau-nivo-slider-random-12img.html ». Il faut également modifier en conséquence le fichier « inc_bandeau_haut.html » et créer les mots clés de sélection s’il y a lieu.


Commentaires  (fermé)

vendredi 29 juillet 2011 à 22h23

Bonjour,

Pour le premier dans l’edito c’est une adaptation du composant Accordion jQuery.

Pour le second (centre aéré d’été), il s’agit de la mise en œuvre du plugin cooloris spip http://www.spip-contrib.net/Cooliri...

Dans un autre style vous avez aussi celui là qui peut être adapté, il est du plus bel effet aussi. http://www.jacksasylum.eu/ContentFlow/ Le tuto (en anglais) permet de le mettre en œuvre assez facilement sur un site.

Logo de François Daniel Giezendanner
vendredi 29 juillet 2011 à 11h18, par  François Daniel Giezendanner

Bonjour,

Votre site http://www.denney.fr est excellent au plan ergonomique, c’est une belle mise en œuvre du squelette SARKA et du du thème spring de _Shizuka_ .

En plus du bandeau qui est l’objet de votre message j’observe l’exploitation de deux très beaux sliders d’images dont je ne connais pas la mise en œuvre dans SPIP.

  • L’un se trouve dans l’Edito sous : Coordonnées, permanences, informations diverses.
  • L’autre dans CENTRE AERE D’ETE 2011, TROISIEME SEMAINE…

S’agit-il de plugins ou d’une mise en œuvre de votre cru ?

Bien cordialement

FDG

vendredi 29 juillet 2011 à 06h59

Bonjour,

Réponse très tardive par rapport au dernier post, juste pour dire que cela fonctionne désormais. Voici comment j’ai procédé. 1)Création d’un article avec les images du bandeau 2) Modification du fichier inc_bandeau_haut.html en lui insérant le code suivant (appel du modèle niveau nivo slider ) [(#MODELEnivosliderid_nivoslider=n° article] 3) copie du fichier inc_bandeau_haut.html dans le répertoire squelettes/noisettes/bandeau

J’en profite pour vous remercier pour les articles pédagogiques que vous mettez en ligne régulièrement. Il m’arrive fréquemment de m’en servir pour une mise en application sur le site que j’anime. Cordialement,

Ex : http://www.denney.fr

Logo de François Daniel Giezendanner
lundi 28 mars 2011 à 11h07, par  François Daniel Giezendanner

Bonjour Norbi,

Merci de vous intéresser à la mise en œuvre de « Nivo Slider » dans SPIP et le squelette en plugin SARKA.

Vous avez en effet rencontré des difficultés consécutives à des insuffisances que je viens de corriger. Vous pouvez donc maintenant télécharger les nouvelles versions, elles devraient beaucoup mieux se comporter.

Par contre le bandeau de mon site n’est pas créé de cette manière, il s’agit d’un « GIF animé » créé selon la technique présentée dans l’article :

En vous souhaitant plus de succès avec ces nouvelles versions.

Cordialement

FDG

Logo de norbi90160
dimanche 27 mars 2011 à 22h51, par  norbi90160

Bonjour, Cet article m’ayant paru très intéressant j’ai voulu intégrer le slider avec des images dans le bandeau d’un site spip 2.1.8 avec sarka 3.0.4.

Je rencontre quelques difficultés, à savoir :

- Le slider s’affiche et passe les images sous forme de diaporama, par contre l’ensemble n’est pas centré sur le bandeau du haut et du coup les images du slider recouvrent presque entièrement le menu de la partie basse du bandeau.

- J’obtiens par ailleurs des effets de bord inattendus : * La colonne sommaire chevauche et descend bien au delà du pied de page * Les images de la noisette « Top album » dépassent le cadre de la noisette * Les images de la noisette « Sites favoris » ne défilent plus sous forme de diaporama mais s’affichent les une en dessous des autres.

Auriez-vous déjà rencontré et résolu ce type d’anomalie ? Pour info, mes images sont bien en .jpg et ont une taille 1100px de large et 110px de haut.

Et tout cas, si la mise en application que vous décrivez correspond au bandeau de votre site, c’est du plus bel effet. Cordialement, Norbert.

Site web : Site de la commune

Publications

Derniers articles publiés

Agenda

<<

2014

 

<<

Novembre

 

Aujourd'hui

LuMaMeJeVeSaDi
272829303112
3456789
10111213141516
17181920212223
24252627282930
Aucun évènement à venir les 6 prochains mois

Météo

Geneva, GE, Switzerland

Conditions météo à 04h05
par weather.com®

Nuageux

6°C


Nuageux
  • Vent : 0 km/h - N/D
  • Pression : 1005 mbar ↑
Prévisions >>

Prévisions du 28 novembre
par weather.com®

Soleil et nuages épars

Max 13°C
Min 6°C


Soleil et nuages épars
  • Vent : 12 km/h
  • Risque de precip. : %
<< Conditions  |  Prévisions >>

Prévisions du 29 novembre
par weather.com®

Soleil et nuages épars

Max 15°C
Min 7°C


Soleil et nuages épars
  • Vent : 8 km/h
  • Risque de precip. : 0%
<<  Prévisions  >>

Prévisions du 30 novembre
par weather.com®

Soleil et nuages épars

Max 13°C
Min 5°C


Soleil et nuages épars
  • Vent : 8 km/h
  • Risque de precip. : 10%
<<  Prévisions  >>

Prévisions du 1er décembre
par weather.com®

Averses

Max 6°C
Min 3°C


Averses
  • Vent : 12 km/h
  • Risque de precip. : 50%
<<  Prévisions  >>

Prévisions du 2 décembre
par weather.com®

Orage épars

Max 5°C
Min 1°C


Orage épars
  • Vent : 9 km/h
  • Risque de precip. : 40%
<<  Prévisions  >>

Prévisions du 3 décembre
par weather.com®

Très nuageux

Max 4°C
Min N/D°C


Très nuageux
  • Vent : 16 km/h
  • Risque de precip. : 20%
<<  Prévisions  >>

Prévisions du 4 décembre
par weather.com®

Soleil et nuages épars

Max 5°C
Min N/D°C


Soleil et nuages épars
  • Vent : 6 km/h
  • Risque de precip. : 10%
<< Prévisions


Annonces

Embed Twitter « responsive tools »

Pour le faire sur votre site


Embed Twitter « RWD »

Pour le faire sur votre site


Embed Twitter dans SPIP

Pour le faire sur votre site


Sites favoris


4 sites référencés dans ce secteur