L’effet lightbox permet d’afficher des images, du contenu, des pages au premier plan d’une page Web sans avoir à quitter la page. Il assombrit le reste de la page et met en évidence le contenu en surbrillance.

Utilisons un shortcode 

Il faut composer un fichier lightbox.html dans le répertoire layouts/shortcodes de votre thème.

1
2
3
4
5
6
<a href="#{{ .Get "href" }}">
  <img src="{{ .Get "src" }}" class="thumbnail" alt="{{ .Get "alt" }}" title="{{ .Get "title" }}">
</a>
<a href="#_" class="lightbox" id="{{ .Get "href" }}">
  <img src="{{ .Get "src" }}" class="maximage" alt="{{ .Get "alt" }}">  {{ .Get "title" }}
</a>

Choisissons la mise en forme à ajouter au fichier style.css de votre thème.

Le Css 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 1em;
  visiblity: hidden;
  z-index: 9999;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 9999;
/* Les couleurs */
  background: rgb(255,0,0);
  background: transparent\9;
  background: rgba(0, 0, 0, 0.8);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000);
  zoom: 1;
/* effet de fermeture */
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  -webkit-transform: rotate(0deg) scale(0);
  -moz-transform: rotate(0deg) scale(0);
  -ms-transform: rotate(0deg) scale(0);
  -o-transform: rotate(0deg) scale(0);
  transform: rotate(0deg) scale(0);
  -webkit-transform-origin: right top;
  -moz-transform-origin: right top;
  -o-transform-origin: right top;
  transform-origin: right top;
}
.lightbox:target {
  opacity: 1;
   visiblity: visible;
/* effet d'ouverture */
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  -webkit-transform: rotate(0deg) scale(1);
  -moz-transform: rotate(0deg) scale(1);
  -ms-transform: rotate(0deg) scale(1);
  -o-transform: rotate(0deg) scale(1);
  transform: rotate(0deg) scale(1);
  -webkit-transform-origin: left bottom;
  -moz-transform-origin: left bottom;
  -o-transform-origin: left bottom;
  transform-origin: left bottom;
}
/* Image de taille maximale */
.maximage {	
  max-height:93%;	
}

Utilisation 

Le code {{% lightbox href=“#img1” src=“url_image” alt=“” %}} fait surgir votre lightbox.

Le résultat 

La plage

Pour obtenir une miniature de 40% alignée à gauche, vous devez indiquer dans le Css la taille de la vignette (en pixels ou en pourcentage) et sa position (float:left).

1
2
3
4
   .thumbnail{
  width:40%;
  float:left;
   }

Un exemple dans le format portrait 

Une chinoise

Pour ne pas avoir d’images dépassant la hauteur de la page, il est important de bien spécifier la classe d’image dans le « shortcode ».

1
2
3
4
5
6
<a href="#{{ .Get "href" }}">
  <img src="{{ .Get "src" }}" class="thumbnail" alt="{{ .Get "alt" }}" title="{{ .Get "title" }}">
</a>
<a href="#_" class="lightbox" id="{{ .Get "href" }}">
  <img src="{{ .Get "src" }}" class="maximage" alt="{{ .Get "alt" }}">  {{ .Get "title" }}
</a>

Vous pouvez règler la hauteur de l’image en spécifiant au Css :

1
2
3
4
5
/* Image de taille maximale */
.maximage {	
  max-height:90%;	
  margin:auto;
}