Vous êtes dans la zone de contenu principal de la page

Lightbox Responsive et A11Y

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

Utilisation

<img decoding="async"
  class="lightbox lightbox-overlay-trigger lazy-io"
  title="Berlin, Potsdamer Platz"
  data-link="https://www.kortic.com/photo-berlin-potsdamer-platz.html"
  data-full="https://www.kortic.com/images/full/2000/1/berlin-potsdamer-platz.jpg"
  data-enable-background="https://www.kortic.com/images/blur/1200/0/berlin-potsdamer-platz.jpg"
  alt="image Berlin-Potsdamer-Platz"
  src="data:image/gif;base64,R0lGODlhIAAgAPAAAAAAACZFySH5BAEAAAEALAAAAAAgACAAAAIejI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC5sFADs="
  data-srcset="https://www.kortic.com/images/card/400/0/berlin-potsdamer-platz.jpg"
  />

Source Javascript $.lightbox

Ouvrir /javascript/lightbox.js

/****
 * Copyright (c) 2006 2020. Kortic - Anthony Ladeuil. Source kortic.com
 * licence Creative Commons CC BY-NC-SA 4.0 : Attribution - Pas d'utilsation commerciale - Partage dans les mêmes conditions
 * https://creativecommons.org/licenses/by-nc-sa/4.0/deed.fr
 ****/
 
 ;( (__) => {
  /*   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-full="//domaine.com/src_image.jpg" title="Lorem ipsum" ou data-title="Lorem ipsum">
    Valeurs obligatoires :
    - classe `lightbox`
    - attribut data-full (par défaut) modifiable pour gérer plusieurs lightbox dans une même page.
     La valeur de data-full est la source de l'image en grand format affiché dans la lightbox.
     [data-full] : 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.l18n` (voir source de la page) est nécessaire pour labelliser les attributs aria-
    Taper console.table(GLOBALS.l18n) 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]), 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';
  __.lightbox = function (attribute) {
    let blocs = __('.lightbox[data-'+ attribute +']').filter( function() {
        // filter for images in owl.carousel loop or others...
        return __(this).parents('.cloned').length === 0
      });
    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 = undefined;
        if(typeof GLOBALS === "object") {
          sentence = GLOBALS.l18n[wording] || undefined;
        }
        return sentence !== undefined ? sentence : wording + ' is not defined in GLOBALS.l10n';
      };
    }
    if(typeof GLOBALS === "undefined") {
      GLOBALS = {
        motion: function () {
          // return something to detect motion disabled (see in javascript site :-)
        }
      };
    }
    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;
        };
      }
      if(typeof __.scrollTop !== 'function') {
        __.scrollTop = (time) => {
          __('html, body').animate({
            scrollTop: (arguments[1] !== undefined ? arguments[1] : 0)
          }, (isNaN(time) ? 500 : time));
        };
      }
      lbx_timer = 0;
      __('#lightbox').doOnce( function() {
        this.remove();
      });
      let classContainer  = 'lightbox-container',
        classTrigger  = 'lightbox-trigger',
        lbx_      = __('<section/>', {'id':'lightbox', 'tabindex': '0', 'style': 'z-index:' + __.zindex()}),
        lbx_image    = __('<img/>', {'alt': '', 'src': placeholder, 'crossorigin': 'anonymous', 'decoding': 'async', 'id': 'lightbox_image'}),
        lbx_background  = __('<span/>', {'id':'lightbox_background'}),
        lbx_backdrop  = __('<span/>', {'id':'lightbox_backdrop'}),
        lbx_caption    = __('<div/>', {'id':'lightbox_caption', 'tabindex': '0'}),
        lbx_controls  = __('<div/>', {'id':'lightbox_control'}),
        lbx_first    = __('<button/>', {'id':'lightbox_first', 'aria-label': __.means('lightbox_first')}),
        lbx_prev    = __('<button/>', {'id':'lightbox_prev', 'aria-label': __.means('lightbox_prev')}),
        lbx_next    = __('<button/>', {'id':'lightbox_next', 'aria-label': __.means('lightbox_next')}),
        lbx_last    = __('<button/>', {'id':'lightbox_last', 'aria-label': __.means('lightbox_last')}),
        lbx_play    = __('<button/>', {'id':'lightbox_play', 'aria-label': __.means('lightbox_play')}),
        lbx_loading    = __('<div/>', {'id':'lightbox_loading'}),
        lbx_close    = __('<button/>', {'id': 'lightbox_close', 'aria-label': __.means('lightbox_close')}),
        lbx_next_image, lbx_prev_image,
        lbx_fadeout = () => {
          lbx_.fadeOut(GLOBALS.motion() ? 200 : 0);
          lbx_stop();
          __(lbx_.data('opener')).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;
        if(!parentContainer.hasClass(classContainer)) {
          parentContainer.addClass(classContainer);
          (__.inArray(parentContainer.css('position') , ['absolute', 'relative', 'fixed']) === -1) && parentContainer.addClass('position-relative');
          element_.after(
            __('<button/>', {
                'class': classTrigger
              })
              // only on Kortic for data-tag
              .attr({
                'data-tag': '{"type":"Button" ,"name": "LightBox"}',
                'aria-label': __.sprintf(__.means('lightbox_trigger_label'), (img_caption !== null ? img_caption : ''))
              })
              //
              .css({'z-index': 1})
              .append(__('<span/>', {
                'class': 'audible'
              }).text(__.sprintf(__.means('lightbox_trigger'), (img_caption !== null ? img_caption : ''))))
          );
        }
        element_.hasClass('lightbox-overlay-trigger') && parentContainer.addClass('lightbox-overlay');
        parentContainer.find('.' + classTrigger).on('click', (ev) => {
          ev.stopPropagation();
          lbx_.data('opener', __(document.activeElement));
          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"
          if(element_.data('link') !== undefined) {
            lbx_.removeClass('.linkable').find('.lightbox_link').first().remove();
            if(element_.data('link') !== false) {
              let lbx_link = __('<a/>', {'href': element_.data('link'), 'class': 'lightbox_link'});
              lbx_.addClass('linkable');
              lbx_caption.before( lbx_link.text(__.means('lightbox_link') ));
              lbx_link.on('click', () => {
                lbx_stop();
              });
            }
          }
          (lbx_.is(':hidden')) && (
            lbx_.fadeIn(GLOBALS.motion() ? 200 : 0),
            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;
          lbx_caption.empty();
          (img_caption !== null && img_caption.trim().length) && lbx_caption.prepend(__('<div/>').text(img_caption));
          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': 'assertive', 'aria-modal': 'true'}).focus();
            lbx_image.css({maxHeight: 'calc(100% - '+ ( lbx_close.outerHeight() + lbx_controls.outerHeight(true) ) + 'px)'});
            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') + ')'
            });
            let scrollToItem = __('[data-scroll="' + element_.data('scroll') + '"]');
            scrollToItem.length && __.scrollTop(0, scrollToItem.offset().top.toFixed(0) - element_.outerHeight());
            let focusable = lbx_.find(FOCUSABLE_SELECTORS);
            if (focusable.length) {
              let start_ = focusable[0],
                end_ = focusable[focusable.length - 1],
                focus_ = lbx_ ? lbx_ : start_;
              focus_.focus();
              lbx_.on('keydown', (event) => {
                if (event.keyCode === KEYCODES.TAB) {
                  (event.shiftKey && document.activeElement === start_) && (
                    event.preventDefault(),
                      end_.focus()
                  );
                  (!event.shiftKey && document.activeElement === end_) && (
                    event.preventDefault(),
                      start_.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();
      });
      if('ontouchstart' in window === false) {
        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();
          }
        });
      }
    }
  };
  DOM.document.ready( () => {
    __.lightbox('full');
  });
})(jQuery);

Source CSS

Ouvrir /styles/lightbox.css

/****
 * Copyright (c) 2006 2020. Kortic - Anthony Ladeuil. Source kortic.com
 * licence Creative Commons CC BY-NC-SA 4.0 : Attribution - Pas d'utilsation commerciale - Partage dans les mêmes conditions
 * https://creativecommons.org/licenses/by-nc-sa/4.0/deed.fr
 ****/
 
 .lightbox-trigger {
  background-color: black;
  color: white;
  border-radius: 0.1875rem;
  position: absolute !important;
  left: 50%;
  bottom: 0.125rem;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  height: 2rem;
  width: 2rem;
  background-image: url("/svg/lightbox.svg#i-zoomin-light");
  background-size: 1rem 1rem;
  background-position: center center;
  background-repeat: no-repeat;
}
@media (any-hover: hover) {
  .lightbox-overlay .lightbox-trigger {
    background-color: rgba(0,0,0,0.3) !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;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  .lightbox-container.lightbox-overlay:hover .lightbox-trigger, .lightbox-container .lightbox-trigger:focus {
    opacity: 1;
  }
  @media (prefers-reduced-motion: no-preference) {
    .lightbox-overlay .lightbox-trigger {
      -webkit-transition: opacity .2s ease-in-out;
      -moz-transition: opacity .2s ease-in-out;
      transition: opacity .2s ease-in-out;
    }
  }
}
#lightbox {
  --lightbox-baseline: 3.125rem;
  --lightbox-size-icons: 0.875rem;
  bottom: 0;
  color: white;
  display: none;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  background-color: rgb(0,0,0)
  outline: none;
}
#lightbox.loading {
  background-image: url('/svg/lightbox.svg#i-loader');
  background-position: center center;
  background-size: 2.5625rem 2.5625rem;
}
#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-left: 1.25rem;
  left: 0;
  position: absolute;
  right: var(--lightbox-baseline);
}
#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 div {
  line-height: var(--lightbox-baseline);
  padding-right: 1.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#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;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  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);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  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;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
