jQuery – Lightbox

LEÇON

 

Principes de base

Faire apparaître (suite à un clic sur un lien ou une image) une zone de contenu en avant-plan, superposé sur le contenu de la page actuelle. Typiquement la page actuelle et grisée pour accentuer sa mise en arrière plan.

La zone mise en avant-plan (appelée une lightbox) peut contenir du texte, des images, du JavaScript, des animations type jQuery... enfin, tout ce qui pourrait être affiché dans une page HTML normale.

 

Exemple Basique

Cet exemple illustre, de la manière la plus basique possible, la technique de la Lightbox.

Un lien dans la page principale ouvre la Lightbox qui ne contient qu'une image. On clique sur la zone grisée ou sur la croix pour fermer la Lightbox.

http://www.web-design-codex.fr/samples/lightbox/basic/page.html

IMPORTANT : pour recréer l'exemple il faudrait avoir le fichier jquery-1.12.4.js (ou version supérieure) présent dans le même dossier que tous les autres fichiers. Si version supérieure, il ne faut pas oublier d'adapter l'attribut "src" de la balise "script" qui fait l'inclusion de ce fichier.

 

-- Fichiers images de l'exemple basique

Image de fond
Image affichée dans la Lightbox
Image de la croix qui ferme la Lightbox

-- Le code de l'exemple basique

page.html


<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Lightbox</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<link rel="stylesheet" type="text/css" href="lightbox.css">
		<script type="text/javascript" language="JavaScript" src="jquery-1.12.4.js"></script>
		<script type="text/javascript" language="JavaScript" src="lightbox.js"></script>
    </head>
	
    <body>
        
		<!-- ================================== CONTENU : PAGE PRINCIPALE ================================== -->
		
        <div id="wrapper">
			<h3>Super Mario Bros</h3>
			<a href="javascript:ouvrirLightbox();">Cliquez ici</a>
		</div>
		
		<!-- ===================================== CONTENU : LIGHTBOX ====================================== -->
		
		<div id="lightbox-ombre" onclick="fermerLightbox();"></div>

		<div id="lightbox">

			<div id="lightbox-bouton-fermer">
				<img src="bouton-fermer.png" onmouseover="this.style.cursor='pointer';" onclick="fermerLightbox();">
			</div>

			<img src="image.png">

		</div>
		
		<!-- =============================================================================================== -->
		
    </body>
</html>

 

lightbox.js


function ouvrirLightbox()
{
	$('#lightbox-ombre').fadeIn(300);
	$('#lightbox').fadeIn(600);
}

function fermerLightbox()
{
	$('#lightbox-ombre').fadeOut(200);
	$('#lightbox').fadeOut(200);
}

 

style.css


body
{
  background:black url('bg.jpg') no-repeat top center;
  width:600px;
  margin:50px auto 50px 50px;
  font-family:Arial, sans-serif;
}

#wrapper
{
  width:100%;
  background-color:rgba(255,255,255,0.66);
  padding:20px;
}

 

lightbox.css


#lightbox-ombre
{
	z-index:70;
	position:fixed;
	display:none;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0, 0, 0, 0.6);
}

#lightbox
{
	z-index:80;
	position:fixed;
	display:none;
	top:10%;
	left:50%;
	width:500px;
	background-color:white;
	margin-left:-250px;
	padding:20px;
	text-align:center;
}

#lightbox-bouton-fermer
{
	z-index:90;
	position:absolute;
	top:-12px;
	right:-12px;
}

 

Exemple Plus Élaboré (Star Wars Battlefront)

On pousse la technique un peu avec du code jQuery dans la lightbox. Ce code vient directement de nos travaux sur les animations avec jQuery.

http://www.web-design-codex.fr/samples/lightbox/battlefront/page.html

Remarquez que cette fois ci le déclencheur pour la lightbox n'est pas un lien mais un clic sur la totalité d'une div. Voir l'attribut "onclick" de la div en question.

Remarquez aussi l'appel à 2 fonctions différentes suite au clic dans la div en question. Un appel pour ouvrir la lightbox, et un autre pour initialiser son contenu.

IMPORTANT : pour recréer l'exemple il faudrait avoir le fichier jquery-1.12.4.js (ou version supérieure) présent dans le même dossier que tous les autres fichiers. Si version supérieure, il ne faut pas oublier d'adapter l'attribut "src" de la balise "script" qui fait l'inclusion de ce fichier.

-- Fichiers images de l'exemple élaboré

Image de fond
Image 1 affichée dans la Lightbox
Image 2 affichée dans la Lightbox
Image 3 affichée dans la Lightbox
Image 4 affichée dans la Lightbox
Image de la croix qui ferme la Lightbox

-- Le code de l'exemple élaboré

page.html


