Layouts – Fond en Slider – Rayures

LEÇON PRATIQUE

 

Caractéristiques

Similaire au layout "Fond en Slider Plein Écran" sauf que cette fois-ci la page comporte plusieurs zones, chacune avec son propre slider. Entièrement responsive, les images du slider sont optimisées pour la zone disponible quelque soit les dimensions de l'écran.

 

fond-en-slider-rayures-screenshotFond en Slider - Rayures

Page en ligne : Ouvrir

Code source (fichier ZIP) : Télécharger

 

Comment ça marche ?

Le slider est toujours un Nivo Slider classique.

 

Les zones autour des sliders sont configurées via des classes génériques (slider-section-wrapper, slider-imagewidth-wrapper, etc) puis chaque zone à un identifiant pour faciliter la manipulation via JavaScript / jQuery.

 

Autour du slider, toujours 3 zones (classes) imbriquées de façon hiérarchique :

  •  le grand-parent (div class="slider-section-wrapper") : une zone qui a toujours la même largeur que son conteneur. Sa hauteur est fixée par le JavaScript / jQuery en fonction de la hauteur de son contenu (il peut y avoir une hauteur minimum configurée via CSS également). Cette zone sert de vue taillée sur le slider à son intérieure : c'est à travers cette zone (et ses dimensions) qu'on voit le slider (ou juste seulement une partie). Comme cette zone ne deborde jamais sur les côtés, la barre de scroll gauche-droite n'est jamais activée par le slider, même s'il est plus large que son conteneur.
  • le parent (div class="slider-imagewidth-wrapper") : une zone qui détermine les dimensions des images du slider. La largeur des images du slider, sera fixée par le javascript pour optimiser les dimensions des images (afficher un maximum de contenu graphique). Cette zone est l'enfant direct de .slider-section-wrapper et elle peut déborder de la zone définie par son parent. Ainsi le slider peut couvrir horizontalement et verticalement toute sorte de zone sans déclencher la barre de scroll gauche-droite.
  • l'enfant (div class="nivoSlider") : comme au layout "Fond en slider - Plein Écran", conteneur classique pour un slider de type Nivo Slider qui , par défaut, hérite sa largeur de son parent. C'est la div qui contient les images du slider.

 

Nouveau dans ce layout :

  • La zone (div classe="slider-and-content-wrapper") qui entoure les 3 zones du slider (divs class="slider-section-wrapper", class="slider-imagewidth-wrapper", class="nivoSlider") et le contenu qui est affiché par dessus le slider (div class="content-wrapper").
  • Le but de cette classe est de fournir un point d'ancre pour la zone "slider-section-wrapper" qui est en position absolute.
  • Dans cet exemple cette zone permet également de mettre un fond derrière le slider pour faire un écran opaque entre le slider et l'image de fond de la page pour éviter des problèmes de clignotement pendant les transitions du slider

 

Rôle du JavaScript / jQuery :

  • fixer la largeur de CHAQUE div avec id "slider-[n]-imagewidth-wrapper" pour imposer des dimensions optimisées sur les images du slider
  • centrer horizontalement ou verticalement (selon où se trouve le débordement) les images du slider (centrer CHAQUE div avec id "slider-[n]-imagewidth-wrapper" ) : ces divs aura une marge négative à gauche ou en haut qui assure que la partie centrale des images du Slider soit visible.
  • fixer la hauteur de CHAQUE div avec id "slider-[n]-section-wrapper" (la fenêtre à travers laquelle on voit le slider, ou seulement une partie) - ceci est nouveau par rapport au layout "Fond en slider - Plein Écran" car dans le layout actuel on ne couvre pas toute la fenêtre avec un seul slider - on est obligé de calculer et imposer une hauteur pour chaque slider.

 

