Layouts – Fond en Slider Plein Écran avec Images Optimisées

LEÇON PRATIQUE

 

Caractéristiques

Comme le layout précédant "Fond en Slider - Plein Écran" : ce layout offre un fond d'écran qui couvre toute la page et qui fait défiler des images d'un Slider.

Ce qui est nouveau avec ce layout : Les dimensions des images dans le Slider sont optimisées pour maximiser la quantité de contenu graphique affiché.

Donc, contrairement au layout précédant, les images de Slider seront taillées de façon à ce qu'elles ne débordent plus, à la fois, verticalement et horizontalement. Un seul débordement sera possible, soit horizontal, soit vertical, selon les proportions de l'écran (fenêtre du navigateur) et des images.

Effet de bord (positif ou négatif selon son point de vue) : sur les très grands écrans les images seront retaillées pour remplir l'écran même si l'écran est plus grand/large que les images. Attention donc à la pixellisation !

Contraintes et bonnes pratiques : il faut utiliser des images avec les même proportions car les proportions sont renseignées (une seule fois pour toutes les images) via un paramètre dans le JavaScript. Idéalement toutes les images ont aussi les même dimensions. Pour couvrir tous les cas d'écran, il vaut mieux utiliser des images relativement grandes. Mais attention au poids des images - il faut trouver le bon compromis entre qualité, dimensions et poids.

 

fond-en-slider-plein-ecran-screenshotFond en Slider - Plein Écran avec Images Optimisées

Page en ligne : Ouvrir

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

 

Comment ça marche ?

Le Slider est toujours un Nivo Slider classique. Dans le HTML, il y a toujours deux "sections" (divs) principales : la section pour le Slider (même largeur que la fenêtre du navigateur, et en position "fixed" pour ne pas manger le flux) et la section du contenu (s'affiche par dessus la zone du Slider).

 

Dans la section pour le Slider il y a toujours les 3 zones, imbriquées de façon hiérarchique. Le "grand-parent" (div id="slider-screenwidth-wrapper") et "l'enfant" (div id="slider") ont toujours les mêmes caractéristiques par rapport au layout précédent. Par contre le rôle du "parent change légèrement :

  • le parent (div id="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 / jQuery pour optimiser les dimensions des images (afficher un maximum de contenu graphique). Cette zone est l'enfant direct de #slider-screenwidth-wrapper et elle peut déborder de la zone définie par son parent. Ainsi le Slider peut couvrir horizontalement et verticalement toute sorte d'écran sans déclencher la barre de scroll gauche-droite.

 

Dans la section pour le contenu il y a toujours les 2 zones (div id="content-backdrop" et div id="content-wrapper"), imbriquées de façon hiérarchique, et avec les mêmes rôles et caractéristiques.

 

Rôle du JavaScript / jQuery :

  • (Comme dans le layout précédant) : régler la hauteur de la div "content-backdrop" pour qu'elle soit toujours au moins la même hauteur que la fenêtre du navigateur
  • Nouveau : fixer la largeur de la div "slider-imagewidth-wrapper" pour imposer des dimensions optimisées sur les images du slider
  • Nouveau : Centrer horizontalement ou verticalement (selon où se trouve le débordement) les images du slider (centrer la div "slider-imagewidth-wrapper") : cette div aura une marge négative à gauche ou en haut qui assure que la partie centrale des images du Slider soit visible.

 

HTML (rien de nouveau)


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

        <div id="content-backdrop">
            <div id="content-wrapper">

                ...

            </div>
        </div>

 

CSS (la div #slider-imagewidth-wrapper change un peu...)


/* #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-screenwidth-wrapper et elle peut déborder */
/* de la zone définie par son parent. Ainsi le slider peut couvrir horizontalement et verticalement toute sorte */
/* d'écran 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;
}

 

JavaScript / jQuery


          /* config est un conteneur pour le(s) paramètre(s) de configuration */
          function config() {}
          config.imageProportions = 1.777777778; /* (16/9ème) largeur divisé par hauteur des images de fond (toutes identiques) */

          /* 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-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() {
            var windowWidth = $(window).width();                /* largeur de la fenêtre du navigateur */
            var windowHeight = $(window).height();              /* hauteur de la fenêtre du navigateur */
            var windowProportions = windowWidth / windowHeight; /* proportions de la fenêtre */
            if (config.imageProportions > windowProportions) {  /* les images sont plus "paysage" que l écran : les images déborderont horizontalement */
              /* on fait en sorte que la hauteur de l image correspond à la hauteur de l écran */
              $('#slider-imagewidth-wrapper').width(config.imageProportions * windowHeight);
              return true; /* indicateur que les images débordent horizontalement */
            } else { /* les images sont plus "portrait" que l écran : les images déborderont verticalement */
              /* on fait en sorte que la largeur de l image correspond à la largeur de l écran */
              $('#slider-imagewidth-wrapper').width(windowWidth);
              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-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(horizontalOverflow)
          {
            if (horizontalOverflow) { /* besoin de centrer le slider via une marge négative à gauche */
              var windowWidth = $(window).width(); /* largeur de la fenêtre du navigateur */
              var sliderWidth = $('#slider-imagewidth-wrapper').width(); /* largeur des images du slider */
              var offset = parseInt((sliderWidth - windowWidth) / 2.0);
              $('#slider-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 windowHeight = $(window).height(); /* hauteur de la fenêtre du navigateur */
              var sliderHeight = $('#slider-imagewidth-wrapper').width() / config.imageProportions; /* hauteur des images du slider */
              var offset = parseInt((sliderHeight - windowHeight) / 2.0);
              $('#slider-imagewidth-wrapper').css("margin", '-' + offset + 'px 0 0 0'); /* marge en haut négative */
            }
          }

          /* setContentBackdropHeight() : fonction pour modifier la hauteur du content-backdrop (le fond noir */
          /* semi-transparent) pour qu elle soit toujours au moins la même hauteur que la fenêtre. */
          function setContentBackdropHeight() {
            var windowHeight = $(window).height();          /* hauteur de la fenêtre du navigateur */
            var contentHeight = $('#content-wrapper').height()
                     + parseInt($('#content-wrapper').css("padding-top"))
                     + parseInt($('#content-wrapper').css("padding-bottom")); /* hauteur du contenu de la page */
            if (contentHeight < windowHeight) {
              $('#content-backdrop').height(windowHeight);  /* le contenu ne remplit pas l écran : grandir le fond */
            } else {
              $('#content-backdrop').height(contentHeight); /* le contenu remplit déjà l écran : minimiser le fond */
            }
          }

          function elementDimensioningAndPositioning() {
            var horizontalOverflow = setSliderImageWidth(); /* fixer la largeur des images du slider et recevoir une indication si elles débordent horizontalement ou verticalement */
            setSliderMargin(horizontalOverflow); /* passer cette indication à cette fonction qui fixe les marges pour centrer le slider */
            setContentBackdropHeight(); /* fixer la hauteur du fond noir semi-transparent */
          }

          $(window).load(function() {
            elementDimensioningAndPositioning();          /* initialiser les dimensions/position des éléments */
            $('#slider').nivoSlider({ effect: 'fade',     /* paramètrage et déclenchement du slider */
                                      animSpeed: 1800,
                                      pauseTime: 5000,
                                      directionNav: false,
                                      controlNav: false,
                                      pauseOnHover: false, });
            
          });

          $(window).resize(function() {
            elementDimensioningAndPositioning();  /* ajuster les dimensions/position des éléments */
          });