Lightbox avec base de données

Bonjour,


Je réalise une galerie photo avec lightbox pour mon site internet.

Pour l'instant je peux juste cliquer sur les photos et passer à la suivante grâce aux flèches, mais j'aimerais y afficher le titre de l'image, sa description, son prix etc..



Le code de la lightbox et de la galerie je les ai pris de mes cours en javascript :

$(document).ready(function(){

	$("a[rel='galerie']").click(function(event){
	event.preventDefault();
	
	var courant = $("a[rel='galerie']").index($(this));
	var prochain = courant+1;
	var precedent = courant-1;
	
	var lightbox = "";
	lightbox += "<img src='"+$(this).attr("href")+"'/>";
	
	if (precedent>=0)
		lightbox += "<a href='#' class='fleche gauche' rel='" +precedent+ "'>‹</a>";
		
	if (prochain < $("a[rel='galerie']").length)
		lightbox += "<a href='#' class='fleche droite' rel='" +prochain+ "'>›</a>";

	$(".lightbox").html(lightbox);
	$('.voile').fadeIn();
	$('.lightbox').fadeIn();
	});

	$('.voile').click(function(event) {
		$('.voile').fadeOut();
		$('.lightbox').fadeOut();
	});
	
	$("body").on("click", ".fleche", function(e) {
		var index = $(this).attr("rel");
		$("a[rel='galerie']")[index].click();
	});
	
});

Et le code php :

<?php

	$req = $pdo->query("SELECT nom, description, ROUND(prix,2), image FROM article WHERE id_categorie=1 ORDER BY prix ASC");
		while ($res = $req->fetch(PDO::FETCH_ASSOC)) { 
			echo "<li><h1>{$res["nom"]} <br> <a href='{$res["image"]}' title='{$res["nom"]}' rel='galerie'> <img src='{$res["image"]}'></a> <br> </h1>
				<p>{$res["description"]}</p> <br> <span>{$res["ROUND(prix,2)"]} €</span></a></li> ";
}

?>

Le résultat est le suivant pour l'instant : https://prnt.sc/88u8q6

Les flèches apparaissent au survol de la souris.

Je dois modifier le CSS car la lightbox n'est pas centrée sur la page.



Merci :)