Créer une galerie d'images polaroid en JavaScript/CSS - sans dépendances

Présentation d'une galerie de photos avec un style "polaroid" et effets visuels

17 août 2016

Présentation

polaroid-gallery est un outil en JavaScript/CSS qui n'utilise pas de librairies tierces (jQuery, Bootstrap, ...), et qui permet d'afficher des photos de manière agréable et originale avec un style "polaroid".

Ce projet est open source et accessible depuis GitHub polaroid-gallery.
Démo : http://projects.glicer.com/polaroid-gallery

Galerie d'images polaroid

Description

L'interface est responsive.

Au démarrage et à chaque redimensionnement de la fenêtre du navigateur, les photos sont automatiquement positionnées aléatoirement, avec une légère rotation, sur toute la surface de l'écran.

Lorsqu'on clique sur une image, celle-ci se déplace au centre de la fenêtre, tout en se repositionnant à l'horizontale et en s'agrandissant.

Deux boutons "suivant" et "précédent" permettent de naviguer dans la galerie.

Un fichier de configuration contient les chemins d'accès aux images ainsi que leur description.

Code

Initialisation

La fonction polaroidGallery prend en paramètre le chemin d'accès au fichier de configuration au format JSON, dans lequel chaque image est décrite par son chemin d'accès et sa légende.

[
{
"name": "img/img01.jpg", 
"caption": "En voiture"
},
{
"name": "img/img02.jpg",
"caption": "Amis"
}
]

Ce fichier est lu au chargement de la page pour construire le squelette HTML de la galerie.

window.onload = function () {
    new polaroidGallery("data/data.json"); // le fichier data/data.json contient les propriétés des images à afficher
}

Une fois rempli, le nœud HTML de la galerie est constitué de balises <figure>. Chaque balise <figure> contient l'image et sa légende.

<div id="gallery" class="fullscreen">
    <figure id="6">
        <img src="img/img07.jpg" alt="img/img07.jpg">
        <figcaption>Grand-père</figcaption>
    </figure>
    ...
</div>

Affichage des images

Étape 1 : Détecter le changement du DOM

MutationObserver permet de détecter lorsque le nœud DOM de la galerie, initialement vide, est rempli.

Remarque : Le nœud galerie observé doit être vide (pas d'espace ni de retour chariot), sinon deux mutations seront observées sous IE 11.

<div id="gallery" class="fullscreen"></div>

Étape 2 : Récupérer les dimensions de l'image

L'évènement onload est déclenché après le chargement de l'image.
La fonction associée à cet évènement permet de récupérer les dimensions initiales de l'image chargée afin de pouvoir calculer sa nouvelle position.

img.addEventListener('load', function () {              
    dataSize[item.id] = {item: item, width: item.offsetWidth, height: item.offsetHeight};
    ...
    shuffle(dataSize[item.id]);
})

Étape 3 : Positionner aléatoirement l'image

Une fois chargée, l'image est positionnée aléatoirement, avec une légère rotation, dans la limite de la surface visible du navigateur.

Étape 4 : Centrer l'image sélectionnée

Étape 5 : Ajouter les boutons de navigations

<div id="nav" class="navbar">
    <button id="preview">&lt; précédent</button>
    <button id="next">suivant &gt;</button>
</div>
var next = document.getElementById('next');
var preview = document.getElementById('preview');

next.addEventListener('click', function () {
    var currentIndex = Number(currentData.item.id) + 1;
    if (currentIndex >= dataLength) {
        currentIndex = 0
    }
    select(dataSize[currentIndex]); // sélectionner l'image suivante
    shuffleAll(); // repositionner aléatoirement les images
});

preview.addEventListener('click', function () {
    var currentIndex = Number(currentData.item.id) - 1;
    if (currentIndex < 0) {
        currentIndex = dataLength - 1
    }
    select(dataSize[currentIndex]); // sélectionner l'image précédente
    shuffleAll(); // repositionner aléatoirement les images
})

Compatibilité

Cette version est compatible avec les navigateurs qui supportent MutationObserver.