HTML


        <div class="content-wrapper">
            ...
        </div>

        <div class="slider-and-content-wrapper" id="slider-1-and-content-wrapper">

            <div class="slider-section-wrapper" id="slider-1-section-wrapper">
                <div class="slider-imagewidth-wrapper" id="slider-1-imagewidth-wrapper">
                    <div class="nivoSlider" id="slider-1">
                        <img src="image1.jpg"/>
                        <img src="image2.jpg"/>
                        <img src="image4.jpg"/>
                    </div>
                </div>
            </div>

            <div class="content-wrapper" id="slider-1-content">
                ...
            </div>

        </div>

        <div class="content-wrapper">
            ...
        </div>

        <div class="slider-and-content-wrapper" id="slider-2-and-content-wrapper">

            <div class="slider-section-wrapper" id="slider-2-section-wrapper">
                <div class="slider-imagewidth-wrapper" id="slider-2-imagewidth-wrapper">
                    <div class="nivoSlider" id="slider-2">
                        <img src="image5.jpg"/>
                        <img src="image6.jpg"/>
                        <img src="image3.jpg"/>
                    </div>
                </div>
            </div>

            <div class="content-wrapper" id="slider-2-content">
                ...
            </div>

        </div>

        <div class="content-wrapper">
            ...
        </div>

 

CSS

/* .slider-and-content-wrapper entoure un slider et son contenu - cette div est le point d'ancre pour ses enfants en */
/* position absolute */
.slider-and-content-wrapper
{
  position:relative;
  top:0;
  left:0;
  background-color:black; /* mettre un fond derrière le slider pour faire un écran opaque entre le slider et l'image de */
                          /* fond de la page pour éviter des problèmes de clignotement pendant les transitions du slider */
}

/* .slider-section-wrapper est une zone qui a toujours la même largeur que son conteneur. Sa hauteur est fixée par le */
/* javascript en fonction de la hauteur de son contenu (il peut y avoir une hauteur minimum configurée via CSS */
/* également. Cette zone sert de vue taillée sur le slider à son intérieure : c'est à travers cette zone (et ses */
/* dimensions) qu'on voit le slider (ou juste seulement une partie). Comme cette zone ne deborde jamais sur les */
/* côtés, la barre de scroll gauche-droite n'est jamais activée par le slider, même s'il est plus large que son conteneur. */
.slider-section-wrapper
{
  position:absolute;
  top:0;
  left:0;
  width:100%; /* largeur de son conteneur */
  height:0;   /* la hauteur sera fixée par le javascript */
  margin:0;
  padding:0;
  z-index:0;
  overflow:hidden;
}

/* .slider-imagewidth-wrapper est une zone qui détermine les dimensions des images du slider. La largeur des */
/* images du slider, sera fixée par le javascript pour optimiser les dimensions des images (afficher un maximum */
/* de contenu graphique). Cette zone est l'enfant direct de .slider-section-wrapper et elle peut déborder */
/* de la zone définie par son parent. Ainsi le slider peut couvrir horizontalement et verticalement toute sorte */
/* de zone sans déclencher la barre de scroll gauche-droite. */
.slider-imagewidth-wrapper
{
  width:0;  /* la largeur des images du slider, sera fixée par le javascript pour optimiser les dimensions des */
            /* images (afficher un maximum de contenu graphique) */
  margin:0; /* la marge à gauche sera fixée par le javascript pour centrer le slider */
  padding:0;
}

/* styles pour contenu générique (dans ou en dehors d'un slider) */
.content-wrapper
{
  margin:0;
  padding:20px;
  color:#181818;
}

/* styles qui priment pour le contenu qui se trouve dans un slider */
.slider-and-content-wrapper .content-wrapper
{
  margin-left:25%;
  background-color:rgba(0, 0, 0, 0.4);
  position:relative;
  top:0;
  left:0;
  z-index:50;
  color:white;
}

 