#lightbox_close {
  background-image: url('/svg/lightbox.svg#i-close');
  background-position: center center;
  background-color: transparent !important;
  background-size: var(--lightbox-size-icons) var(--lightbox-size-icons);
  cursor: pointer;
  height: var(--lightbox-baseline);
  width: var(--lightbox-baseline);
  position: absolute;
  right: 0;
  top: 0;
}
.lightbox_download, .lightbox_link, #lightbox_control button {
  background-position: center center;
  height: var(--lightbox-baseline);
  width: var(--lightbox-baseline);
  cursor: pointer;
}
.lightbox_download {
  position: absolute;
  top: 0;
  left: 0;
  background-size: var(--lightbox-size-icons) var(--lightbox-size-icons);
  background-color: transparent !important;
}
.lightbox_link {
  position: absolute;
  top: 0;
  left: 0;
  background-size: var(--lightbox-size-icons) var(--lightbox-size-icons);
  color: transparent !important;
  white-space: nowrap;
  overflow: hidden;
  background-color: transparent !important;
}
.lightbox_download + .lightbox_link {
  left: var(--lightbox-baseline);
}
#lightbox_control button {
  background-size: var(--lightbox-size-icons) var(--lightbox-size-icons);
  vertical-align: bottom;
  background-color: transparent !important;
}
#lightbox_first {
  background-image: url('/svg/lightbox.svg#i-first');
}
#lightbox_prev {
  background-image: url('/svg/lightbox.svg#i-prev');
}
#lightbox_play.play {
  background-image: url('/svg/lightbox.svg#i-pause');
}
#lightbox_play:not(.play) {
  background-image: url('/svg/lightbox.svg#i-play');
}
#lightbox_next {
  background-image: url('/svg/lightbox.svg#i-next');
}
#lightbox_last {
  background-image: url('/svg/lightbox.svg#i-last');
}
.lightbox_download {
  background-image: url('/svg/lightbox.svg#i-download');
}
.lightbox_link {
  background-image: url('/svg/lightbox.svg#i-linkto');
}

