Z-i-G-Z-a-G

Section 17

Créer une galerie d’images — Javascript & jQuery

| 26 Nov 2014


Cette semaine, je vous propose de créer votre propre galerie d’images à insérer dans votre site. Il existe de nombreux sites qui proposent des galeries toutes faites, mais le problème c’est que lorsque que vous décidez de modifier un petit peu les paramètres comme le menu ou la manière d’interagir avec les images, cela devient tout de suite compliqué. Là, en développant vous même votre galerie, vous pourrez à votre guise modifier tout ce que vous désirerez dans les moindres détails.
Pour se faire, nous allons dans un premier temps créer une liste en langage html contenant nos images, nous styliserons le tout avec du css puis nous terminerons par du javascript et de la bibliothèque jQuery pour rendre interactive notre galerie.

gggalery-1.0

HTML

Commençons par le début, c’est à dire par créer notre galerie dans un fichier .html par exemple index.html (par défaut). Nous allons avoir besoin de programmer notre galerie avec le langage Javascript et nous utiliserons la bibliothèque jQuery, alors nous allons l’ajouter maintenant dans notre head comme ceci:

<!DOCTYPE html>
<html>
	<head>
		<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	</head>
	<body>
	</body>
</html>

Une fois fait, entre les balises <body></body> créer une div appelée galerie dans laquelle vous allez ajouter une liste non ordonnée <ul></ul> appelée galerie-list par exemple, puis le nombre d’images de votre choix, contenues dans des balises <li></li> de cette façon:

<div id="galerie">
	<ul class="galerie-list">
		<li><img src="votre_image" alt="nom_de_votre_image" /></li>
		<li><img src="votre_image" alt="nom_de_votre_image" /></li>
		<li><img src="votre_image" alt="nom_de_votre_image" /></li>
		<li><img src="votre_image" alt="nom_de_votre_image" /></li>
		<li><img src="votre_image" alt="nom_de_votre_image" /></li>
	</ul>
</div>

À l’intérieur de l’attribut src=“” renseignez la source de votre photo. Prenez l’habitude de bien ajouter l’attribut alt=“” sur toutes vos images. Il sert à apporter une information sur l’image (utile pour les robots de moteur de recherche ou pour un utilisateur de lecteur d’écran…). Remplissez l’attribut avec le nom que vous voulez donner à votre photo. Exemple alt=“Ma première photo”. À cette étape, si vous lancez votre index.html dans le navigateur de votre choix, vous devriez apercevoir toutes vos photos les unes à la suite des autres.

CSS

Attaquons nous à présent au css afin de styliser notre galerie. Ajoutez la balise <style></style>. Commençons par mettre toutes les balise (* {}) sans marge externe et interne, puis choisir une typo (ici la Courier New, en corps 12px). Reprenons le nom de notre galerie, à savoir galerie; je veux qu’elle face une taille de 600px de large et d’une hauteur de 450px, qu’elle soit centrée dans ma page et que sa taille ne dépasse jamais celle de la fenêtre de mon navigateur. J’écris donc ceci:

* { 
    margin: 0;
    padding: 0;
    font-family: Courier New, monospace;
    font-size: 12px;
}

#galerie {
    position: absolute;
    margin: auto;
    top: 0; bottom: 0;
    left: 0; right: 0;
    width: 600px;
    height: 450px;
    max-width: 100%;
    max-height: 100%;
    text-align: center;
}

