Galerie d’images paginée + lightbox sous WordPress
Le résultat final est accessible ici : https://chris-carton.com/illustrations/
Me concernant, j’ai utilisé mes propres travaux graphiques.
Pour cette partie, j’ai crée un fichier à la racine du thème nommé « page-illustrations.php », et dans l’administration de WordPress, j’ai ajouté une page qui s’appelle… illustrations. J’ai aussi crée un CPT nommé illustration.
Vous voyez ?
Récupération des posts
Je récupère les posts de type illustration grâce à cette requête personnalisée :
$args = [
'post_type'=>'illustration',
'posts_per_page'=>10,
'paged'=>$paged ?? null
];
$the_query = new WP_Query($args);
if($the_query->have_posts()){
while($the_query->have_posts()){
$the_query->the_post();
?>
<div class="grid-item">
<a class="lightbox" href="<?= get_the_post_thumbnail_url(); ?>">
<img src="<?= get_the_post_thumbnail_url(); ?>">
</a>
</div>
<?php
}
}
Coté CSS
Coté CSS c’est très simple. J’utilise l’affichage en colonnes.
.grid{
width:75%;
columns:3;
margin-left: auto;
margin-right:auto;
column-gap: 10px;
}
.grid-item{
margin-bottom:10px;
}
img{
display:block;
width:100%;
height:auto;
}
Maintenant la Lightbox
<?php
//Fonctionne avec le script chris.lightbox.js
//Donner à des liens la classe .lightbox
//Ces liens doivent avoir l'image cible en attribut href.
?>
<div class="lightbox-screen">
<div class="lightbox-content">
<img class="lightbox-image" src="" alt="">
</div>
</div>
Voici la structure à intégrer à la page pour que les images puissent s’afficher au clic.
Pour styliser cette lightbox en CSS, c’est encore une fois très simple :
.lightbox-screen {
position: fixed;
background-color: white;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
display: none;
}
.lightbox-screen.on {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.lightbox-screen img {
max-height: 100vh;
}
Et enfin le JavaScript qui permet les intéractions :
//La lightbox la plus simple du monde.
let links = document.querySelectorAll('.lightbox');
let lightbox_screen = document.querySelector('.lightbox-screen');
let lightbox_image = document.querySelector('.lightbox-image');
//Parcours des liens ayant la classe "lightbox"
links.forEach(link => {
link.addEventListener('click',function(e){
//On annule le clic
e.preventDefault();
lightbox_image.src = this.href;
//.lightbox-screen a par default un display à none
lightbox_screen.classList.add('on');
//Ajouter la classe .on à .lightbox-screen lui donne un display à flex (pour centrer le contenu)
});
});
//Lorsqu'on clique sur l'image affichée en grand, on "éteint" la lightbox
lightbox_image.addEventListener('click',function(e){
lightbox_screen.classList.remove('on');
});
Et voilà ! À une prochaine !