JavaScript / jQuery


          function config() {}
          config.imageProportions = 1.777777778; /* (16/9ème) largeur divisé par hauteur des images de fond (toutes identiques) */
          config.numSliderSections = 2; /* parametre : nombre de sections avec slider présentes dans la page */

          function getContentWidth(n)
          {
            var el = $('#slider-' + n + '-content');
            var contentWidth = el.width() + parseInt(el.css("padding-left")) + parseInt(el.css("padding-right"))
                                  + parseInt(el.css("margin-left")) + parseInt(el.css("margin-right"));
            return contentWidth;
          }

          function getContentHeight(n)
          {
            var el = $('#slider-' + n + '-content');
            var contentHeight = el.height() + parseInt(el.css("padding-top")) + parseInt(el.css("padding-bottom"))
                                  + parseInt(el.css("margin-top")) + parseInt(el.css("margin-bottom"));
            return contentHeight;
          }

          /* setSliderImageWidth() : fonction pour optimiser les dimensions des images du slider, autrement dit afficher */
          /* un maximum de contenu graphique. Cette fonction manipule la largeur de la div slider-[n]-imagewidth-wrapper */
          /* et les images du slider hériteront cette largeur. La valeur de retour (un booléan) indique si les images */
          /* débordent horizontalement (retour vrai) ou verticalement (retour faux) */
          function setSliderImageWidth(n)
          {
            var contentWidth = getContentWidth(n);   /* largeur de la zone de contenu pour ce slider */
            var contentHeight = getContentHeight(n); /* hauteur de la zone de contenu pour ce slider */
            var contentProportions = contentWidth / contentHeight; /* proportions de la zone de contenu pour ce slider */
            if (config.imageProportions > contentProportions) {  /* les images sont plus "paysage" que la zone de contenu : les images déborderont horizontalement */
              /* on fait en sorte que la hauteur de l'image correspond à la hauteur de la zone */
              $('#slider-' + n + '-imagewidth-wrapper').width(config.imageProportions * contentHeight);
              return true; /* indicateur que les images débordent horizontalement */
            } else { /* les images sont plus "portrait" que la zone de contenu : les images déborderont verticalement */
              /* on fait en sorte que la largeur de l'image correspond à la largeur de la zone */
              $('#slider-' + n + '-imagewidth-wrapper').width(contentWidth);
              return false; /* indicateur que les images débordent verticalement */
            }
          }

          /* setSliderMargin() : fonction pour centrer le slider via sa marge à gauche ou en haut. Si le slider */
          /* déborde horizontalement la div slider-[n]-imagewidth-wrapper aura une marge négative à gauche. Si le */
          /* slider déborde verticalement cette div aura une marge négative en haut. Dans les deux cas cette */
          /* manipulation assure que c'est la partie centrale du slider qui est visible. */
          function setSliderMargin(n, horizontalOverflow)
          {
            if (horizontalOverflow) { /* besoin de centrer le slider via une marge négative à gauche */
              var contentWidth = getContentWidth(n);   /* largeur de la zone de contenu pour ce slider */
              var sliderWidth = $('#slider-' + n + '-imagewidth-wrapper').width(); /* largeur des images du slider */
              var offset = parseInt((sliderWidth - contentWidth) / 2.0);
              $('#slider-' + n + '-imagewidth-wrapper').css("margin", '0 0 0 -' + offset + 'px'); /* marge à gauche négative */
            } else { /* besoin de centrer le slider via une marge négative en haut */
              var contentHeight = getContentHeight(n); /* hauteur de la zone de contenu pour ce slider */
              var sliderHeight = $('#slider-' + n + '-imagewidth-wrapper').width() / config.imageProportions; /* hauteur des images du slider */
              var offset = parseInt((sliderHeight - contentHeight) / 2.0);
              $('#slider-' + n + '-imagewidth-wrapper').css("margin", '-' + offset + 'px 0 0 0'); /* marge en haut négative */
            }
          }

          /* setSliderSectionHeight() : fonction pour fixer la hauteur de la div slider-[n]-section-wrapper (c'est à travers cette */
          /* div qu'on voit le slider (ou seulement une partie). */
          function setSliderSectionHeight(n)
          {
            var contentHeight = getContentHeight(n);
            $('#slider-' + n + '-section-wrapper').height(contentHeight);
          }

          function elementDimensioningAndPositioning(n)
          {
            for(n=1; n<=config.numSliderSections; n++)
            {
              var horizontalOverflow = setSliderImageWidth(n); /* fixer la largeur des images du slider et recevoir une indication si elles débordent horizontalement ou verticalement */
              setSliderMargin(n, horizontalOverflow); /* passer cette indication à cette fonction qui fixe les marges pour centrer le slider */
              setSliderSectionHeight(n); /* fixer la hauteur de la section à travers laquelle on voit le slider */
            }
          }

          $(window).load(function() {
            for(n=1; n<=config.numSliderSections; n++)
            {
              elementDimensioningAndPositioning(n);
              $('#slider-' + n).nivoSlider({ effect: 'fade',
                                             animSpeed: 1800,
                                             pauseTime: 5000,
                                             directionNav: false,
                                             controlNav: false,
                                             pauseOnHover: false, });
            }
          });

          $(window).resize(function() {
            for(n=1; n<=config.numSliderSections; n++)
            {
              elementDimensioningAndPositioning(n);
            }
          });