Source SVG

Ouvrir /svg/lightbox.svg

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Lightbox icons — Kortic</title>
  <defs>
    <style>
      .fill-lightgray {
        fill: #e7e7e7
      }
      .fill-green {
        fill: #1ba39c
      }
      .stroke-lightgray {
        stroke: lightgray
      }
      .stroke-green {
        stroke: #1BA39C
      }
    </style>
  </defs>
  <symbol id="first" 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,0H5.66Z" class="fill-lightgray"/>
    <path d="M28.15,1.37,27.67.94a2.65,2.65,0,0,0-3.78.13l-.1.11L11,14a2.7,2.7,0,0,0-.21,3.79A2.08,2.08,0,0,0,11,18L23.79,30.82a2.67,2.67,0,0,0,3.77.34l.11-.1.48-.48Z" class="fill-lightgray"/>
  </symbol>
  <symbol id="prev" 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" class="fill-lightgray"/>
  </symbol>
  <symbol id="play" 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" class="fill-lightgray"/>
  </symbol>
  <symbol id="pause" viewBox="0 0 32 32">
    <circle cx="16" cy="16" r="16" class="fill-lightgray"/>
    <path d="M12,7.8a.83.83,0,0,0-.83.83V22.89a.83.83,0,0,0,.83.83h1.53a.83.83,0,0,0,.83-.83h0V8.63a.83.83,0,0,0-.83-.83Z"/>
    <path d="M18.51,7.8a.83.83,0,0,0-.83.83h0V22.89a.83.83,0,0,0,.83.83H20a.83.83,0,0,0,.83-.83h0V8.63A.83.83,0,0,0,20,7.8H18.51Z"/>
  </symbol>
  <symbol id="next" 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" class="fill-lightgray"/>
  </symbol>
  <symbol id="last" 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,0Z" class="fill-lightgray"/>
    <path d="M4,30.58l.48.48.11.1h0a2.68,2.68,0,0,0,3.76-.35L21.15,18a2.08,2.08,0,0,0,.21-.21A2.7,2.7,0,0,0,21.15,14L8.36,1.18l-.1-.11,0,0A2.65,2.65,0,0,0,4.48.94L4,1.37Z" class="fill-lightgray"/>
  </symbol>
  <symbol id="close" 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" class="fill-lightgray"/>
  </symbol>
  <symbol id="download" viewBox="0 0 32 32">
    <path d="M15,25.39h0a1.6,1.6,0,0,0,.38.23h0a1.83,1.83,0,0,0,.56.13h.2a1.58,1.58,0,0,0,.57-.13h0a1.46,1.46,0,0,0,.33-.22h0l.08-.08,6.39-6.39a1.58,1.58,0,0,0-.6-2.17,1.6,1.6,0,0,0-1.53,0L17.77,20.4V1.85a1.6,1.6,0,1,0-3.2,0V20.4l-3.66-3.67a1.61,1.61,0,0,0-2.26.13,1.63,1.63,0,0,0,0,2.13L15,25.39Z" class="fill-lightgray"/>
    <path d="M30.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" class="fill-lightgray"/>
  </symbol>
  <symbol id="linkto" 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" class="fill-lightgray"/>
  </symbol>
  <symbol id="zoomin-opacity" viewBox='0 0 32 32'>
    <rect x="10" y="12" width="12" height="8" opacity="0.3"/>
    <path d="M24.48,10.88l3.38-3.37,3.22,3.22a.54.54,0,0,0,.76,0,.55.55,0,0,0,.16-.38V2H23.64a.54.54,0,0,0-.53.54.52.52,0,0,0,.16.37l3.22,3.23L23.12,9.52A.54.54,0,0,0,23,10H9a.54.54,0,0,0-.14-.48L5.51,6.14,8.74,2.91a.51.51,0,0,0,.15-.37A.54.54,0,0,0,8.36,2H0v8.36a.55.55,0,0,0,.16.38.55.55,0,0,0,.76,0L4.14,7.51l3.38,3.37A.54.54,0,0,0,8,11V21a.54.54,0,0,0-.48.14L4.14,24.49.92,21.27a.55.55,0,0,0-.76,0,.55.55,0,0,0-.16.38V30H8.36a.54.54,0,0,0,.53-.54.51.51,0,0,0-.15-.37L5.51,25.86l3.37-3.38A.54.54,0,0,0,9,22H23a.54.54,0,0,0,.14.48l3.37,3.38-3.22,3.23a.52.52,0,0,0-.16.37.54.54,0,0,0,.53.54H32V21.65a.53.53,0,0,0-.16-.38.54.54,0,0,0-.76,0l-3.22,3.22-3.38-3.37A.54.54,0,0,0,24,21V11A.54.54,0,0,0,24.48,10.88ZM22,20H10V12H22Z" opacity="0.7"/>
  </symbol>
  <symbol id="zoomin" viewBox='0 0 32 32'>
    <rect x="10" y="12" width="12" height="8"/>
    <path d="M24.48,10.88l3.38-3.37,3.22,3.22a.54.54,0,0,0,.76,0,.55.55,0,0,0,.16-.38V2H23.64a.54.54,0,0,0-.53.54.52.52,0,0,0,.16.37l3.22,3.23L23.12,9.52A.54.54,0,0,0,23,10H9a.54.54,0,0,0-.14-.48L5.51,6.14,8.74,2.91a.51.51,0,0,0,.15-.37A.54.54,0,0,0,8.36,2H0v8.36a.55.55,0,0,0,.16.38.55.55,0,0,0,.76,0L4.14,7.51l3.38,3.37A.54.54,0,0,0,8,11V21a.54.54,0,0,0-.48.14L4.14,24.49.92,21.27a.55.55,0,0,0-.76,0,.55.55,0,0,0-.16.38V30H8.36a.54.54,0,0,0,.53-.54.51.51,0,0,0-.15-.37L5.51,25.86l3.37-3.38A.54.54,0,0,0,9,22H23a.54.54,0,0,0,.14.48l3.37,3.38-3.22,3.23a.52.52,0,0,0-.16.37.54.54,0,0,0,.53.54H32V21.65a.53.53,0,0,0-.16-.38.54.54,0,0,0-.76,0l-3.22,3.22-3.38-3.37A.54.54,0,0,0,24,21V11A.54.54,0,0,0,24.48,10.88ZM22,20H10V12H22Z"/>
  </symbol>
  <symbol id="diaporama" viewBox='0 0 32 32'>
    <path d="M13.12,19.89a.56.56,0,0,1-.56-.57V12.68a.56.56,0,0,1,.56-.57.48.48,0,0,1,.26.07L20,15.7a.56.56,0,0,1,.24.76.57.57,0,0,1-.26.25l-6.65,3.13A.64.64,0,0,1,13.12,19.89Zm.1-7v6.32l6.32-3Z"/>
    <path d="M30.67,25.33H1.33A1.33,1.33,0,0,1,0,24V8A1.33,1.33,0,0,1,1.33,6.67H30.67A1.33,1.33,0,0,1,32,8V24A1.33,1.33,0,0,1,30.67,25.33ZM1.33,7.56A.44.44,0,0,0,.89,8V24a.44.44,0,0,0,.44.44H30.67a.44.44,0,0,0,.44-.44V8a.44.44,0,0,0-.44-.44Z"/>
  </symbol>
  <symbol id="loader" viewBox="0 0 60 60">
    <circle cx="30" cy="30" r="26" class="stroke-lightgray" stroke-width="6" fill="none" />
    <circle cx="30" cy="30" r="26" class="stroke-green" stroke-width="6" stroke-linecap="round" fill="none">
      <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="3s" values="0 30 30;720 30 30" keyTimes="0;1" />
      <animate attributeName="stroke-dasharray" repeatCount="indefinite" dur="3s" values="58 130;58 130" keyTimes="0;1" />
    </circle>
  </symbol>
  <view id="i-first"         viewBox="10 10 32 32"/>
  <use xlink:href="#first"       x="10" y="10" width="32" height="32"/>
  <view id="i-prev"         viewBox="60 10 32 32"/>
  <use xlink:href="#prev"       x="60" y="10" width="32" height="32"/>
  <view id="i-play"         viewBox="110 10 32 32"/>
  <use xlink:href="#play"       x="110" y="10" width="32" height="32"/>
  <view id="i-pause"         viewBox="160 10 32 32"/>
  <use xlink:href="#pause"       x="160" y="10" width="32" height="32"/>
  <view id="i-next"         viewBox="210 10 32 32"/>
  <use xlink:href="#next"       x="210" y="10" width="32" height="32"/>
  <view id="i-last"         viewBox="260 10 32 32"/>
  <use xlink:href="#last"       x="260" y="10" width="32" height="32"/>
  <view id="i-close"         viewBox="310 10 32 32"/>
  <use xlink:href="#close"       x="310" y="10" width="32" height="32"/>
  <view id="i-download"       viewBox="360 10 32 32"/>
  <use xlink:href="#download"     x="360" y="10" width="32" height="32"/>
  <view id="i-linkto"       viewBox="410 10 32 32"/>
  <use xlink:href="#linkto"       x="410" y="10" width="32" height="32"/>
  <view id="i-zoomin"       viewBox="460 10 32 32"/>
  <use xlink:href="#zoomin-opacity"   x="460" y="10" width="32" height="32" class="fill-green" />
  <view id="i-zoomin-dark"     viewBox="510 10 32 32"/>
  <use xlink:href="#zoomin"       x="510" y="10" width="32" height="32" />
  <view id="i-zoomin-light"     viewBox="560 10 32 32"/>
  <use xlink:href="#zoomin"       x="560" y="10" width="32" height="32" class="fill-lightgray" />
  <view id="i-diaporama"       viewBox="610 10 32 32"/>
  <use xlink:href="#diaporama"     x="610" y="10" width="32" height="32" />
  <view id="i-diaporama-light"   viewBox="660 10 32 32"/>
  <use xlink:href="#diaporama"     x="660" y="10" width="32" height="32" class="fill-lightgray" />
  <view id="i-loader"       viewBox="10 100 32 32"/>
  <use xlink:href="#loader"       x="10" y="100" width="32" height="32"/>
</svg>

Utilisation des sources

Les sources de « Lightbox Responsive et A11Y » proposées par Kortic sont mises à disposition selon les termes de la licence Creative Commons CC BY-NC-SA 4.0 (licence Creative Commons CC BY-NC-SA 4.0 : Attribution - Pas d'utilsation commerciale - Partage dans les mêmes conditions).

Si vous souhaitez participer, même modestement, au maintien du site et pour son usage, vous pouvez cliquer sur le joli bouton…

Un petit sou avec ™