Créer une galerie d'images avec jQuery

Créer une galerie d'images avec jQuery

Galerie aucun
Afficher vos images et cliquer dessus pour voir le contenu en lien à l'image.
Dans cet article, nous allons créer une galerie d'images avec jQuery. Chaque image possède du contenu différent visible lorsque l'on clique sur l'image en question. Vous pouvez voir une démo ici : Démo 

HTML

Commençons par le html,  chaque image de la galerie se compose de la manière suivante :
  • la balise <figure>  qui affichera l'image en arrière-plan et comprendra la description de l'image non visible pour le moment
  • la balise <div class="contentBox"> qui affichera la description dans une fenêtre modale
<figure style="background:url('https://cdn.pixabay.com/photo/2019/04/10/14/19/aiguille-du-midi-4117179_960_720.jpg') no-repeat top center; background-size:cover;">
    <div class="contentBox">
        <img src="https://cdn.pixabay.com/photo/2019/04/10/14/19/aiguille-du-midi-4117179_960_720.jpg" alt="Aiguille du Midi">
        <h3>Aiguille du Midi</h3>
        <p>L'aiguille du Midi se situe dans le massif du Mont-Blanc. Culminant à 3 842 mètres, elle est la plus haute des aiguilles de Chamonix. Sur le sommet principal, s'élève une tour, portant des antennes de télécommunication, qui représente le point culminant actuel.</p>
        <p><a href="https://fr.wikipedia.org/wiki/Aiguille_du_Midi" title="voir le site" target="_blank"><i class="fas fa-external-link-alt"></i> En savoir plus</a></p>
    </div>
</figure>

Construisez votre galerie de cette façon en ajouter à la suite le code ci-dessus en modifiant l'image et son contenu. Une fois fait, les images doivent être entouré par une balise <section id="box"></section>

<section id="box">
<figure style="background:url('https://cdn.pixabay.com/photo/2019/04/10/14/19/aiguille-du-midi-4117179_960_720.jpg') no-repeat top center; background-size:cover;">
<div class="contentBox">
<img src="https://cdn.pixabay.com/photo/2019/04/10/14/19/aiguille-du-midi-4117179_960_720.jpg" alt="Aiguille du Midi">
<h3>Aiguille du Midi</h3>
<p>L'aiguille du Midi se situe dans le massif du Mont-Blanc. Culminant à 3 842 mètres, elle est la plus haute des aiguilles de Chamonix. Sur le sommet principal, s'élève une tour, portant des antennes de télécommunication, qui représente le point culminant actuel.</p>
<p><a href="https://fr.wikipedia.org/wiki/Aiguille_du_Midi" title="voir le site" target="_blank"><i class="fas fa-external-link-alt"></i> En savoir plus</a></p>
</div>
</figure>

<figure style="background:url('https://cdn.pixabay.com/photo/2016/08/18/11/59/mont-blanc-1602750_960_720.jpg') no-repeat top center; background-size:cover;">
<div class="contentBox">
<img src="https://cdn.pixabay.com/photo/2016/08/18/11/59/mont-blanc-1602750_960_720.jpg" alt="">
<h3>Mont Blanc</h3>
<p>Le mont Blanc (en italien : Monte Bianco), dans le massif du Mont-Blanc, est le point culminant de la chaîne des Alpes. Avec une altitude de 4 809 mètres, il est le plus haut sommet d'Europe occidentale et le cinquième sur le plan continental en prenant en compte les montagnes du Caucase, dont l'Elbrouz (5 642 mètres) est le plus haut sommet. Il se situe sur la frontière franco-italienne, entre le département de la Haute-Savoie (en France) et la Vallée d'Aoste (en Italie) ; cette frontière est l'objet d'un litige entre les deux pays.</p>
<p><a href="https://fr.wikipedia.org/wiki/Mont_Blanc" title="voir le site" target="_blank"><i class="fas fa-external-link-alt"></i> En savoir plus</a></p>
</div>
</figure>

<figure style="background:url('https://cdn.pixabay.com/photo/2017/09/29/17/48/terrace-mont-blanc-2799916_960_720.jpg') no-repeat top center; background-size:cover;">
<div class="contentBox">
<img src="https://cdn.pixabay.com/photo/2017/09/29/17/48/terrace-mont-blanc-2799916_960_720.jpg" alt="">
<h3>Aiguille du Midi</h3>
<p>L'aiguille est le point d'arrivée d'un téléphérique — le téléphérique de l'aiguille du Midi. Sa gare supérieure est située à 3 777 mètres d'altitude. L'aiguille abrite le plus haut centre d'émission hertzien de France. Elle est le point de départ de la descente de la vallée Blanche et de la télécabine Panoramic Mont-Blanc qui traverse le glacier du Géant jusqu'à la pointe Helbronner sur le versant italien à (3 462 mètres), avec sa vue imprenable sur la vallée d'Aoste et tout le Piémont.</p>
<p><a href="https://fr.wikipedia.org/wiki/Aiguille_du_Midi" title="voir le site" target="_blank"><i class="fas fa-external-link-alt"></i> En savoir plus</a></p>
</div>
</figure>
<section id="back"></section>
</section>

