regal-scroll-snap
Ce petit plugin regal-scroll-snap permet d'afficher une ligne d'images de formats différents et, sous desktop, le scroll est activé par la souris au drag'n'drop (comme pour les mobiles).
Structure HTML
<div class="scroll-snap-h" data-snap="1" data-gallery="1" data-gallery-cta="Diaporama">
<div class="scroll-snap-slide">
<div class="scroll-snap-item">
<figure>
<picture>
<source srcset="img/galerie-780x1232-01.jpg" media="(max-width: 1023px)">
<source srcset="img/galerie-01.jpg">
<img src="img/galerie-780x1232-01.jpg" alt="">
</picture>
<figcaption>
Légende de l’image ici
</figcaption>
</figure>
</div>
...etc.
</div>
</div>
</div>
data-snap="1" pour activer le snap ou 0 pour laisser le scroll libre;
data-gallery="1" pour activer la galerie;
data-gallery-cta="texte du cta" pour intitulé CTA.
La hauteur du module est fixée via la variable css --conth et on force la hauteur des images à 100% - figcaption height (40px nécessaires à l'affichage des légendes).
//610 = img height (550px) + figcaption height (40px) + hidden scrollbar (20px);
Installation
Charger la CSS de base dans le header.
Télécharger _scroll-snap.scss
Charger le constructeur javascript avant fermeture du body.
Télécharger regal-drag-snap.js
Initialiser les modules
let dragSnapItems = document.querySelectorAll('.scroll-snap-h');
if(dragSnapItems.length) {
dragSnapItems.forEach(function(dragSnapItem) {
dragSnapItem.dragSnapItem = new DragSnap(dragSnapItem);
});
}
};
galerie popin full-size
Pour la galerie popin full-size, le plugin mini-slider doit être activé, regal-scroll-snap construit une structure HTML adequate et initialise le mini-slider.
L'ouverture de la popin (une balise <dialog>) nécessite les fonctions suivantes :
let dialogElt = that.closest('.dialog-and-opener');
let dialog = dialogElt.querySelector('dialog');
let closeButton = dialogElt.querySelector('.close-dialog button');
dialog.showModal();
document.body.classList.add('no-overflow');
dialog.addEventListener('click', clickOpenDialog);
closeButton.addEventListener('click', clickCloseDialog);
};
function clickOpenDialog(e) {
if (e.target === e.currentTarget) {
e.stopPropagation();
let that = e.currentTarget;
let dialogElt = that.closest('.dialog-and-opener');
let dialog = dialogElt.querySelector('dialog');
let closeButton = dialogElt.querySelector('.close-dialog');
let openButton = dialogElt.querySelector('.open-dialog');
dialog.close();
document.body.classList.remove('no-overflow');
e.currentTarget.removeEventListener('click', clickOpenDialog);
closeButton.removeEventListener('click', clickCloseDialog);
}
};
function clickCloseDialog(e) {
let that = e.currentTarget;
let dialogElt = that.closest('.dialog-and-opener');
let dialog = dialogElt.querySelector('dialog');
let closeButton = dialogElt.querySelector('.close-dialog');
dialog.showModal();
document.body.classList.remove('no-overflow');
e.currentTarget.removeEventListener('click', clickOpenDialog);
closeButton.removeEventListener('click', clickCloseDialog);
};
//event delegation
document.addEventListener('click', docEvent);
function docEvent(e) {
if (e.target.closest('.open-dialog')) {
e.preventDefault();
openDialogPopin(e.target.closest('.open-dialog'));
}
};
Fonctions publiques
destroy()
Mobiles
En version mobile, par défaut chaque image prend 80vw de large (afin de laisser voir les suivants/précédents) et de grosses différences de hauteur ne sont pas bien jolies...
Il est donc préférable d'avoir des visuels tous du même format pour un meilleur rendu.
On peut cependant fixer la même hauteur à tous les visuels et chacun prendra alors sa largeur naturelle en ajoutant un data-mobileForceHeight="1", le snap est alors supprimé et le scroll est libre.