Chris Carton

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 !