La balise <section id="back"></section> y est insérée pour ajouter un fond noir avec une opacité lorsque la fenêtre modale s'ouvre.

CSS

Du côté CSS, pour l'interface de la galerie, les images sont sur 2 colonnes. Ci-dessous on retrouve le css utilisé pour la démo.
* { box-sizing:border-box;}

html, body {
margin:0;
padding:0;
height:100%;
}

a { color:#008080;}

a:hover {color:#005050;}

#box{
width: 70%;
margin: 50px auto;
}

#box figure {
margin:0;
overflow: hidden;
float:left;
width:47%;
height:370px;
margin-top:20px;
cursor:pointer;
}

#box figure:nth-child(odd) { margin-right:0.8rem;}

#back {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0;
z-index:20;
background: rgba(0,0,0,.5);
}

Le CSS ci-dessous est pour la partie de la fenêtre modale. On y retrouve à gauche l'image entière et à droite son contenu.

.contentBox {
display:none;
z-index: 998;
background-color: #fff;
width: 90%;
height: auto;
position: absolute;
top: 5.8rem;
left: 0;
bottom:auto;
right:0;
margin:0 auto;
box-shadow: 0 0 10px rgb(0,0,0);
padding:30px;
}

.contentBox img{
width:70%;
margin-right:15px;
float:left;
}

.prev,.next {
cursor: pointer;
padding: 10px 20px;
color:#008080;
border-radius: 5px;
border: 1px solid #008080;
margin: 10px 0 0 0;
display: block;
float: left;
text-align: center;
}

.next {
float:right;
}

.prev:hover, .next:hover {
background:#005050;
color: #fff;
}

#btn {
width:100%;
float: left;
margin-bottom: 15px;
}

.btn_close {
color: #008080;
position: absolute;
top: -3px;
right: 0;
}

.btn_close:hover{
color:#005050;
}

Et enfin le css pour que la galerie soit adaptée à tous les supports.

@media (max-width: 1024px) {
.contentBox img{
width:100%;
margin-right:0;
}
}

@media (max-width: 800px) {
#box figure {
width: 100%;
max-width: 100%;
}
.contentBox {width:90%;}
.contentBox img{
width:100%;
margin-right:0;
}
}

JS

Pour le jQuery, on crée plusieurs fonctions

  • une fonction qui calcule la hauteur de la fenêtre du navigateur (window). Cette fonction permet d'afficher l'arrière plan opaque sur la totalité de l'écran lorsque la fenêtre modale apparaît.
  • une fonction qui calcule la hauteur de corps de la page (body). Elle est utilisée pour placer la fenêtre modale (qui est fixe) à la même hauteur qu'on est scrollé ou pas.
  • une fonction qui calcule le nombre d'images de la galerie.
  • une fonction principale qui appelle les fonctions des boutons et une qui affiche la fenêtre modale.
var portfolioItem = $("figure");
var i=0;

$("#back").hide();

// attribution d'un
portfolioItem.each(function() {
$(".contentBox",this).attr("id","slide"+i);
i++;
});

// fonction qui retourne la hauteur de la page du navigateur
function top_slide(){
var height=$(window).scrollTop()+100;
return height;
};


// fonction qui retourne la hauteur du corps de la page
function height_contentBox() {
if($("body").height() > 700) {
body_height = $("body").height()+58;
return body_height;
}
else {
window_height = $("body").height()*2;
return window_height;
}
}

// fonction principale
function all() {
$(".contentBox").addClass("select");

$("figure").on("click",function(event){
$("#back").show().css({height:height_contentBox()+"px"});
$(this).find(".contentBox",this).show().css({top:top_slide()+"px"});
});

next();
prev();
close();

}

all();

Création des fonctions pour les actions sur les boutons précédent, suivant et fermer.
  • fonction prev()
  • fonction next()
  • fonction close()
// fonction du bouton précédent
function prev() {
$(".prev").click(function(){
$(this).parent().parent().fadeOut(300);
num = num_slide();
num_id = $(this).closest('.select').attr('id').substring(5,10);
num_id_prev = num.indexOf(num_id)-1;
if(num.indexOf(num_id)==0){
$("#slide"+num[num.length-1]).show().css({top:top_slide()+"px"});
}
else {
$("#slide"+num[num_id_prev]).show().css({top:top_slide()+"px"});
}
j++;

});
}

// fonction du bouton suivant
function next() {
$(".next").click(function(){
$(this).parent().parent().fadeOut(300);
num = num_slide();
num_id = $(this).closest('.select').attr('id').substring(5,10);
num_id_next = num.indexOf(num_id)+1;
if(num.indexOf(num_id)==num.length-1){
$("#slide"+num[0]).show().css({top:top_slide()+"px"});
}
else {
$("#slide"+num[num_id_next]).show().css({top:top_slide()+"px"});
}
j++;

});
}

// fonction du bouton fermer
function close() {
$(".btn_close i").click(function() {
$(".contentBox").fadeOut(400);
$("#back").fadeOut(400);
});
}

La galerie est maintenant terminée. Vous pouvez trouver les fichiers source à cette adresse :


Un prochain article expliquera comment ajouter à cette galerie une filtre d'images.