[Webdesign] « éteignez la lumière » avec jQuery pour lire vos vidéos

Depuis plusieurs années maintenant, les fonctionnalités de « ligthbox » se sont multipliées sur le web.
Les plus grands sites ont également adoptés ce genre de méthodes pour améliorer le « focus » des visiteurs. Le plus connu est sans doute Youtube et la fonctionnalités « Turn down the lights » :

J’en avais déjà parlé lorsque j’avais présenté le plugin « facebox ».

Peu de temps après avoir implémenté cette fonctionnalité sur mon blog, j’avais rapidement publié une méthode pour assombrir le fond de la page.

Bref, tout ça pour dire que j’ai trouvé un petit plugin jQuery bien sympathique qui fait la même chose.

« Turn off the lights » est un plugin pour jQuery qui permet d’assombrir le fond d’une page web afin d’augmenter la concentration de vos visiteurs sur certains éléments d’un article.

La technique consiste en l’ajout d’un élément cliquable qui, une fois actionné, ajoute un DIV de la dimension de la page dont le fond est sombre et semi-transparent.

Ce DIV est positionné absolument (position : absolute) à l’intérieur de son container (par exemple la balise BODY) qui lui est positionné relativement (position : relative).

La première étape consiste donc en l’ajout du fameux DIV :

<div id="shadow"></div>

Le code CSS qui va assombrir le fond est relativement simple :

#shadow {background-image:url(shade1x1.png); position:absolute; left:0; top:0; width:100%; z-index:100;}

Le z-index est ici déterminant. Il faut absolument qu’il soit le plus grand possible sur la page.

Si la largeur d’une page est facilement positionnalble à 100%, il n’en est pas de même pour la hauteur.
C’est pourquoi cette opération est réalisée avec un script :

$(document).ready(function(){
    $("#shadow").css("height", $(document).height()).hide();
}); 

Sans cela, seule une partie de la page pourrait être « couverte » (là où il y a des éléments présents).

Il ne reste plus qu’à créer le « bouton » (l’élément à cliquer pour actionner la fonctionnalité) :

$(".lightSwitcher").click(function(){
    $("#shadow").toggle();
        if ($("#shadow").is(":hidden"))
            $(this).html("Turn off the lights").removeClass("turnedOff");
        else
            $(this).html("Turn on the lights").addClass("turnedOff");
}); 

En ajoutant ce script et la classe .lightSwitcher au bouton, c’est fini.

Si tout ceci vous a paru un peu complexe, téléchargez le script qui suit et installez le simplement sur vos page. Perso, je préfère l’adapter un peu pour choisir les éléments (ici uniquement les vidéos) sur lesquels je souhaite appliquer le « focus ».

Testez la fonctionnalité

Téléchargez le script « Turn Off the lights » (.ZIP, 54,8 Ko)

Je vous laisse découvrir tous les détails sur le site du créateur.