Lightbox Responsive et Accessible
Principe de base d'une lightbox accessible, compatible lecteurs d'écran et responsive. Les attributs srcset peuvent être pris en charge.
Toute proposition d'amélioration est bien sûr la bienvenue ! Ça se passe ici : contact
Exemple
Une liste de 5 images a afficher en diaporama.
La première image porte la classe CSS lightbox-overlay-trigger pour que le bouton de déclenchement
n'apparaisse qu'au survol ou au focus en navigation au clavier sur un navigateur de bureau. Sur mobile, le bouton
est similaire aux 4 images suivantes.
<img decoding="async" loading="lazy" class="lightbox lightbox-overlay-trigger" title="Berlin, Potsdamer Platz" data-diaporama="https://www.kortic.com/assets/images/card/800/berlin-potsdamer-platz-1.jpg.webp" data-enable-background="https://www.kortic.com/assets/images/full/1200/berlin-potsdamer-platz-1.jpg.webp" alt="image Berlin-Potsdamer-Platz" src="https://www.kortic.com/assets/images/card/400/berlin-potsdamer-platz-1.jpg.webp">
Code du bloc
<div class="s-6">
<div class="ratio-100">
<!-- START ELEMENT TO VIEW -->
<picture class="lightbox"
id="27-07-2012-a-18h31.jpg-0"
data-diaporama="https://www.kortic.com/assets/images/card/800/27-07-2012-a-18h31.jpg.webp"
data-link="https://www.kortic.com/photographie/27-07-2012-a-18h31.html"
data-title="27/07/2012 à 18h31"
data-enable-background="https://www.kortic.com/assets/images/full/2000/27-07-2012-a-18h31.jpg.webp"
data-scroll="27-07-2012-a-18h31.jpg-0"
>
<source type="image/webp" srcset="https://www.kortic.com/assets/images/card/800/27-07-2012-a-18h31.jpg.webp">
<img decoding="async" loading="lazy" src="https://www.kortic.com/assets/images/card/800/27-07-2012-a-18h31.jpg"
alt="portrait d'un chien blanc tenue en laisse par une personne que l'on devine maigre">
</picture>
<!-- // END ELEMENT TO VIEW -->
</div>
</div>
<div class="s-6">
<div class="ratio-100">
<!-- START ELEMENT TO VIEW -->
<picture class="lightbox"
id="26-12-2023-11h18.jpg-1"
data-diaporama="https://www.kortic.com/assets/images/card/800/26-12-2023-11h18.jpg.webp"
data-link="https://www.kortic.com/photographie/26-12-2023-11h18.html"
data-title="26/12/2023 11h18"
data-enable-background="https://www.kortic.com/assets/images/full/2000/26-12-2023-11h18.jpg.webp"
data-scroll="26-12-2023-11h18.jpg-1"
>
<source type="image/webp" srcset="https://www.kortic.com/assets/images/card/800/26-12-2023-11h18.jpg.webp">
<img decoding="async" loading="lazy" src="https://www.kortic.com/assets/images/card/800/26-12-2023-11h18.jpg"
alt="portrait en noir et blanc d'un sans domicile fixe souriant avec un bonnet">
</picture>
<!-- // END ELEMENT TO VIEW -->
</div>
</div>
<div class="s-6">
<div class="ratio-100">
<!-- START ELEMENT TO VIEW -->
<picture class="lightbox"
id="28-03-2015-a-16h38.jpg-2"
data-diaporama="https://www.kortic.com/assets/images/card/800/28-03-2015-a-16h38.jpg.webp"
data-link="https://www.kortic.com/photographie/28-03-2015-a-16h38.html"
data-title="28−03−2015 à 16h38"
data-enable-background="https://www.kortic.com/assets/images/full/2000/28-03-2015-a-16h38.jpg.webp"
data-scroll="28-03-2015-a-16h38.jpg-2"
>
<source type="image/webp" srcset="https://www.kortic.com/assets/images/card/800/28-03-2015-a-16h38.jpg.webp">
<img decoding="async" loading="lazy" src="https://www.kortic.com/assets/images/card/800/28-03-2015-a-16h38.jpg"
alt="photo en noir et blanc d'Adrien Demont">
</picture>
<!-- // END ELEMENT TO VIEW -->
</div>
</div>
<div class="s-6">
<div class="ratio-100">
<!-- START ELEMENT TO VIEW -->
<picture class="lightbox"
id="10-03-2015-a-12h26.jpg-3"
data-diaporama="https://www.kortic.com/assets/images/card/800/10-03-2015-a-12h26.jpg.webp"
data-link="https://www.kortic.com/photographie/10-03-2015-a-12h26.html"
data-title="10−03−2015 à 12h26"
data-enable-background="https://www.kortic.com/assets/images/full/2000/10-03-2015-a-12h26.jpg.webp"
data-scroll="10-03-2015-a-12h26.jpg-3"
>
<source type="image/webp" srcset="https://www.kortic.com/assets/images/card/800/10-03-2015-a-12h26.jpg.webp">
<img decoding="async" loading="lazy" src="https://www.kortic.com/assets/images/card/800/10-03-2015-a-12h26.jpg"
alt="homme âgé en train de lire le journal sur un banc">
</picture>
<!-- // END ELEMENT TO VIEW -->
</div>
</div>
<script nonce="69286fd45cdfe945c44c172b608603ea6d71763c">
((jq) => {
jq(document).ready(()=>{
lightbox('diaporama');
})
})(jQuery);
</script>Javascript jQuery.lightbox
;((__) => {
/* Utilisation
usage sur n'importe quelle balise HTML de la catégorie contenu de flux (https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_de_flux)
Exemple:
<picture class="lightbox" data-diaporama="//domaine.com/src_image.jpg" title="Lorem ipsum" ou data-title="Lorem ipsum">
Valeurs obligatoires :
- classe `lightbox`
- attribut data-GIVE-ATTRIBUTE (par défaut) modifiable.
La valeur de data-GIVE-ATTRIBUTE est la source de l'image en grand format affiché dans la lightbox.
[data-GIVE-ATTRIBUTE] : string uri OU objet pour images responsives. eg. {"src":"\/image@1000.jpg","srcset":["\/image@400.jpg 400vw","\/image@700.jpg 700vw","\/image@1500.jpg 1500vw"]}
- [data-]title non vide
Valeurs optionnelles :
- classe `lightbox-overlay-trigger` : pose la zone cliquable sur la totalité du bloc. Si absent, le trigger cliquable se positionne en haut à droite du bloc
- data-download : définit le lien dans la lightbox vers le téléchargement direct de l'image courante
- data-link : définit le lien dans la lightbox vers l'affichage d'une page détaillant l'image courante
- data-scroll : contient un identifiant qui permet de faire suivre la page au changement de vue dans la lightbox
- data-enable-background : ressources img pour afficher un arrière-plan (flou blur() modifiable dans la CSS)
MISC variables utilisées :
Un objet `GLOBALS.i18n` (voir source de la page) est nécessaire pour labelliser les attributs aria-
Taper console.table(GLOBALS.i18n) sous chrome pour afficher les valeurs
DOM = {
window: __(window),
document: __(document),
body: __('body')
};
const FOCUSABLE_SELECTORS = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [role="button"], button:not([disabled]), [tabindex="0"], [contenteditable]';
const KEYCODES = {
BACKSPACE: 8,
TAB: 9,
ENTER: 13,
ESC: 27,
SPACE: 32,
LEFT: 37,
UP: 38,
RIGHT: 39,
DOWN: 40
};
*/
'use strict';
window.lightbox = function (attribute, fromDomNode) {
let blocs = __('.lightbox[data-' + attribute + ']', fromDomNode === null ? DOM.body : fromDomNode);
if (typeof __.fn.doOnce !== 'function') {
__.fn.doOnce = function (func) {
this.length && func.apply(this);
return this;
};
}
if (typeof __.preload !== 'function') {
__.preload = function () {
let imgs = (Object.prototype.toString.call(arguments[0]) === '[object Array]' ? arguments[0] : arguments),
tmp = [],
i = imgs.length;
for (; i--;) {
tmp.push(__('<img />', {
'src': imgs[i]
}));
}
};
}
if (typeof __.means !== 'function') {
__.means = function (wording) {
let sentence;
if (typeof GLOBALS === "object") {
sentence = GLOBALS.i18n[wording] || undefined;
}
return sentence !== undefined ? sentence : wording + ' is not defined in GLOBALS.i18n';
};
}
if (blocs.length) {
let lbx_timer,
placeholder = 'data:image/gif;base64,R0lGODlhCgAKAJECAAAAAP///wAAAAAAACH5BAEAAAIALAAAAAAKAAoAAAIIlI+py+0PYysAOw==',
count = blocs.length;
if (typeof __.zindex !== 'function') {
__.zindex = (fromDomNode) => {
let r = [];
__("*", (fromDomNode == null ? DOM.body : fromDomNode)).each(function () {
let z = parseInt(__(this).css('z-index'), 10);
!isNaN(z) && r.push(z)
});
let last = r.sort(function (a, b) {
return a - b
}).reverse()[0];
if (last === undefined) {
last = 0;
}
return last + 1;
};
}
lbx_timer = 0;
DOM.body.find('#lightbox').doOnce(function () {
this.remove();
});
let classContainer = 'lightbox-container',
classTrigger = 'lightbox-trigger',
lbx_ = __('<section/>', {
'id': 'lightbox',
'tabindex': '0',
'style': 'z-index:' + __.zindex(),
'aria-describedby': 'lightbox_caption'
}),
lbx_image = __('<img/>', {
'alt': '',
'src': placeholder,
'decoding': 'async',
'id': 'lightbox_image'
}),
lbx_background = __('<span/>', {'id': 'lightbox_background'}),
lbx_backdrop = __('<span/>', {'id': 'lightbox_backdrop'}),
lbx_caption = __('<h2/>', {'id': 'lightbox_caption'}).text('Diaporama'),
lbx_controls = __('<div/>', {'id': 'lightbox_control'}),
lbx_first = __('<button/>', {
'id': 'lightbox_first',
'aria-label': __.means('lightbox_first'),
'type': 'button'
}),
lbx_prev = __('<button/>', {
'id': 'lightbox_prev',
'aria-label': __.means('lightbox_prev'),
'type': 'button'
}),
lbx_next = __('<button/>', {
'id': 'lightbox_next',
'aria-label': __.means('lightbox_next'),
'type': 'button'
}),
lbx_last = __('<button/>', {
'id': 'lightbox_last',
'aria-label': __.means('lightbox_last'),
'type': 'button'
}),
lbx_play = __('<button/>', {
'id': 'lightbox_play',
'aria-label': __.means('lightbox_play'),
'type': 'button'
}),
lbx_loading = __('<div/>', {'id': 'lightbox_loading'}),
lbx_close = __('<button/>', {
'id': 'lightbox_close',
'aria-label': __.means('lightbox_close'),
'type': 'button'
}),
lbx_next_image, lbx_prev_image,
lbx_fadeout = () => {
lbx_.fadeOut(200);
lbx_stop();
__('[data-' + attribute + '="' + lbx_.attr('data-opener') + '"]').parent().find('.' + classTrigger).trigger('focus');
},
lbx_autostart = false,
lbx_stop = () => {
lbx_autostart = false;
lbx_play.removeClass('play'),
resetTimer();
},
slide = () => {
__(blocs[lbx_next_image]).parents('.' + classContainer).find('.' + classTrigger).trigger('click');
(lbx_autostart) && initTimer();
},
initTimer = () => {
resetTimer();
lbx_timer = setTimeout(() => {
slide();
}, 5000);
},
resetTimer = () => {
((lbx_timer > 0) && clearTimeout(lbx_timer));
lbx_timer = 0;
};
DOM.body.append(lbx_);
lbx_.append(
lbx_caption,
lbx_close,
lbx_image,
lbx_loading,
lbx_controls
);
if (count > 1) {
lbx_controls.append(lbx_first, lbx_prev, lbx_play, lbx_next, lbx_last);
lbx_.addClass('multi-views');
}
lbx_close.on('click', () => {
lbx_fadeout();
});
blocs.each(function (index) {
let element_ = __(this),
parentContainer = element_.parent(),
img_caption = element_.attr('title') || element_.attr('data-title') || null,
img_alt = element_.attr('data-alt') || null;
if (!parentContainer.hasClass(classContainer)) {
parentContainer.addClass(classContainer);
(__.inArray(parentContainer.css('position'), ['absolute', 'relative', 'fixed']) === -1) && parentContainer.addClass('position-relative');
element_.after(
__('<button/>', {
'class': classTrigger,
'type': 'button',
'aria-label': __.sprintf(__.means('lightbox_trigger_label'), (img_caption !== null ? img_caption : ''))
})
.css({'z-index': 1})
.append(__('<span/>', {
'class': 'trigger-label screen-readers'
})
.text(__.means('lightbox_trigger')))
);
}
element_.hasClass('lightbox-overlay-trigger') && parentContainer.addClass('lightbox-overlay');
parentContainer.find('.' + classTrigger).on('click', (ev) => {
ev.stopPropagation();
lbx_.attr('data-opener', element_.data(attribute));
parentContainer.tagName().toLowerCase() === 'a' && ev.preventDefault();
// preload images
if (element_.data('enable-background') !== undefined) {
lbx_.prepend(lbx_background);
lbx_background.after(lbx_backdrop);
__.preload(element_.data('enable-background'));
} else {
if (typeof element_.data(attribute) === 'string') {
__.preload([element_.data('enable-background'), element_.data(attribute)]);
}
}
// ajouter un lien de téléchargement de l'image dans la lightbox
// attribut data-download="//lien.download."
if (element_.data('download') !== undefined) {
lbx_.removeClass('.downloadable').find('.lightbox_download').first().remove();
if (element_.data('download') !== false) {
let lbx_download = __('<img/>', {
'alt': '',
'src': placeholder,
'class': 'lightbox_download'
});
lbx_.addClass('downloadable');
lbx_caption.before(lbx_download);
lbx_download.on('click', () => {
lbx_stop();
document.location = element_.data('download');
});
}
}
// ajouter un lien vers une page détails de l'image
// attribut data-link="//lien.vers.longdescription.image"
lbx_.removeClass('linkable').find('.lightbox_link').first().remove();
if (element_.data('link') !== undefined) {
if (element_.data('link') !== false) {
let lbx_link = __('<a/>', {'href': element_.data('link'), 'class': 'lightbox_link'});
lbx_.addClass('linkable');
lbx_caption.before(lbx_link.append(__('<span/>', {class: 'screen-readers'}).text(__.means('lightbox_link'))));
lbx_link.on('click', () => {
lbx_stop();
});
}
}
(lbx_.is(':hidden')) && (
lbx_.fadeIn(200),
lbx_play.removeClass('play')
);
lbx_next_image = index + 1;
(lbx_next_image > count - 1) && (lbx_next_image = 0);
lbx_prev_image = index - 1;
(lbx_prev_image < 0) && (lbx_prev_image = count - 1);
let index_images = __.means('lightbox_enum') + (index + 1) + __.means('lightbox_on') + count;
(img_caption !== null && img_caption.trim().length)
? lbx_caption.empty().prepend(__('<span/>').text(img_caption))
: lbx_caption.empty().text('Diaporama').wrapInner('<span/>');
(img_alt !== null && img_alt.trim().length) && lbx_caption.append(__('<span/>', {
'class': 'screen-readers'
}).text(' ' + img_alt));
lbx_controls.attr('data-before', index_images);
lbx_image.css({opacity: 0});
lbx_.addClass('loading').css({zIndex: __.zindex()});
lbx_loading.hide();
if (typeof element_.data(attribute) !== 'string') {
let values_ = element_.data(attribute);
lbx_image.attr({
'src': values_.src,
'srcset': values_.srcset.join(',')
});
} else {
lbx_image.attr({
'src': element_.data(attribute)
});
}
lbx_image.on('load', () => {
lbx_.attr({
'aria-live': 'polite',
'aria-modal': 'true',
'role': 'dialog'
}).trigger('focus');
lbx_image.css({maxHeight: 'calc(100% - ' + ((lbx_close.outerHeight() + lbx_controls.outerHeight(true))*.0625) + 'rem)'});
lbx_loading.hide();
lbx_image.css({opacity: 1});
lbx_.removeClass('loading');
// ajouter l'image d'arrière-plan
element_.data('enable-background') !== undefined && lbx_background.css({
backgroundImage: 'url(' + element_.data('enable-background') + ')'
});
if (element_.data('scroll') !== undefined) {
document.location.hash = element_.data('scroll');
}
let focusable = lbx_.find(FOCUSABLE_SELECTORS);
if (focusable.length) {
let start_ = focusable[0],
end_ = focusable[focusable.length - 1],
focus_ = lbx_ ? lbx_ : start_;
focus_.trigger('focus');
lbx_.on('keydown', (event) => {
if (event.keyCode === KEYCODES.TAB) {
(event.shiftKey && document.activeElement === start_) && (
event.preventDefault(),
end_.trigger('focus')
);
(!event.shiftKey && document.activeElement === end_) && (
event.preventDefault(),
start_.trigger('focus')
);
}
});
}
if (lbx_autostart) {
initTimer()
}
});
lbx_.on('click', (e) => {
__(e.target).attr('id') === lbx_.attr('id') && lbx_fadeout();
});
});
});
lbx_play.on('click', () => {
lbx_play.toggleClass('play');
if (lbx_autostart) {
lbx_autostart = false;
resetTimer();
} else {
lbx_autostart = true;
initTimer();
}
});
lbx_image.on('click', () => {
count > 1 ? lbx_next.trigger('click') : (document.fullscreenElement == null ? __.fullScreenOn(document.getElementById('lightbox_image')) : (__.fullScreenOff(document.getElementById('lightbox_image')), lbx_.trigger('click')));
});
lbx_first.on('click', () => {
lbx_.is(':visible') && __(blocs[0]).parents('.' + classContainer).find('.' + classTrigger).trigger('click');
lbx_stop();
});
lbx_prev.on('click', () => {
lbx_.is(':visible') && __(blocs[lbx_prev_image]).parents('.' + classContainer).find('.' + classTrigger).trigger('click');
lbx_stop();
});
lbx_next.on('click', () => {
lbx_.is(':visible') && __(blocs[lbx_next_image]).parents('.' + classContainer).find('.' + classTrigger).trigger('click');
lbx_stop();
});
lbx_last.on('click', () => {
lbx_.is(':visible') && __(blocs[count - 1]).parents('.' + classContainer).find('.' + classTrigger).trigger('click');
lbx_stop();
});
DOM.window.on('keyup', ev => {
if (lbx_.is(':visible') && __.inArray(ev.which, [KEYCODES.ESC, KEYCODES.LEFT, KEYCODES.RIGHT]) !== -1) {
if (count > 1) {
if (ev.which === KEYCODES.RIGHT) {
__(blocs[lbx_next_image]).parents('.' + classContainer).find('.' + classTrigger).trigger('click');
}
if (ev.which === KEYCODES.LEFT) {
__(blocs[lbx_prev_image]).parents('.' + classContainer).find('.' + classTrigger).trigger('click');
}
}
ev.which === KEYCODES.ESC && lbx_fadeout();
}
});
}
};
/*
Appel sur le DOM ready
DOM.document.ready(lightbox('lightbox'));
ou…
*/
})(jQuery);Les CSS associées
body {
--lightbox-first: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">\
<path d="M5.66,0A1.66,1.66,0,0,0,4,1.66H4V30.34A1.66,1.66,0,0,0,5.66,32H8.71a1.66,1.66,0,0,0,1.65-1.66V1.66A1.66,1.66,0,0,0,8.71,0ZM28.15,1.37,27.67.94a2.65,2.65,0,0,0-3.74648.0941L23.89,1.07l-.1.11L11,14a2.7,2.7,0,0,0-.21,3.79A2.08051,2.08051,0,0,0,11,18L23.79,30.82a2.67,2.67,0,0,0,3.75984.34848L27.56,31.16l.11-.1.48-.48Z"/>\
</svg>');
--lightbox-prev: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">\
<path d="M15.15,18a2.86,2.86,0,0,1,0-4.05h0c3.21-3.21,6.39-6.39,9.6-9.54a2.17,2.17,0,0,0,.11-3.07.93.93,0,0,0-.14-.14L24.25.77a2.65,2.65,0,0,0-3.75,0,2.2,2.2,0,0,0-.2.23l-13,13a2.86,2.86,0,0,0,0,4h0l13,13a2.64,2.64,0,0,0,3.72.44l.23-.2.47-.48a2.12,2.12,0,0,0,.32-3,1.8,1.8,0,0,0-.19-.2C21.51,24.42,18.36,21.18,15.15,18Z"/>\
</svg>');
--lightbox-last: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">\
<path d="M23.44,0a1.67,1.67,0,0,0-1.65,1.66V30.34A1.67,1.67,0,0,0,23.44,32h3a1.66,1.66,0,0,0,1.66-1.66V1.66h0A1.66,1.66,0,0,0,26.49,0ZM4,30.58l.48.48.11.1h0a2.68,2.68,0,0,0,3.76-.35L21.15,18a2.08155,2.08155,0,0,0,.21-.21A2.7,2.7,0,0,0,21.15,14L8.36,1.18l-.1-.11h0A2.65,2.65,0,0,0,4.5159.90649L4.48.94,4,1.37Z"/>\
</svg>');
--lightbox-next: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">\
<path d="M16.74,14a2.87,2.87,0,0,1,0,4h0c-3.21,3.21-6.39,6.39-9.59,9.54a2.18,2.18,0,0,0,0,3.08l.15.13.47.45a2.65,2.65,0,0,0,3.75,0,2.2,2.2,0,0,0,.2-.23l13-13a2.86,2.86,0,0,0,0-4.05h0L11.7,1A2.64,2.64,0,0,0,8,.57l-.23.2-.47.48a2.12,2.12,0,0,0-.32,3,1.8,1.8,0,0,0,.19.2C10.38,7.58,13.53,10.82,16.74,14Z"/>\
</svg>');
--lightbox-play: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">\
<path d="M9.11.35A1.6,1.6,0,0,0,6.84.64a1.69,1.69,0,0,0-.34,1V30.34a1.67,1.67,0,0,0,.91,1.5,1.6,1.6,0,0,0,.71.16,1.55,1.55,0,0,0,1-.35L26.84,17.31A1.69,1.69,0,0,0,27.19,15a1.93,1.93,0,0,0-.35-.35Z"/>\
</svg>');
--lightbox-pause: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">\
<path d="m11.02,25h-.04c-.82,0-1.48-.66-1.48-1.48v-15.04c0-.82.66-1.48,1.48-1.48h.04c.82,0,1.48.66,1.48,1.48v15.04c0,.82-.66,1.48-1.48,1.48Zm10,0h-.04c-.82,0-1.48-.66-1.48-1.48v-15.04c0-.82.66-1.48,1.48-1.48h.04c.82,0,1.48.66,1.48,1.48v15.04c0,.82-.66,1.48-1.48,1.48Z"/>\
</svg>');
--lightbox-link: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">\
<path d="M13.5,18.45a1.73,1.73,0,0,1,.08,2.38l-.08.08a1.72,1.72,0,0,1-2.48,0l0,0A8.81,8.81,0,0,1,11,8.76l.12-.12h0L17.18,2.5a8.77,8.77,0,0,1,12.26,0,8.65,8.65,0,0,1,.35,11.92l-.35.35-2.61,2.62a12.26,12.26,0,0,0-.72-4.16l.83-.84a5.24,5.24,0,0,0,.13-7.23L26.94,5a5.26,5.26,0,0,0-7.37,0L13.5,11.09a5.25,5.25,0,0,0-.12,7.24l.12.12m5-7.36a1.73,1.73,0,0,1,2.5,0,8.82,8.82,0,0,1,.12,12.15l-.12.12h0L14.82,29.5a8.77,8.77,0,0,1-12.26,0,8.65,8.65,0,0,1-.35-11.92c.12-.12.23-.24.35-.35l2.61-2.62a12.26,12.26,0,0,0,.72,4.16l-.83.84a5.24,5.24,0,0,0-.13,7.23,1.59,1.59,0,0,0,.13.13,5.26,5.26,0,0,0,7.37,0l6.07-6.06a5.25,5.25,0,0,0,.12-7.24l-.12-.12a1.6,1.6,0,0,1-.26-2.19A1.66,1.66,0,0,1,18.5,11.09Z"/>\
</svg>');
--lightbox-download: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">\
<path d="M15,25.39h0a1.60033,1.60033,0,0,0,.38.23h0a1.82991,1.82991,0,0,0,.56.13h.2a1.58015,1.58015,0,0,0,.57-.13h0a1.45989,1.45989,0,0,0,.33-.22h0l.08-.08,6.39-6.39a1.58,1.58,0,0,0-.57905-2.15812L22.91,16.76a1.6,1.6,0,0,0-1.53,0L17.77,20.4V1.85a1.6,1.6,0,1,0-3.2-.00139V20.4l-3.66-3.67a1.61,1.61,0,0,0-2.26.13,1.63,1.63,0,0,0,0,2.13ZM30.4,20a1.6,1.6,0,0,0-1.59,1.6v4.8a1.62,1.62,0,0,1-1.6,1.6H4.79a1.62,1.62,0,0,1-1.6-1.6V21.6A1.6,1.6,0,1,0,0,21.6H0v4.8a4.81,4.81,0,0,0,4.81,4.81h22.4A4.81,4.81,0,0,0,32,26.4V21.6A1.62,1.62,0,0,0,30.4,20Z"/>\
</svg>');
--lightbox-close: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">\
<path d="M30,0a1.95,1.95,0,0,1,2,2,1.91,1.91,0,0,1-.58,1.42L18.83,16,31.42,28.58A1.91,1.91,0,0,1,32,30a1.95,1.95,0,0,1-2,2,1.91,1.91,0,0,1-1.42-.58L16,18.83,3.42,31.42A1.91,1.91,0,0,1,2,32a1.95,1.95,0,0,1-2-2,1.91,1.91,0,0,1,.58-1.42L13.17,16,.58,3.42A1.91,1.91,0,0,1,0,2,1.95,1.95,0,0,1,2,0,1.91,1.91,0,0,1,3.42.58L16,13.17,28.58.58A1.91,1.91,0,0,1,30,0Z"/>\
</svg>');
--lightbox-zoom: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">\
<path d="M29.28571,2.5H9.35714A2.23894,2.23894,0,0,0,7.14286,4.75V20.5a2.23894,2.23894,0,0,0,2.21428,2.25H29.28571A2.239,2.239,0,0,0,31.5,20.5V4.75A2.239,2.239,0,0,0,29.28571,2.5Zm0,18H9.35714V4.75H29.28571ZM18.21429,27.25h-15.5V16H4.92857V13.75H2.71429A2.239,2.239,0,0,0,.5,16V27.25A2.239,2.239,0,0,0,2.71429,29.5h15.5a2.239,2.239,0,0,0,2.21428-2.25V25H18.21429Z"/>\
</svg>');
}
.lightbox-trigger {
background-color: black;
color: inherit;
border-radius: var(--radius) !important;
position: absolute !important;
right: 0.0625rem;
bottom: 0.0625rem;
height: 2.5rem;
width: 2.5rem;
max-width: 100%;
}
.lightbox-trigger:after {
content: '';
position: absolute;
inset: 0;
-webkit-mask-image: var(--lightbox-zoom);
-webkit-mask-size: 65% 65%;
-webkit-mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-image: var(--lightbox-zoom);
mask-size: 65% 65%;
mask-position: center center;
mask-repeat: no-repeat;
background-color: white;
}
.lightbox-container.trigger-top .lightbox-trigger {
bottom: auto;
top: 0.0625rem;
}
.lightbox-container.trigger-left .lightbox-trigger {
right: auto;
left: 0.0625rem;
}
@media (any-pointer: fine) {
.lightbox-overlay .lightbox-trigger .trigger-label {
opacity: 0;
width: 0;
overflow: hidden;
text-overflow: clip;
display: inline-block;
}
.lightbox-overlay .lightbox-trigger {
background-color: rgba(0, 0, 0, 0.5) !important;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: auto !important;
max-width: 100%;
cursor: zoom-in !important;
opacity: 0;
border-radius: 0 !important;
padding: 0;
transform: none;
}
.lightbox-overlay .lightbox-trigger:after {
-webkit-mask-size: 1.875rem;
mask-size: 1.875rem;
}
:root[class*="contrast"] .lightbox-overlay .lightbox-trigger {
background-color: rgba(0, 0, 0, 0.8) !important;
}
.lightbox-overlay:hover .lightbox-trigger {
opacity: 1;
outline-offset: -1px;
}
@media (prefers-reduced-motion: no-preference) {
.lightbox-overlay .lightbox-trigger {
transition: opacity .2s ease-in-out;
}
}
}
.lightbox-trigger:focus {
opacity: 1;
outline-offset: -1px;
}
#lightbox {
--lightbox-baseline: 3.125rem;
--lightbox-size-icons: 1.5625rem;
inset: 0;
color: white;
display: none;
position: fixed;
background-color: rgb(0, 0, 0);
}
#lightbox_background {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background-size: cover;
background-position: center center;
}
#lightbox_backdrop {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
#lightbox.loading #lightbox_background, #lightbox.loading #lightbox_backdrop {
opacity: 0;
}
#lightbox:not(.loading) #lightbox_background {
opacity: .3;
}
#lightbox:not(.loading) + #lightbox_backdrop {
opacity: 1;
}
#lightbox_caption {
top: 0;
padding: 0 1.25rem;
left: 0;
position: absolute;
right: var(--lightbox-baseline);
margin: 0 !important;
}
@media (max-width: 19.9375rem) {
#lightbox_caption {
font-size: 0.875rem;
}
}
@media (min-width: 20rem) and (max-width: 29.9375rem) {
#lightbox_caption {
font-size: 1rem;
}
}
@media (min-width: 30rem) and (max-width: 47.9375rem) {
#lightbox_caption {
font-size: 1.125rem;
}
}
@media (min-width: 48rem) {
#lightbox_caption {
font-size: 1.5rem;
}
}
#lightbox.downloadable #lightbox_caption, #lightbox.linkable #lightbox_caption {
left: var(--lightbox-baseline);
}
#lightbox.downloadable.linkable #lightbox_caption {
left: calc(var(--lightbox-baseline) * 2);
}
#lightbox_caption span {
line-height: var(--lightbox-baseline);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
color: white !important;
}
#lightbox_image {
height: auto;
width: auto;
max-width: calc(100vw - 0.625rem);
position: absolute;
left: 50%;
top: 50%;
box-shadow: 0 0 0 1px rgba(200, 200, 200, 0.2) inset;
padding: 1px;
transform: translate(-50%, -50%);
}
#lightbox.multi-views #lightbox_image {
margin-top: -0.625rem;
}
#lightbox_loading {
left: 50%;
top: calc(50% - 2rem);
line-height: 2rem;
position: absolute;
display: none;
border-radius: var(--radius);
transform: translate(-50%, -50%);
}
#lightbox_control {
position: absolute;
display: inline-block;
left: 0;
right: 0;
bottom: 0;
padding-top: calc(var(--lightbox-baseline) / 2);
min-height: var(--lightbox-baseline);
white-space: nowrap;
text-align: center;
}
#lightbox_control:before {
content: attr(data-before);
position: absolute;
top: 0;
left: 50%;
line-height: calc(var(--lightbox-baseline) / 2);
display: inline-block;
white-space: nowrap;
opacity: .8;
font-variant: small-caps;
font-size: 0.8125rem;
transform: translateX(-50%);
}
#lightbox_close:after, .lightbox_download:after, .lightbox_link:after, #lightbox_control button:after {
-webkit-mask-position: center center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: var(--lightbox-size-icons) var(--lightbox-size-icons);
mask-position: center center;
mask-repeat: no-repeat;
mask-size: var(--lightbox-size-icons) var(--lightbox-size-icons);
content: '';
position: absolute;
inset: 0;
background-color: white;
}
#lightbox_close {
background-color: transparent !important;
position: absolute;
right: 0;
top: 0;
}
#lightbox_close:after {
-webkit-mask-image: var(--lightbox-close);
mask-image: var(--lightbox-close);
}
#lightbox_close, .lightbox_download, .lightbox_link, #lightbox_control button {
height: var(--lightbox-baseline);
width: var(--lightbox-baseline);
cursor: pointer;
}
.lightbox_download {
position: absolute;
top: 0;
left: 0;
background-color: transparent !important;
}
.lightbox_link {
position: absolute;
top: 0;
left: 0;
white-space: nowrap;
overflow: hidden;
background-color: transparent !important;
color: white !important;
}
.lightbox_download + .lightbox_link {
left: var(--lightbox-baseline);
}
#lightbox_control button {
vertical-align: bottom;
background-color: transparent;
}
#lightbox_first:after {
-webkit-mask-image: var(--lightbox-first);
mask-image: var(--lightbox-first);
}
#lightbox_prev:after {
-webkit-mask-image: var(--lightbox-prev);
mask-image: var(--lightbox-prev);
}
#lightbox_play.play {
background-color: rgba(255, 255, 255, 1);
border-radius: 3.125rem;
}
#lightbox_play.play:after {
-webkit-mask-image: var(--lightbox-pause);
mask-image: var(--lightbox-pause);
background-color: black;
}
#lightbox_play:not(.play):after {
-webkit-mask-image: var(--lightbox-play);
mask-image: var(--lightbox-play);
background-color: rgba(10, 10, 10, 0);
}
#lightbox_play:not(.play):after {
background-color: white;
}
#lightbox_next:after {
-webkit-mask-image: var(--lightbox-next);
mask-image: var(--lightbox-next);
}
#lightbox_last:after {
-webkit-mask-image: var(--lightbox-last);
mask-image: var(--lightbox-last);
}
.lightbox_download:after {
-webkit-mask-image: var(--lightbox-download);
mask-image: var(--lightbox-download);
}
.lightbox_link:after {
-webkit-mask-image: var(--lightbox-link);
mask-image: var(--lightbox-link);
}
Vous aimez cette page ?
Dites-le !
Utilisation des sources
Les sources proposées sur Kortic Anthony Ladeuil sont mises à disposition selon les termes suivants :
Licence Creative commons CC BY-NC-SA 4.0
- Attribution
-
Détails
Vous devez créditer l'Œuvre, intégrer un lien vers la licence et indiquer si des modifications ont été effectuées à l'Oeuvre. Vous devez indiquer ces informations par tous les moyens raisonnables, sans toutefois suggérer que l'Offrant vous soutient ou soutient la façon dont vous avez utilisé son Oeuvre.
- Pas d’utilisation commerciale
-
Détails
Vous n'êtes pas autorisé à faire un usage commercial de cette Oeuvre, tout ou partie du matériel la composant.
Bien entendu, la probabilité est faible pour que ce point soit respecté. En cas de sursaut d'honnêteté, vous pouvez payer un café, cette page soulagera votre conscience. - Partage dans les mêmes conditions
-
Détails
Dans le cas où vous effectuez un remix, que vous transformez, ou créez à partir du matériel composant l'Oeuvre originale, vous devez diffuser l'Oeuvre modifiée dans les même conditions, c'est à dire avec la même licence avec laquelle l'Oeuvre originale a été diffusée.
À défaut de tout ça, un petit message et une référence à ce site restent les bienvenus.
Limitation de responsabilité
Le code est fourni « tel quel », sans garantie d'aucune sorte, expresse ou implicite. En aucun cas l’auteur ou les détenteurs du copyright ne seront responsables de toute réclamation, dommage ou autre responsabilité, que ce soit dans une action contractuelle, délictuelle ou autre, résultant de, en dehors ou en relation avec le logiciel ou l'utilisation ou d'autres transactions.