Je ne vais pas expliquer le css en détail, mais je voudrai un menu pour pouvoir effectuer des actions et contrôler ma galerie (je descend donc ma liste <li>, contenue dans ma galerie de 20px. Je ne veux pas que mes images dépassent de mon conteneur galerie (max-with:100%;…), je veux que mon menu prenne toute la largeur de ma galerie et que sa hauteur soit de 20px (d’où le décalage de 20px fait précédemment). Pour le moment je ne veux afficher aucune de mes photos (galerie-list li: display: none).

#galerie ul { list-style-type: none; }
#galerie li { margin-top: 20px; }

.galerie-list img {
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
}

.galerie-list li { display: none; }

.galerie-control {
    position: absolute;
    width: 100%;
    height: 20px;
}

JAVASCRIPT

Passons aux choses sérieuses, ajouter votre balise <script></script> dans votre head et ensuite la balise </style>, nous allons écrire à l’intérieur de ces balise afin de programmer les actions de notre galerie. Je commence par ajouter une fonction qui sera automatiquement lue à l’ouverture de mon document (le fichier index.html), et j’ajoute une variable (var) que je nomme select avec pour valeur 1 (pour ma première image) et une variable images qui contient toute ma liste d’images.

$(document).ready(function() {

	var select = 1;
	var images = $('.galerie-list li');

)};

Si je regarde mon code html, je vois que nous avons une div appelée galerie-control qui est vide. Cette div va me servir à créer mon menu et mes boutons pour contrôler ma galerie. Dans mon script, juste en dessous de mes deux variables, j’ajoute mon menu à l’aide de l’attribut append(), celui-ci comprendra le nom de mon image (name), un bouton pour afficher l’image suivante (next), un second pour revenir à l’image précédente (prev), et le nombre de photos que contient ma galerie (number).

$('.galerie-control').append(
		'<a class="name">…</a>' +
		'<a class="prev"></a>' +
		'<a class="next"></a>' +
		'<a class="number"></a>');

Ma div number comprendra le numéro de la photo affichée grâce à notre variable select avec le nombre total de photos que contient ma galerie (la longueur de ma variable image (images.length)), séparé par un tiret (de cette façon 1 – 5). Ma galerie affichera (show()) la première photo contenue dans la liste (galerie-list li:nth-child(1)), et ma div name affichera le nom de cette photo en cherchant dans l’attribut alt (si vous avez laissez le camps libre il n’affichera rien).

$('.number').text(select + " - " + images.length);
$('.galerie-list li:nth-child(1)').show();
$('.name').text($('.galerie-list li:nth-child(1) img').attr('alt'));

Revenons à notre css afin de styliser ce que l’on viens d’ajouter à notre div galerie-control. Le nom de ma photo sera centré dans mon menu, son numéro sera calé à droite et mes deux boutons (prev/next) sur la gauche. J’ai fais le choix de mettre des images qui indiquent de revenir ou d’aller à la photo suivante mais vous pouvez mettre ce que vous souhaitez en remplaçant la ligne background-image: url(mon lien); par une couleur (background: #888;) par exemple.

.galerie-control a { position: absolute; }

.galerie-control .name,
.galerie-control .number {
    margin: 3px 0; 
    right: 0; 
}

.galerie-control .name { left: 0; }

.galerie-control .prev,
.galerie-control .next {
    width: 19px;
    height: 19px;
    cursor: pointer;
}

.galerie-control .prev {  
    background-image: url(g-controls/prev.png);
    left: 0;
}

.galerie-control .next { 
    background-image: url(g-controls/next.png);
    left: 20px; 
}

À ce stade vous devriez obtenir ceci (voir image ci-dessous), avec votre première image ainsi que son nom. Aucune action n’est possible, c’est normal nous n’avons encore écrit aucune instruction sur nos boutons.

galerie_1

Bien commençons à programmer notre premier bouton next. Dans un premier temps je crée une fonction view-image qui servira à afficher les éléments suivant ma variable select créee précédemment. Initialement la variable select a comme valeur 1, je peux donc indiquer qu’une image de ma liste sera affichée (show()) en fonction de la valeur de select (ici 1), la première image de ma liste sera donc affichée. Ensuite, je veux forcer le masquage (hide()) de l’image précédente de la liste (si il y en a une) et la suivante, j’ajoute ou je retire donc 1 à select. Pour afficher le nom de mon image, je note tout simplement sa position dans la liste de ma galerie avec select (toujours 1), la fonction text() se charge de remplacer automatiquement le contenu d’un élément. C’est donc exactement ce dont nous avons besoin. La ligne concernant le numéro nous l’avons déjà inscrite plus haut dans notre code, mais je la duplique afin qu’elle se recharge lorsque je ferai appel à la fonction view-image. Voici la syntaxe:

function view_image() {

		$('.galerie-list li:nth-child('+select+')').show();
		$('.galerie-list li:nth-child('+(select + 1)+')').hide();
		$('.galerie-list li:nth-child('+(select - 1)+')').hide();
		$('.name').text($('.galerie-list li:nth-child('+select+') img').attr('alt'));
		$('.number').text(select + " - " + images.length);
	}

Très bien nous pouvons maintenant écrire notre fonction qui s’effectuera lorsque l’élément next sera cliqué ($(‘.next’).click(function() {}), j’indique d’abord que si la valeur de ma variable select dépasse le nombre total de mes images contenues dans ma galerie la valeur de select sera égale à 0. Lorsque je clique sur mon élément next je veux ajouter 1 à ma valeur select afin de parcourir les images contenues dans ma liste (+=1 est identique à ++) et je veux afficher la bonne image, je vais donc appeler ma fonction view-image créee précédemment. Il ne me reste plus qu’à forcer le masquage de l’avant dernière image de ma liste, étant donné que select vaut 0 lorsque j’ai parcouru toutes mes images .

$('.next').click(function() {
		if (select >= images.length) select = 0;
		select ++;
		view_image();
		$('.galerie-list li:nth-child('+(select + (images.length - 1))+')').hide();
	});

Voilà, quand je clique sur mon élément next, j’affiche une à une les images de ma galerie, en boucle. Pour le bouton prev la méthode est exactement la même, à l’inverse la valeur select sera ôtée de 1 (select–;), si sa valeur est inférieure ou égale à 0, alors select aura pour valeur le nombre total de mes images contenues dans ma galerie. Je masque ma première image (:nth-child(1)) si select vaut le nombre total de mes images de ma galerie, alors j’appelle ma fonction view-image afin d’afficher l’image correspondante comme ceci:

$('.prev').click(function() {
		select --;
		if (select <= 0) select = images.length;
		$('.galerie-list li:nth-child(1)').hide();
		view_image();
	});

Parfait, vous avez une galerie fonctionnelle où vous pouvez parcourir et afficher l’image de votre choix en cliquant sur les éléments next et prev ! Maintenant que vous avez compris le principe vous pouvez modifier à votre guise le style de votre galerie et les actions possibles, vous pouvez retirer la boucle où même parcourir vos images en cliquant directement sur l’image affichée (ajouter galerie-list image après l’élément next) de cette façon:

$('.next, .galerie-list img').click(function() {
	});

Vous pouvez retrouver une démonstration en ligne ici gggalerie et tester le résultat. J’ai ajouté une fonction qui permet d’afficher l’image au choix, grâce aux flèches directionnelles du clavier, c’est souvent assez pratique :). Bien que ce code soit fonctionnel je suis convaincu qu’il existe une méthode plus pratique et surement plus réduite que ma syntaxe, si vous avez des conseils ou améliorations à apporter à ma proposition, je serai ravi d’en prendre connaissance. Bon code, et à bientôt ;).

Share Button

Rubrique: Section 17 | 12 Commentaires




12 Commentaires

  1. Vidda | 31 Jan 2015 à 21:35 :

    Bonjour,
    Ca fait des semaines pour pas dire des mois que je cherche ce genre de galerie tout simple comme il me faut !
    J’ai bien essayer de suivre votre tutoriel, je suis assez doué pour les Copier/Coller par contre pour ce qui est de la programmation …
    si vous avez un peu de temps a me consacrer
    Merci
    Vidda

  2. Gael_G | 1 Fév 2015 à 03:16 :

    Bonjour Vidda,
    Oui aucun souci, quel passage de la programmation vous pose problème ?

  3. Vidda | 1 Fév 2015 à 11:21 :

    Hi,
    C’est surtout du coté du JavaScript
    J’ai fais un fichier script.js et coller le tout dedans…

  4. Gael_G | 1 Fév 2015 à 13:47 :

    Si vous avez créé un fichier script.js, il faut renseigner ce fichier dans le head juste après la ligne <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>. Pour renseignez son chemin, par exemple <script type="text/javascript" src="script.js"></script> (si votre script.js se trouve dans le même dossier que votre index.html).

  5. Vidda | 1 Fév 2015 à 14:15 :

    Oui oui j’ai fait comme ca

  6. Gael_G | 1 Fév 2015 à 14:29 :

    Dans ce cas, voici le lien de la version zippé de la galerie : gggallery-1.0.zip.
    Vous pourrez comparer avec la votre et voir se qui pose problème.

  7. Vidda | 1 Fév 2015 à 17:07 :

    Terrible, merci beaucoup
    Mon problème viens pas du fait que mes Photo soit en .JPG ?

  8. Vidda | 1 Fév 2015 à 21:20 :

    C’est bon ca marche !
    Je sais pas pourquoi mais ca marche
    Merci beaucoup !!! Vraiment !!!

  9. Gael_G | 1 Fév 2015 à 23:58 :

    Parfait 😉
    Pour information vous pouvez mettre les images que vous souhaitez (.jpg, .png, .gif, …), tant que vous inscrivez le bon nom de l’image suivi de son format dans le code html (en respectant bien les majuscules, les espaces ou autres, contenu dans le nom de l’image si il y en a).

  10. khaled | 24 Déc 2015 à 14:42 :

    merci infiniment pour ce tuto une très bonne astuces. Merci pour votre temps

  11. Jérémy | 13 Avr 2019 à 09:38 :

    Bonjour,
    Tout d’abord merci pour le code et son explication, étant programmeur débutant cela m’a bien guidé.
    Mais si on copie le code tel quel, il ne fonctionnera pas pour la simple raison suivante :
    #galerie ul { list-style-type: none; }
    #galerie li { margin-top: 20px; }
    Vous faites appel à un ID de galerie dans votre code CSS (avec #) alors que c’est une classe dans votre code HTML. Il faut donc changer « # » par « . ».
    Sur ce bonne journée et merci encore !

  12. Gael_G | 13 Avr 2019 à 20:56 :

    Bonjour,
    Oh, effectivement ! Voici peut-être le problème de @Vidda (en commentaire ci-dessus) trouvé après quelques années ;). Bien vu, je corrige l’erreur !
    Il faut donc changer le « # » par « . » oui. Pour la correction, je vais plutôt mettre id à la place de class sur l’élément galerie dans le HTML (moins de lignes à modifier).
    Merci à vous !

Laissez un commentaire