<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Lightbox</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<link rel="stylesheet" type="text/css" href="lightbox.css">
		<link rel="stylesheet" type="text/css" href="animation.css">
		<script type="text/javascript" language="JavaScript" src="jquery-1.12.4.js"></script>
		<script type="text/javascript" language="JavaScript" src="lightbox.js"></script>
		<script type="text/javascript" language="JavaScript" src="animation.js"></script>
    </head>
	
    <body>
        
		<!-- ================================== CONTENU : PAGE PRINCIPALE ================================== -->
		
        <div class="box noir">
			<h1>STAR WARS</h1>
			<h3>BATTLEFRONT</h3>
		</div>
		
		<div class="box blanc">
			<h5>EDITION</h5>
			<p>Electronic Arts, novembre 2015.<br>Pour PS4 / Xbox One / Windows.</p>
		</div>
		
		<div class="box blanc" onmouseover="this.style.cursor='pointer';" onclick="javascript:ouvrirLightbox(); anim_initialiser();">
			<p class="cliquable">Voir les images</p>
			<img class="vignette" src="swbf1.jpg">
			<img class="vignette" src="swbf2.jpg">
			<img class="vignette" src="swbf3.jpg">
			<img class="vignette" src="swbf4.jpg">
		</div>
		
		<div class="box blanc">
			<h5>SYNOPSIS</h5>
			<p>FPS se déroulant dans l'univers de la célèbre saga. Le joueur y crée son personnage, choisit son camp
			entre la rébellion et l'Empire, et peut revivre des batailles mémorables sur des lieux bien connus. Il 
			peut combattre à pied, ou à bord d'un véhicule.</p>
		</div>
		
		<!-- ===================================== CONTENU : LIGHTBOX ====================================== -->
		
		<div id="lightbox-ombre" onclick="fermerLightbox();"></div>

		<div id="lightbox">

			<div id="lightbox-bouton-fermer">
				<img src="bouton-fermer.png" onmouseover="this.style.cursor='pointer';" onclick="fermerLightbox();">
			</div>

			<div class="animation">
	            <img class="image-1" src="swbf1.jpg">
				<img class="image-2" src="swbf2.jpg">
				<img class="image-3" src="swbf3.jpg">
				<img class="image-4" src="swbf4.jpg">
	        </div>

		</div>
		
		<!-- =============================================================================================== -->
		
    </body>
</html>

 

lightbox.js


function ouvrirLightbox()
{
	$('#lightbox-ombre').fadeIn(300);
	$('#lightbox').fadeIn(600);
}

function fermerLightbox()
{
	$('#lightbox-ombre').fadeOut(200);
	$('#lightbox').fadeOut(200);
}

 

animation.js


function anim_big(classe)
{
 $(classe).animate({
	opacity: '1.0',
	width: '460px',
	left: '20px',
	top: '120px'
   }, 400);
}

function anim_small(classe, leftpixels)
{
 $(classe).animate({
	opacity: '0.25',
	width: '100px',
	left: leftpixels,
	top: '20px'
   }, 400);
}

function anim_initialiser()
{
 anim_big(".image-1");
 anim_small(".image-2", '140px');
 anim_small(".image-3", '260px');
 anim_small(".image-4", '380px');
}

$(document).ready(function(){
  
 $(".image-1").click(function(){
   if($('.image-1').css('opacity') == 1.0) {
	  anim_small(".image-1", '20px');
	  anim_big(".image-2");
   } else {
	  anim_big(".image-1");
	  anim_small(".image-2", '140px');
	  anim_small(".image-3", '260px');
	  anim_small(".image-4", '380px');
   }
 });
  
 $(".image-2").click(function(){
   if($('.image-2').css('opacity') == 1.0) {
	  anim_small(".image-2", '140px');
	  anim_big(".image-3");
   } else {
	 anim_big(".image-2");
	 anim_small(".image-1", '20px');
	 anim_small(".image-3", '260px');
	 anim_small(".image-4", '380px');
   }
 });
  
 $(".image-3").click(function(){
   if($('.image-3').css('opacity') == 1.0) {
	  anim_small(".image-3", '260px');
	  anim_big(".image-4");
   } else {
	 anim_big(".image-3");
	 anim_small(".image-1", '20px');
	 anim_small(".image-2", '140px');
	 anim_small(".image-4", '380px');
   }
 });
 
 $(".image-4").click(function(){
   if($('.image-4').css('opacity') == 1.0) {
	  anim_small(".image-4", '380px');
	  anim_big(".image-1");
   } else {
	 anim_big(".image-4");
	 anim_small(".image-1", '20px');
	 anim_small(".image-2", '140px');
	 anim_small(".image-3", '260px');
   }
 });
});

 

style.css


body
{
  background:black url('swbf0.jpg') no-repeat top center;
  width:470px;
  margin:50px 80px 50px auto;
  font-family:Arial, sans-serif;
}

.box
{
  width:100%;
  margin-bottom:24px;
  padding:10px;
}

.noir
{
  background-color:rgba(0, 0, 0, 0.6);
  color:darkorange;
}

.blanc
{
  background-color:rgba(255, 255, 255, 0.75);
  color:#333333;
}

h1, h3, h5
{
  margin:0;
  color:darkorange;
}

h1
{
  font-size:72px;
  letter-spacing:2px;
}

h3
{
  font-size:44px;
  letter-spacing:11px;
}

h5
{
  font-size:20px;
  letter-spacing:5px;
}

p
{
  font-size:16px;
  letter-spacing:2px;
}

.vignette
{
  width:70px;
  margin-top:8px;
  opacity:0.5;
}

.cliquable
{
  color:blue;
  margin:0;
  text-align:right;
  text-decoration:underline;
}

 

lightbox.css


#lightbox-ombre
{
	z-index:70;
	position:fixed;
	display:none;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.75);
}

#lightbox
{
	z-index:80;
	position:fixed;
	display:none;
	top:5%;
	left:50%;
	width:500px;
    height:480px;
	background-color:white;
	margin-left:-250px;
	padding:10px;
}

#lightbox-bouton-fermer
{
	z-index:90;
	position:absolute;
	top:-12px;
	right:-12px;
}

 

animation.css


.animation
{
  position:relative;
}

.animation img
{
  position:absolute;
  top:20px;
  opacity:0.5;
  width:100px;
}

.image-1
{
  left:20px;
}

.image-2
{
  left:140px;
}

.image-3
{
  left:260px;
}

.image-4
{
  left:380px;
}