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.
Lightbox.html
<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
.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 30% alignée à gauche, vous devez indiquer dans le Css la taille de la vignette (en pixels ou en pourcentage) et sa position (float:left).
thumbnail{
width:30%;
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 ».
<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 :
/* Image de taille maximale */
.maximage {
max-height:90%;
margin:auto;
}