type media videos

web/themes/custom/eql/dist/assets/css/bundle.css

@@ -5656,6 +5656,7 @@ svg.ext {
   margin-left: 0;
 }
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images {
+  margin-top: 5rem;
   padding: 0;
   order: 7;
 }
@@ -5751,6 +5752,10 @@ content .page-node-type-ressource .type-les-projets-en-images.layout__region--to
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .field__items {
   display: none;
 }
+.page-node-type-ressource .block-region-third {
+  transform: translateY(-46rem);
+  margin-bottom: -46rem;
+}
 
 /*partials*/
 .layout-container {

web/themes/custom/eql/eql.info.yml

@@ -9,7 +9,7 @@ base theme: false
 libraries:
   - eql/global-css
   - eql/global-js
-  
+
 
 regions:
   header_top_left: 'Header top left'

web/themes/custom/eql/eql.libraries.yml

@@ -15,7 +15,7 @@ global-js:
 
 
 
+
  
   dependencies:
     - core/jquery
-    

web/themes/custom/eql/eql.theme

@@ -159,9 +159,26 @@ function eql_preprocess_layout__threecol_25_50_25(&$variables) {
           }
         }
       }
+    }
+
+       // Champ : field_type_de_media
+  if ($node->hasField('field_type_de_media') && !$node->get('field_type_de_media')->isEmpty()) {
+    $terms = $node->get('field_type_de_media')->referencedEntities();
+    foreach ($terms as $term) {
+      if ($term instanceof \Drupal\taxonomy\Entity\Term) {
+        $media_label = $term->label();
+        $css_class = 'type-media-' . \Drupal\Component\Utility\Html::cleanCssIdentifier(strtolower($media_label));
+
+        if (!isset($variables['region_attributes']['top'])) {
+          $variables['region_attributes']['top'] = new \Drupal\Core\Template\Attribute();
+        }
+
+        $variables['region_attributes']['top']->addClass($css_class);
+      }
     }
   }
 }
+}
 
 
 

web/themes/custom/eql/librairies/glightbox-master/.editorconfig

@@ -0,0 +1,16 @@
+# editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{json,yml}]
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

web/themes/custom/eql/librairies/glightbox-master/.eslintrc.json

@@ -0,0 +1,94 @@
+{
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "rules": {
+    "semi": ["warn", "always"],
+    "no-extra-semi": "error",
+    "brace-style": "error",
+    "curly": "error",
+    "eqeqeq": "off",
+    "block-spacing": "error",
+    "camelcase": "error",
+    "new-cap": "error",
+    "no-const-assign": "error",
+    "no-dupe-args": "error",
+    "no-dupe-class-members": "error",
+    "no-dupe-keys": "error",
+    "no-duplicate-imports": "error",
+    "no-empty-character-class": "error",
+    "no-empty": "off",
+    "no-eval": "error",
+    "no-ex-assign": "error",
+    "no-extend-native": "error",
+    "no-extra-boolean-cast": "error",
+    "no-extra-parens": ["warn", "functions"],
+    "no-fallthrough": "error",
+    "no-floating-decimal": "error",
+    "no-implied-eval": "error",
+    "no-inner-declarations": "error",
+    "no-lone-blocks": "error",
+    "no-mixed-spaces-and-tabs": "error",
+    "no-multi-spaces": "error",
+    "no-new-func": "error",
+    "no-new-object": "error",
+    "no-new-require": "error",
+    "no-new-symbol": "error",
+    "no-new-wrappers": "error",
+    "no-redeclare": "error",
+    "no-self-assign": "error",
+    "no-self-compare": "error",
+    "no-sequences": "error",
+    "no-shadow-restricted-names": "error",
+    "no-sparse-arrays": "error",
+    "no-template-curly-in-string": "error",
+    "no-this-before-super": "error",
+    "no-throw-literal": "error",
+    "no-undef-init": "error",
+    "no-unsafe-finally": "error",
+    "no-useless-constructor": "error",
+    "no-useless-rename": "error",
+    "no-unexpected-multiline": "error",
+    "no-whitespace-before-property": "error",
+    "space-before-blocks": "warn",
+    "new-parens": "error",
+    "space-in-parens": "error",
+    "space-unary-ops": "error",
+    "keyword-spacing": "warn",
+    "template-curly-spacing": "warn",
+    "use-isnan": "warn",
+    "constructor-super": "error",
+    "no-array-constructor": "error",
+    "quotes": ["error", "single"],
+    "comma-style": ["error", "last"],
+    "comma-dangle": [
+      "warn",
+      {
+        "arrays": "never",
+        "objects": "never",
+        "imports": "never",
+        "exports": "never",
+        "functions": "never"
+      }
+    ],
+    "space-before-function-paren": [
+      "off",
+      {
+        "anonymous": "always",
+        "named": "always",
+        "asyncArrow": "always"
+      }
+    ],
+    "func-call-spacing": ["error", "never"],
+    "key-spacing": ["error", { "beforeColon": false }],
+    "one-var": ["off"],
+    "operator-linebreak": "off",
+    "space-infix-ops": ["error"],
+    "comma-spacing": ["error", { "before": false, "after": true }],
+    "no-unused-vars": ["warn", { "vars": "local", "args": "none", "ignoreRestSiblings": false }]
+  }
+}

web/themes/custom/eql/librairies/glightbox-master/.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+custom: ['https://buy.stripe.com/9AQbK2gPC5o73Fm7sz']

web/themes/custom/eql/librairies/glightbox-master/.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,41 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**Are you able to reproduce the bug in the demo site**
+Yes|No.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Post the code you are using**
+Help me solve issues faster, if I can copy paste your code I can try to reproduce and fix the bug faster.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop:**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone:**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]

web/themes/custom/eql/librairies/glightbox-master/.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,23 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Important.**
+Before posting a feature request please make sure to search the closed issues, maybe the feature you want to implement has already been asked and denied for not providing a valid explanation or simply because it was something the user wanted for him or his project.
+
+**Please describe the feature you want to be implemented.**
+Please note: features should be something that everyone can use and not just something you need for your project.
+
+**Explain why the feature is useful**
+Describe some usage cases.
+
+**Have you seen it somewhere else?**
+If so please provide live examples, images, videos, etc. anything that help us understand the feature request
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

web/themes/custom/eql/librairies/glightbox-master/.github/stale.yml

@@ -0,0 +1,21 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 280
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 200
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - pinned
+  - security
+  - enhancement
+  - bug
+  - wontfix
+  - feature-request
+  - feature request
+# Label to use when marking an issue as stale
+staleLabel: wontfix
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false

web/themes/custom/eql/librairies/glightbox-master/.github/workflows/greetings.yml

@@ -0,0 +1,13 @@
+name: Greetings
+
+on: [pull_request]
+
+jobs:
+  greeting:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/first-interaction@v1
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        issue-message: ''
+        pr-message: 'Thank you for your contribution to this project, please make sure that you have read the CONTRIBUTING.md file and that your PR follows the guidelines mentioned there, if everything is ok we will review it as soon as posible'

web/themes/custom/eql/librairies/glightbox-master/.gitignore

@@ -0,0 +1,28 @@
+.idea
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+*.7z
+*.dmg
+*.gz
+*.iso
+*.jar
+*.rar
+*.tar
+*.zip
+/sitepsd
+/node_modules
+/release
+/release.zip
+/icons.zip
+/.vscode
+/.nova
+/dist/js/glightboxTest.min.js
+/dist/js/glightboxTest.js
+/src/js/glightboxTest.js
+sitepsd.psd
+package-lock.json

web/themes/custom/eql/librairies/glightbox-master/.lando.yml

@@ -0,0 +1,10 @@
+name: glightbox
+recipe: lemp
+config:
+  webroot: .
+services:
+  node:
+    type: node:14
+tooling:
+  npm:
+    service: node

web/themes/custom/eql/librairies/glightbox-master/.npmignore

@@ -0,0 +1,31 @@
+demo
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+*.7z
+*.dmg
+*.gz
+*.iso
+*.jar
+*.rar
+*.tar
+*.zip
+index.html
+/sitepsd
+/node_modules
+/release
+/release.zip
+/.vscode
+/.nova
+/.idea
+/dist/js/glightboxTest.min.js
+/dist/js/glightboxTest.js
+/src/js/glightboxTest.js
+sitepsd.psd
+package-lock.json
+icons.zip
+glightbox-master.zip

web/themes/custom/eql/librairies/glightbox-master/.prettierignore

@@ -0,0 +1 @@
+dist/*.js

web/themes/custom/eql/librairies/glightbox-master/.prettierrc.json

@@ -0,0 +1,31 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 4,
+  "printWidth": 220,
+  "proseWrap": "never",
+  "semi": true,
+  "singleQuote": true,
+  "jsxBracketSameLine": true,
+  "arrowParens": "always",
+  "htmlWhitespaceSensitivity": "ignore",
+  "overrides": [
+    {
+      "files": "*.json",
+      "options": {
+        "tabWidth": 2
+      }
+    },
+    {
+      "files": "*.md",
+      "options": {
+        "tabWidth": 2
+      }
+    },
+    {
+      "files": "*.yml",
+      "options": {
+        "tabWidth": 2
+      }
+    }
+  ]
+}

web/themes/custom/eql/librairies/glightbox-master/CHANGELOG.md

@@ -0,0 +1,241 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+
+## 3.3.1
+
+- Fixed: handle optional slide trigger node for max height calculation
+- Improved: types.d.ts mark some params as optional
+
+## 3.3.0
+
+- New: glightbox types #411
+- New: extend provider regex for ytb shorts #404
+- Fixed: Fix height calculation for lightbox with description and height set #426
+- Fixed: Don't set any font-family #424
+
+## 3.2.0
+
+- New: Support for videos without extension
+- Updated: Plyr to 3.6.12
+- Fixed: Inline content not centered on tablets #295
+- Fixed: Duplicated CSS properties #293
+- Fixed: YouTube video button not clickable on iOS #298
+
+## 3.1.0
+
+- New: Added Avif image support [@dramspro](https://github.com/biati-digital/glightbox/pull/266)
+- New: Add support for responsive images [@gaborbsd](https://github.com/biati-digital/glightbox/pull/264)
+- Updated: playsinline video attribute
+- Updated: url check to allow query parameters in video and images
+- Fixed: Image description/shadow off on mobile device #268
+- Fixed: You can zoom next slide image if current slide is not full height #261
+- Fixed: Draggable option not working with "setElements" #257
+
+## 3.0.9
+
+- Updated: Plyr to 3.6.8
+- Improved: JS error when the description attribute is an invalid selector
+- Fixed: Media Buttons Not responding on Android #233
+- Fixed: When touch is activated images swipe independently of their descriptions #238
+- Fixed: Width / Height data attributes do not work for image types #234
+- Fixed: Adds missing size unit of video description on resize #229
+
+## 3.0.8
+
+- New: Added Aria-hidden on all root elements except the glightbox-container
+- Fixed: Video in portrait mode is cropped
+- Fixed: Video always has maxWidth 900px because of hardcoded setting
+- Fixed: Removed explicit tabindex from navigation buttons
+
+## 3.0.7
+
+- Fixed: Lightbox playing incorrect video with multiple videos in gallery #187
+- Fixed: Draggable: false option not working #192
+- Fixed: Links not working inside inline content in mobile devices
+- Fixed: moreLength not working correctly on mobile if description has HTML
+- Added: Added plugins option for a future release that will allow extending GLightbox with plugins
+- Changed: Plyr fullscreen set to iosNative
+- Changed: Renamed skin option to theme for a future release that will allow creating themes like plugins, skin still works but will be replaced in a future relase
+
+## 3.0.6
+
+- Fixed: Events cleanup on `destroy()` method causes exception #175
+- Fixed: "data-title" Getting Overwritten when "title" is present #178
+- Fixed: IE 11 "Multiple definitions of a property not allowed in strict mode when bundling and minifying glightbox #155
+- Fixed: Cannot add new slides #166
+- Fixed: Video not playing on mobile #160
+- Improved: Plyr will only be loaded if it's already used in the site
+- New: Updated PLYR version to 3.6.3
+- New: Added new option "autofocusVideos" to enable all Plyr shortcuts for the video player
+- New: Improved events to use a generic way to access data
+- New: Improved code
+
+## 3.0.5
+
+- Fixed: IE11 does not support ".includes()"
+- Fixed: Clicking outside the content to close only works in specific areas
+- Fixed: openEffect / closeEffect no longer accepting "none"
+
+## 3.0.4
+
+- New: New way to listen for events, the old events will still work but will be removed in a future update. See the Events section in the README
+- New: Added new methods "slidePlayerPause" and "slidePlayerPlay" so in the future they will replace "playSlideVideo" and "stopSlideVideo" to provide support for audio slides in a future update
+- New: Add preventDefault via touchstart on lightbox to prevent navigation swipe
+- Fixed: e.getAttribute is not a function when there are no nodes in the gallery
+
+## 3.0.3
+
+- New: Option "dragAutoSnap" to control the mouse drag auto close or change slide
+- Fixed: Multiple galleries not working
+- Fixed: Setting the elements directly using an object triggered error
+
+## 3.0.2
+
+- New: Option "zoomable" to enable or disable zoomable images
+- New: Option "preload" to enable or disable preloading
+- New: Option "draggable" to go to prev/next slide by mouse dragging. Thanks to @Hirbod for the donation to make this happen
+- New: Option "dragToleranceX" Used with draggable. Number of pixels the user has to drag to go to prev or next slide
+- New: Option "dragToleranceY" Used with draggable. Number of pixels the user has to drag up or down to close the lightbox (Set 0 to disable vertical drag)
+- New: The code was refactored to make it easier to maintain
+- Fixed: data gallery stopped working
+- Fixed: iOS bug with Vimeo iframe when fullscreen button pressed
+- Fixed: "See more" link in the description throws an JS error when clicked
+- Fixed: Videos not resized vertically when window height was smaller than the window width
+
+## 3.0.1
+
+- Fixed: vertical scrolling of descriptions [@zothynine](https://github.com/biati-digital/glightbox/pull/134)
+- Fixed: CSS properties bug
+- Fixed: Passing null as selector throws an exception
+
+## 3.0.0
+
+- New: New methods to access player instances "getSlidePlayerInstance(index or node) and getAllPlayers"
+- New: Access player instance from afterSlideChange and beforeSlideChange"
+- New: New Method removeSlide(1) remove slide at the specified index, it works even when the lightbox is open
+- New: insertSlide now works even when the lightbox is open
+- New: Added Accesibility features to slides
+- New: Enabled touchNavigation for all devices that support touch events and not only mobile devices
+- Changed: afterSlideLoad and beforeSlideLoad methods to follow the same variables as afterSlideChange, beforeSlideChange
+- Fixed: Calling `destroy()` throws an error when modal is not open
+- Fixed: Navigation not disabled correctly when only one slide
+
+## 2.0.6
+
+- New: Now you can define width and height as 900px, 95%, 100vw, 100vh so you can have full screen content
+- New: Now you can define custom html or a node in the slide data to append it to the slide (view the API section)
+- New: Now you can use any attribute as selector for example '.glightbox' or 'data-glightbox' or '\*[data-glightbox]'
+- New: Method "openAt" you can open the lightbox at specific index eg: lightbox.openAt(2);
+- New: Method "insertSlide" that allows you to append a slide at specified index
+- Fixed Tab Key Doesn't Work on Form Within GLightbox Inline Content
+- Fixed Scrolling Description triggers closing the lightbox on touch devices
+- Fixed Page jumps depending on page scrollbar
+- Fixed Overriding default plyr settings does not merge correctly
+- Fixed fullscreen video button on ios
+- Moved plyr.ratio to plyr.config.ratio
+
+## 2.0.5
+
+- New: Loop, renamed loopAtEnd to loop and now works in both directions
+- New: added touchFollowAxis, for mobile when dragging the media will follow the same axis, set to false to move media as you wish
+- New: added jpe format
+- Fixed .mov videos not recognized as videos
+
+## 2.0.4
+
+- Fixed some errors when zooming and dragging images
+- Fixed description position not respected when configured globally
+- Fixed local videos not resized correctly when entered fullscreen
+
+## 2.0.3
+
+- New: Zooming images. Now you can zoom images on desktop if image is too large
+- New: Now you can also define the slide description using the content of any div you want.
+- New: Replaced png icons with svg and added options to customize them.
+- Fixed responsive videos not resizing correctly when resizing the window vertically
+- Fixed responsive images not resizing correctly if they have description and the window height is lower that the slide height
+- Fixed youtube video not detected correctly for urls like youtube(-nocookie).com/embed/...
+
+## 2.0.2
+
+- New: [Plyr player](https://plyr.io/), we have changed to this player so that way only one api is managed instead of 3
+- New: Added tabindex accesibility to loop the controls with the tab key
+- New: Inside inline content you can close the lightbox by adding the class **gtrigger-close** to any element
+- Fixed StartAt not taking specified index
+- Removed JWPlayer because that player implemented some restrictions unless you pay for a license
+- Improved mobile touch events, swipe, move, zoom, etc.
+- Changed: Youtube now by default uses youtube-nocookie.com, you can enable cookies in the config with youtube.nocookie to false
+- Removed option videosHeight. The height is automatic depending the video width and ratio.
+- Removed Gulp and replaced for pure nodejs scripts
+- Improved documentation
+
+## 2.0.1
+
+- Fixed Mobile navigation
+- Fixed slide width for external sources
+
+## 2.0.0
+
+- New: Delegated permissions to cross-origin iframes (for the new browsers autoplay restrictions)
+- Fixed youtube, vimeo autoplay when changing slides
+- Fixed lightbox won't fit screen with description
+- Fixed Removed global body variable that was causing some problems
+
+## 1.0.9
+
+- Added svg to source types so it can be displayed as an image [@tuomassalo](https://github.com/mcstudios/glightbox/pull/40)
+- Added contributing file
+- Updated dependencies [@tuomassalo](https://github.com/mcstudios/glightbox/pull/40).
+- Removed demo folder from npm
+
+## 1.0.8
+
+- New: You can define each slide option in a different data attribute (data-title="example" data-description="...")
+- Fixed youtube and vimeo autoplay when opened for the first time
+- Fixed global slide params not working
+- Fixed some issues on IE11
+- Fixed using characters : or ; in slide description
+
+## 1.0.7
+
+- New: Added reload method, useful when injecting content with ajax, cloning nodes, etc.
+- Fixed closeButton setting not removing the element
+- Fixed video not displayed on mobile devices
+
+## 1.0.6
+
+- New: Now you can set individual width and height for each slide with inlines or iframes.
+- New: Now you can set individual source types for each slide ('type': 'image' | 'iframe' | 'video' | 'inline' | 'external).
+- New: Published on npm
+- New: Published on bower
+- Fixed afterSlideLoad only triggered one time for all the slides
+- Fixed a small space between the image and description when is set to top or bottom
+
+## 1.0.5
+
+- New: Added none as a new option to disable open, close and slide animations
+- New: Added new options (touchNavigation, keyboardNavigation, closeOnOutsideClick) to enable or disable user interaction
+- Fixed open and close effect not taking a custom animation
+- Fixed an error when calling the destroy method and no videos were present in the slider
+
+## 1.0.4
+
+- Improved the open method so it can be called without duplicating the structure and events
+- New: The original node is passed to events like beforeSlideChange, afterSlideChange, etc.
+
+## 1.0.3
+
+- New: Added option moreLength to control the number of characters in the description for mobile devices
+
+## 1.0.2
+
+- Fixed instance not returned and unable to call public methods
+
+## 1.0.1
+
+- Fixed large images not displayed correctly
+
+## 1.0.0
+
+- Initial release

web/themes/custom/eql/librairies/glightbox-master/CONTRIBUTING.md

@@ -0,0 +1,29 @@
+# Contributing to GLightbox.js
+
+Please read these guidelines before contributing code.
+
+## :nut_and_bolt: Setting up the development environment
+
+- Fork and clone the repository
+- `npm install`
+- `npm run watch`
+- To update js and css files, use the `src` folder: src/js/glightbox.js and src/postcss/glightbox.css These files will be compiled automatically with every change to the `dist` folder (do not modify the dist files directly)
+
+## :bug: Fixing a Bug
+
+When fixing a bug please make sure to test it in several browsers including ie11. If you are not able to do so, mention that in a PR comment, so other contributors can do it. once your code is working please run the following command "eslint src/js" to verify that your code is following the same coding standards
+
+## :tada: Proposing a Change
+
+When implementing a feature please create an issue first explaining your idea and asking whether there's need for such a feature. Remember the script's core philosophy is to stay simple and minimal, doing one thing and doing it right.
+
+## :pencil: Before you open a Pull Request
+
+- Follow the same coding style.
+- Run eslint to verify your code, run the following command "eslint src/js" and fix any error you find in your code
+- **DO NOT** commit changes in the dist directory, this files are created automatically.
+- Follow Git best practices (especially use meaningful commit messages).
+- Describe thoroughly you work in a PR comment.
+- Be patient and understanding. It's a side project, done in free time.
+
+Thank you to everyone who has contributed to GLightbox.js!

web/themes/custom/eql/librairies/glightbox-master/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Biati Digital https://www.biati.digital
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

web/themes/custom/eql/librairies/glightbox-master/README.md

@@ -0,0 +1,705 @@
+# GLightbox
+
+GLightbox is a pure javascript lightbox. It can display images, iframes, inline content and videos with optional autoplay for YouTube, Vimeo and even self hosted videos.
+
+## Features
+
+- **Small** - only 11KB Gzipped
+- **Fast and Responsive** - works with any screen size
+- **Gallery Support** - Create multiple galleries
+- **Responsive Images Support** - Let the browser use the optimal image for the current screen resolution
+- **Video Support** - Youtube, Vimeo and self hosted videos with autoplay
+- **Inline content support** - display any inline content
+- **Iframe support** - need to embed an iframe? no problem
+- **Keyboard Navigation** - esc, arrows keys, tab and enter is all you need
+- **Touch Navigation** - mobile touch events
+- **Zoomable images** - zoom and drag images on mobile and desktop
+- **API** - control the lightbox with the provided methods
+- **Themeable** - create your skin or modify the animations with some minor css changes
+
+## Live Demo
+
+You can check the live demo [right here](https://biati-digital.github.io/glightbox/)
+
+## Usage
+
+```bash
+$ npm install glightbox
+# OR
+$ yarn add glightbox
+# OR
+$ bower install glightbox
+```
+
+```javascript
+// Using ESM specification
+import '/path/to/glightbox.js';
+
+// Using a bundler like webpack
+import GLightbox from 'glightbox';
+```
+
+Or manually download and link `glightbox.min.js` in your HTML:
+
+```html
+<link rel="stylesheet" href="dist/css/glightbox.css" />
+<script src="dist/js/glightbox.min.js"></script>
+
+<!-- USING A CDN -->
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
+<script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
+
+<script type="text/javascript">
+  const lightbox = GLightbox({ ...options });
+</script>
+
+<!-- USING ES MODULES -->
+
+<script type="module">
+  import 'https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js';
+
+  const lightbox = GLightbox({ ...options });
+</script>
+```
+
+## Examples
+
+```html
+<!-- Simple image -->
+<a href="large.jpg" class="glightbox">
+  <img src="small.jpg" alt="image" />
+</a>
+
+<!-- Video -->
+<a href="https://vimeo.com/115041822" class="glightbox2">
+  <img src="small.jpg" alt="image" />
+</a>
+
+<!-- Gallery -->
+<a href="large.jpg" class="glightbox3" data-gallery="gallery1">
+  <img src="small.jpg" alt="image" />
+</a>
+<a href="video.mp4" class="glightbox3" data-gallery="gallery1">
+  <img src="small.jpg" alt="image" />
+</a>
+
+<!-- Simple Description -->
+<a href="large.jpg" class="glightbox4" data-glightbox="title: My title; description: this is the slide description">
+  <img src="small.jpg" alt="image" />
+</a>
+
+<!-- Advanced Description -->
+<a href="large.jpg" class="glightbox5" data-glightbox="title: My title; description: .custom-desc1">
+  <img src="small.jpg" alt="image" />
+</a>
+
+<div class="glightbox-desc custom-desc1">
+  <p>The content of this div will be used as the slide description</p>
+  <p>You can add links and any HTML you want</p>
+</div>
+
+<!-- URL with no extension -->
+<a href="https://picsum.photos/1200/800" data-glightbox="type: image">
+  <img src="small.jpg" alt="image" />
+</a>
+<!-- OR using multiple data attributes -->
+<a href="https://picsum.photos/1200/800" data-type="image">
+  <img src="small.jpg" alt="image" />
+</a>
+
+<!-- Using responsive images: specify sizes and srcset through data attributes in the
+     same way you would with the img tag.
+     See: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images -->
+<a href="default.jpg" class="glightbox6" data-title="Responsive example"
+data-description="Your browser will choose the optimal image for the resolution"
+data-sizes="(max-width: 600px) 480px, 800px"
+data-srcset="img480.jpg 480w, img800.jpg 800w">
+  <img src="small.jpg" alt="image" />
+</a>
+```
+
+## Slide Options
+
+You can specify some options to each individual slide, the available options are:
+
+- title
+- alt
+- description
+- descPosition
+- type
+- effect
+- width
+- height
+- zoomable
+- draggable
+
+```html
+<!-- One line config -->
+<a href="large.jpg" data-glightbox="title: Your title; description: description here; descPosition: left; type: image; effect: fade; width: 900px; height: auto; zoomable: true; draggable: true;"></a>
+
+<!-- Multiple data attributes / You can use the options as separated data attributes -->
+<a
+  href="large.jpg"
+  data-title="My title"
+  data-description="description here"
+  data-desc-position="right"
+  data-type="image"
+  data-effect="fade"
+  data-width="900px"
+  data-height="auto"
+  data-zoomable="true"
+  data-draggable="true"
+></a>
+```
+
+## Lightbox Options
+
+Example use of the options.
+
+```javascript
+const lightbox = GLightbox({
+    touchNavigation: true,
+    loop: true,
+    autoplayVideos: true
+});
+
+// Instead of using a selector, define the gallery elements
+const myGallery = GLightbox({
+    elements: [
+        {
+            'href': 'https://picsum.photos/1200/800',
+            'type': 'image',
+            'title': 'My Title',
+            'description': 'Example',
+        },
+        {
+            'href': 'https://picsum.photos/1200/800',
+            'type': 'image',
+            'alt': 'image text alternatives'
+        },
+        {
+            'href': 'https://www.youtube.com/watch?v=Ga6RYejo6Hk',
+            'type': 'video',
+            'source': 'youtube', //vimeo, youtube or local
+            'width': 900,
+        },
+        {
+            'content': '<p>This will append some html inside the slide</p>' // read more in the API section
+        },
+        {
+            'content': document.getElementById('inline-example') // this will append a node inside the slide
+        },
+    ],
+    autoplayVideos: true,
+});
+myGallery.open();
+
+// If later you need to modify the elements you can use setElements
+myGallery.setElements([...]);
+```
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| selector | string | `.glightbox` | Name of the selector for example '.glightbox' or 'data-glightbox' or '\*[data-glightbox]' |
+| elements | array | `null` | Instead of passing a selector you can pass all the items that you want in the gallery. |
+| skin | string | `clean` | Name of the skin, it will add a class to the lightbox so you can style it with css. |
+| openEffect | string | `zoom` | Name of the effect on lightbox open. (zoom, fade, none) |
+| closeEffect | string | `zoom` | Name of the effect on lightbox close. (zoom, fade, none) |
+| slideEffect | string | `slide` | Name of the effect on slide change. (slide, fade, zoom, none) |
+| moreText | string | `See more` | More text for descriptions on mobile devices. |
+| moreLength | number | `60` | Number of characters to display on the description before adding the moreText link (only for mobiles), if 0 it will display the entire description. |
+| closeButton | boolean | `true` | Show or hide the close button. |
+| touchNavigation | boolean | `true` | Enable or disable the touch navigation (swipe). |
+| touchFollowAxis | boolean | `true` | Image follow axis when dragging on mobile. |
+| keyboardNavigation | boolean | `true` | Enable or disable the keyboard navigation. |
+| closeOnOutsideClick | boolean | `true` | Close the lightbox when clicking outside the active slide. |
+| startAt | number | `0` | Start lightbox at defined index. |
+| width | number | `900px` | Default width for inline elements and iframes, you can define a specific size on each slide. You can use any unit for example 90% or 100vw for full width |
+| height | number | `506px` | Default height for inline elements and iframes, you can define a specific size on each slide.You can use any unit for example 90% or 100vh **For inline elements you can set the height to auto**. |
+| videosWidth | number | `960px` | Default width for videos. Videos are responsive so height is not required. The width can be in px % or even vw for example, 500px, 90% or 100vw for full width videos |
+| descPosition | string | `bottom` | Global position for slides description, you can define a specific position on each slide (bottom, top, left, right). |
+| loop | boolean | `false` | Loop slides on end. |
+| zoomable | boolean | `true` | Enable or disable zoomable images you can also use data-zoomable="false" on individual nodes. |
+| draggable | boolean | `true` | Enable or disable mouse drag to go prev and next slide (only images and inline content), you can also use data-draggable="false" on individual nodes. |
+| dragToleranceX | number | `40` | Used with draggable. Number of pixels the user has to drag to go to prev or next slide. |
+| dragToleranceY | number | `65` | Used with draggable. Number of pixels the user has to drag up or down to close the lightbox (Set 0 to disable vertical drag). |
+| dragAutoSnap | boolean | `false` | If true the slide will automatically change to prev/next or close if dragToleranceX or dragToleranceY is reached, otherwise it will wait till the mouse is released. |
+| preload | boolean | `true` | Enable or disable preloading. |
+| svg | object | `{}` | Set your own svg icons. |
+| cssEfects | object | 'See animations' | Define or adjust lightbox animations. See the Animations section in the README. |
+| lightboxHTML | string | 'See themes' | You can completely change the html of GLightbox. See the Themeable section in the README. |
+| slideHTML | string | 'See themes' | You can completely change the html of the individual slide. See the Themeable section in the README. |
+| autoplayVideos | boolean | `true` | Autoplay videos on open. |
+| autofocusVideos | boolean | `false` | If true video will be focused on play to allow keyboard sortcuts for the player, this will deactivate prev and next arrows to change slide so use it only if you know what you are doing. |
+| plyr | object | `{}` | [View video player options.](#video-player) |
+
+## Events
+
+You can listen for events using your GLightbox instance (see example under the table). You can use the on() API method or once().
+
+```javascript
+const lightbox = GLightbox();
+lightbox.on('open', () => {
+  // Do something
+});
+
+lightbox.once('slide_changed', () => {
+  // Do something just one time
+});
+```
+
+| Event Type          | Description                                                                                                                  |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| open                | Provide a function when the lightbox is opened.                                                                              |
+| close               | Provide a function when the lightbox is closed.                                                                              |
+| slide_before_change | Trigger a function before the slide is changed.                                                                              |
+| slide_changed       | Trigger a function after the slide is changed.                                                                               |
+| slide_before_load   | Trigger a function before a slide is loaded for the first time, the function will only be called once                        |
+| slide_after_load    | Trigger a function after a slide is loaded and it's content is set for the first time, the function will only be called once |
+| slide_inserted      | Trigger a function after a slide is inserted using insertSlide.                                                              |
+| slide_removed       | Trigger a function after a slide is removed`                                                                                 |
+
+```javascript
+const lightbox = GLightbox();
+lightbox.on('slide_before_change', ({ prev, current }) => {
+  console.log('Prev slide', prev);
+  console.log('Current slide', current);
+
+  // Prev and current are objects that contain the following data
+  const { slideIndex, slideNode, slideConfig, player, trigger } = current;
+
+  // slideIndex - the slide index
+  // slideNode - the node you can modify
+  // slideConfig - will contain the configuration of the slide like title, description, etc.
+  // player - the slide player if it exists otherwise will return false
+  // trigger - this will contain the element that triggers this slide, this can be a link, a button, etc in your HTML, it can be null if the elements in the gallery were set dinamically
+});
+
+lightbox.on('slide_changed', ({ prev, current }) => {
+  console.log('Prev slide', prev);
+  console.log('Current slide', current);
+
+  // Prev and current are objects that contain the following data
+  const { slideIndex, slideNode, slideConfig, player, trigger } = current;
+
+  // slideIndex - the slide index
+  // slideNode - the node you can modify
+  // slideConfig - will contain the configuration of the slide like title, description, etc.
+  // player - the slide player if it exists otherwise will return false
+  // trigger - this will contain the element that triggers this slide, this can be a link, a button, etc in your HTML, it can be null if the elements in the gallery were set dinamically
+
+  if (player) {
+    if (!player.ready) {
+      // If player is not ready
+      player.on('ready', (event) => {
+        // Do something when video is ready
+      });
+    }
+
+    player.on('play', (event) => {
+      console.log('Started play');
+    });
+
+    player.on('volumechange', (event) => {
+      console.log('Volume change');
+    });
+
+    player.on('ended', (event) => {
+      console.log('Video ended');
+    });
+  }
+});
+
+// Useful to modify the slide
+// before it's content is added
+lightbox.on('slide_before_load', (data) => {
+  // data is an object that contain the following
+  const { slideIndex, slideNode, slideConfig, player, trigger } = data;
+
+  // slideIndex - the slide index
+  // slideNode - the node you can modify
+  // slideConfig - will contain the configuration of the slide like title, description, etc.
+  // player - the slide player if it exists otherwise will return false
+  // trigger - this will contain the element that triggers this slide, this can be a link, a button, etc in your HTML, it can be null if the elements in the gallery were set dinamically
+});
+
+// Useful to execute scripts that depends
+// on the slide to be ready with all it's content
+// and already has a height
+// data will contain all the info about the slide
+lightbox.on('slide_after_load', (data) => {
+  // data is an object that contain the following
+  const { slideIndex, slideNode, slideConfig, player, trigger } = data;
+
+  // slideIndex - the slide index
+  // slideNode - the node you can modify
+  // slideConfig - will contain the configuration of the slide like title, description, etc.
+  // player - the slide player if it exists otherwise will return false
+  // trigger - this will contain the element that triggers this slide, this can be a link, a button, etc in your HTML, it can be null if the elements in the gallery were set dinamically
+});
+
+// Trigger a function when a slide is inserted
+lightbox.on('slide_inserted', (data) => {
+  // data is an object that contain the following
+  const { slideIndex, slideNode, slideConfig, player, trigger } = data;
+
+  // slideIndex - the slide index
+  // slideNode - the node you can modify
+  // slideConfig - will contain the configuration of the slide like title, description, etc.
+  // player - the slide player if it exists otherwise will return false
+  // trigger - null
+});
+
+// Trigger a function when a slide is removed
+lightbox.on('slide_removed', (index) => {
+  // index is the position of the element in the gallery
+});
+```
+
+## Video player
+
+GLightbox includes "[Plyr](https://plyr.io/)" the best player out there, you can pass any Plyr option to the player, view all available options here [Plyr options](https://github.com/sampotts/plyr). GLightbox will only inject the player library if required and only when the lightbox is opened.
+
+**Internet Explorer 11. If you need support for this browser you need to set the js url to use the polyfilled version. This is not the default because IE11 is ancient and we need to let it die.**
+
+### Autoplay for mobile/tablet
+
+Please note, autoplay is blocked in some browsers, there’s nothing we can do to change that unfortunately, the browser will decide if your video can be autoplayed. Please do not post issues about this, instead inform yourself about this topic:
+
+- [https://webkit.org/blog/6784/new-video-policies-for-ios/](https://webkit.org/blog/6784/new-video-policies-for-ios/)
+- [https://developers.google.com/web/updates/2017/09/autoplay-policy-changes](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)
+- [https://hacks.mozilla.org/2019/02/firefox-66-to-block-automatically-playing-audible-video-and-audio/](https://hacks.mozilla.org/2019/02/firefox-66-to-block-automatically-playing-audible-video-and-audio/)
+
+they decide if a video can be autoplayed based in a few rules
+
+```
+plyr: {
+    js: 'https://cdn.plyr.io/3.6.2/plyr.polyfilled.js',
+    ....
+```
+
+```javascript
+const lightbox = GLightbox({
+  plyr: {
+    css: 'https://cdn.plyr.io/3.5.6/plyr.css', // Default not required to include
+    js: 'https://cdn.plyr.io/3.5.6/plyr.js', // Default not required to include
+    config: {
+      ratio: '16:9', // or '4:3'
+      muted: false,
+      hideControls: true,
+      youtube: {
+        noCookie: true,
+        rel: 0,
+        showinfo: 0,
+        iv_load_policy: 3
+      },
+      vimeo: {
+        byline: false,
+        portrait: false,
+        title: false,
+        speed: true,
+        transparent: false
+      }
+    }
+  }
+});
+```
+
+## API
+
+There are methods, setters and getters on a GLightbox object. The easiest way to access the GLightbox object is to set the return value from your call to a variable. For example:
+
+```javascript
+const lightbox = GLightbox({ ...options });
+```
+
+## Methods
+
+Example method use:
+
+```javascript
+lightbox.nextSlide(); // Go to next slide
+lightbox.close(); // Close the lightbox
+```
+
+| Option                 | Parameters         | Description                                                                |
+| ---------------------- | ------------------ | -------------------------------------------------------------------------- |
+| open                   | `node`             | Open the lightbox, you can optionally pass a node.                         |
+| openAt                 | `number`           | Open at specific index.                                                    |
+| close                  | `-`                | Close the lightbox.                                                        |
+| reload                 | `-`                | Reload the lightbox, after inserting content with ajax.                    |
+| destroy                | `-`                | Destroy and remove all attached events.                                    |
+| prevSlide              | `-`                | Go to the previous slide.                                                  |
+| nextSlide              | `-`                | Go to the next slide.                                                      |
+| goToSlide              | `number`           | Index of the slide.                                                        |
+| insertSlide            | `object, index`    | Insert a slide at the specified index.                                     |
+| removeSlide            | `index`            | Remove slide at the specified index.                                       |
+| getActiveSlide         | `-`                | Get active slide. It will return the active node.                          |
+| getActiveSlideIndex    | `-`                | Get active slide. It will return the active slide index.                   |
+| slidePlayerPlay        | `number`           | Play video in the specified slide.                                         |
+| slidePlayerPause       | `number`           | Pause video in the specified slide.                                        |
+| getSlidePlayerInstance | `node, index`      | Get the player instance of the specified slide.                            |
+| getAllPlayers          | `-`                | Get all players instance.                                                  |
+| setElements            | `[]`               | Update the lightbox gallery elements.                                      |
+| on                     | `string, function` | Set an event listener. See Events section                                  |
+| once                   | `string, function` | Set an event listener that will be triggered only once. See Events section |
+
+```javascript
+// Example set custom gallery items
+// This overwrites all the items in the gallery
+lightbox.setElements([
+  {
+    'href': 'https://picsum.photos/1200/800',
+    'type': 'image' // Type is only required if GLightbox fails to know what kind of content should display
+  },
+  {
+    'href': 'https://www.youtube.com/watch?v=Ga6RYejo6Hk',
+    'type': 'video', // Type is only required if GLightbox fails to know what kind of content should display
+    'width': '900px',
+  },
+  {
+    'content': '<p>some html to append in the slide</p>',
+    'width': '900px',
+  }
+]);
+
+
+// Insert a single slide at the end of all the items,
+lightbox.insertSlide({
+    href: 'video url...',
+    width: '90vw'
+});
+
+// Insert a single slide at index 2 or pass 0 to add it at the start
+lightbox.insertSlide({
+    href: 'video url...',
+    width: '90vw'
+}, 2);
+
+// You can insert a slide with a defined html
+lightbox.insertSlide({
+    content: '<p>some html to append in the slide</p>',
+    width: '90vw'
+}, 2);
+
+// Or if you prefer you can pass a node
+// and it will be inserted in the slide
+lightbox.insertSlide({
+    content: document.getElementById('inline-example'),
+    width: '90vw'
+}, 2);
+
+// Remove the slide at index 2
+lightbox.removeSlide(2);
+
+// Open the lightbox
+lightbox.open();
+
+// You can also open the lightbox at a specific index
+lightbox.openAt(2);
+
+// So imagine that you are making an ajax request that returns some html
+// You can create an empty instance and append the content once is returned
+
+const ajaxExample = GLightbox({ selector: null }); // or you can set the selector empty selector: ''
+
+doAjaxCall({...}).then(response => {
+    ajaxExample.insertSlide({
+        width: '500px',
+        content: response.html
+    });
+    ajaxExample.open();
+})
+
+// Or you could use the set elements method to empty all the slides if any
+
+doAjaxCall({...}).then(response => {
+    ajaxExample.setElements([
+      {
+        content: response.html
+      }
+    ]);
+    ajaxExample.open();
+})
+
+```
+
+## Animations
+
+Animations are created with CSS, each effect has an in and out value and they are used to attach the correct classes to the node.
+
+For example if you are using
+
+```javascript
+const glightbox = GLightbox({
+  openEffect: 'zoom',
+  closeEffect: 'fade',
+  cssEfects: {
+    // This are some of the animations included, no need to overwrite
+    fade: { in: 'fadeIn', out: 'fadeOut' },
+    zoom: { in: 'zoomIn', out: 'zoomOut' }
+  }
+});
+```
+
+The open effect will use cssEfects.zoom.in and will add the class gzoomIn, if you take a look at the CSS you'll see:
+
+```javascript
+.gzoomIn {
+    animation: gzoomIn .5s ease;
+}
+
+@keyframes gzoomIn {
+    from {
+        opacity: 0;
+        transform: scale3d(.3, .3, .3);
+    }
+    to {
+        opacity: 1;
+    }
+}
+```
+
+### Adding a custom animation
+
+You can create any animation you want, you can find some inspiration in the Animate.css library, for example you can add the bounce animation like this:
+
+```javascript
+const glightbox = GLightbox({
+  openEffect: 'bounce', // Define that we want the bounce animation on open
+  cssEfects: {
+    // register our new animation
+    bounce: { in: 'bounceIn', out: 'bounceOut' }
+  }
+});
+```
+
+```css
+/*A g will be appended to the animation name so bounceIn will become gbounceIn */
+.gbounceIn {
+  animation: bounceIn 1.3s ease;
+}
+
+@keyframes bounceIn {
+  from,
+  20%,
+  40%,
+  60%,
+  80%,
+  to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  20% {
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+
+  60% {
+    opacity: 1;
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    transform: scale3d(0.97, 0.97, 0.97);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+}
+```
+
+## Themeable
+
+You can completely customize the structure of GLightbox and use CSS to change any part you want.
+
+```javascript
+const customLightboxHTML = `<div id="glightbox-body" class="glightbox-container">
+    <div class="gloader visible"></div>
+    <div class="goverlay"></div>
+    <div class="gcontainer">
+    <div id="glightbox-slider" class="gslider"></div>
+    <button class="gnext gbtn" tabindex="0" aria-label="Next" data-customattribute="example">{nextSVG}</button>
+    <button class="gprev gbtn" tabindex="1" aria-label="Previous">{prevSVG}</button>
+    <button class="gclose gbtn" tabindex="2" aria-label="Close">{closeSVG}</button>
+</div>
+</div>`;
+
+let customSlideHTML = `<div class="gslide">
+    <div class="gslide-inner-content">
+        <div class="ginner-container">
+            <div class="gslide-media">
+            </div>
+            <div class="gslide-description">
+                <div class="gdesc-inner">
+                    <h4 class="gslide-title"></h4>
+                    <div class="gslide-desc"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>`;
+
+const glightbox = GLightbox({
+  lightboxHTML: customLightboxHTML,
+  slideHTML: customSlideHTML,
+  skin: 'supercool'
+});
+```
+
+You can also define a skin name and the lightbox will append the class name "glightbox-supercool" so you can customize it with CSS, this will leave a barebones structure so you can change the buttons appearance, etc.
+
+## Development
+
+```bash
+$ npm install
+$ npm run watch
+```
+
+## Browser Support
+
+GLightbox was tested in the following browsers.
+
+- Safari
+- Mobile Safari
+- Opera
+- Edge
+- Firefox
+- Internet Explorer 11
+
+It will work in any browser that supports CSS Flexbox
+
+## Contributing
+
+Feel free to report any issues! If you wish to contribute by fixing a bug or implementing a new feature, please first read the [CONTRIBUTING](./CONTRIBUTING.md) guide.
+
+## Donate
+
+If you find this code useful, please consider a donation to keep this project growing, any amount is appreciated.
+
+[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://paypal.me/bdigital9816/5usd)
+
+## Support
+
+We only provide support for bugs and feature requests, so please only post issues about this two topics, if you need help implementing GLightbox or you are just starting with HTML/CSS/Javascript please use stackoverlow, you'll be able to find more help there. This will help us to keep the issues related to the library and solve issues faster.
+
+## Changelog
+
+#### Latest version vundefined
+
+See the [CHANGELOG.md](CHANGELOG.md) file for details
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details

web/themes/custom/eql/librairies/glightbox-master/bower.json

@@ -0,0 +1,29 @@
+{
+    "name": "glightbox",
+    "description": "JavaScript animation engine",
+    "main": "dist/js/glightbox.min.js",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/mcstudios/glightbox"
+    },
+    "keywords": [
+        "lightbox",
+        "javascript",
+        "gallery",
+        "popup"
+    ],
+    "authors": [
+        "MC Studios <manuel@mcstudios.com.mx>"
+    ],
+    "license": "MIT",
+    "homepage": "https://glightbox.mcstudios.com.mx",
+    "ignore": [
+        "**/.*",
+        "node_modules",
+        "bower_components",
+        "*.psd",
+        "demo",
+        "test",
+        "tests"
+    ]
+}

web/themes/custom/eql/librairies/glightbox-master/demo/css/style.css

@@ -0,0 +1,714 @@
+@font-face {
+    font-family: 'Gilroy';
+    src: local('Gilroy Regular'), local('Gilroy-Regular'), url('./fonts/Gilroy-Regular.woff2') format('woff2'), url('./fonts/Gilroy-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Gilroy';
+    src: local('Gilroy Regular Italic'), local('Gilroy-RegularItalic'), url('./fonts/Gilroy-RegularItalic.woff2') format('woff2'), url('./fonts/Gilroy-RegularItalic.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Gilroy';
+    src: local('Gilroy SemiBold'), local('Gilroy-SemiBold'), url('./fonts/Gilroy-SemiBold.woff2') format('woff2'), url('./fonts/Gilroy-SemiBold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Gilroy';
+    src: local('Gilroy Bold'), local('Gilroy-Bold'), url('./fonts/Gilroy-Bold.woff2') format('woff2'), url('./fonts/Gilroy-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+}
+
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+    display: block;
+}
+
+body {
+    line-height: 1;
+}
+
+ol,
+ul {
+    list-style: none;
+}
+
+li {
+    margin-bottom: 10px;
+}
+
+.section {
+    padding: 95px 0;
+}
+
+body {
+    font-family: 'Gilroy', sans-serif;
+    background: #fff;
+    color: #666;
+    font-size: 16px;
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif !important;
+}
+
+a,
+a:hover {
+    text-decoration: none;
+    color: #000;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.pair {
+    background: #f8f8f8;
+}
+
+@media (min-width: 1200px) {
+    .container {
+        max-width: 1040px;
+    }
+}
+
+header {
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+    border-bottom: 1px solid transparent;
+    z-index: 999;
+    transition: all 0.3s ease-in-out;
+}
+
+header.fixed {
+    background: #fff;
+    border-bottom: 1px solid #cecece;
+}
+
+.header-unpin {
+    position: fixed;
+    opacity: 0;
+    transform: translate3d(0, -100%, 0);
+    transition: all 0.3s ease-in-out;
+}
+
+.header-pin {
+    position: fixed;
+    background: #fff;
+    opacity: 1;
+    border-bottom: 1px solid #cecece;
+    transform: translate3d(0, 0%, 0);
+    transition: all 0.6s ease-in-out;
+}
+
+.header-inner {
+    padding: 25px 0;
+    overflow: hidden;
+}
+
+.logo {
+    font-family: 'Lobster', cursive;
+    color: #000;
+    float: left;
+    font-size: 1.6em;
+}
+
+header ul {
+    float: right;
+    position: relative;
+    top: 4px;
+}
+
+header ul li {
+    float: left;
+    list-style: none;
+    margin-left: 25px;
+    opacity: 1;
+    transition: opacity 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+header ul li a {
+    color: #2b2b2b;
+    font-weight: 600;
+    font-size: 0.8em;
+}
+
+header ul:hover li {
+    opacity: 0.7;
+    transition: opacity 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+header ul li:hover {
+    opacity: 1;
+    transition: opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+header ul li:hover a {
+    color: #000000;
+}
+
+
+h3 {
+    font-family: 'Gilroy', sans-serif;
+    font-size: 1.7em;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 25px;
+    margin-bottom: 30px;
+    font-weight: 600;
+    color: #000;
+    display: flex;
+}
+
+h4 {
+    font-family: 'Gilroy', sans-serif;
+    margin-bottom: 25px;
+    font-weight: 600;
+    color: #000;
+    font-size: 1.2em;
+}
+
+a {
+    color: #000;
+}
+
+p {
+    line-height: 1.7em;
+    margin-bottom: 2em;
+    color: #2b2b2b;
+}
+
+.mcbutton {
+    padding: 11px 45px;
+    margin-top: 20px;
+    display: inline-block;
+    border-radius: 4px;
+    margin-right: 10px;
+    color: #000;
+    border: 2px solid #000;
+    font-weight: 600;
+    font-weight: 700;
+    text-transform: uppercase;
+    font-size: .7em;
+    position: relative;
+    width: 100%;
+    text-align: center;
+}
+
+.mcbutton::before,
+.mcbutton::after {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 0;
+    height: 2px;
+    background: #000;
+    transition: all 0.2s ease-in-out;
+    z-index: 99;
+}
+
+.mcbutton::before {
+    left: 0;
+    top: 0;
+}
+
+.mcbutton::after {
+    right: 0;
+    bottom: 0;
+}
+
+.mcbutton:hover::before,
+.mcbutton:hover::after {
+    width: 100%;
+    transition: all 0.4s ease-in-out;
+}
+
+.mcbutton span::before,
+.mcbutton span::after {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 2px;
+    height: 0;
+    background: #000;
+    transition: all 0.3s ease-in-out;
+}
+
+.mcbutton span::before {
+    left: 0;
+    top: 0;
+}
+
+.mcbutton span::after {
+    right: 0;
+    bottom: 0;
+}
+
+.mcbutton:hover span::before,
+.mcbutton:hover span::after {
+    height: 100%;
+    transition: all 0.3s ease-in-out;
+}
+
+.mcbutton.primary {
+    background: #FFC107;
+}
+
+.mcbutton.black {
+    background: #1b1b1b;
+    color: #fff;
+}
+
+.lead .mcbutton.primary {
+    border-color: #a2a2a2;
+}
+
+.lead .mcbutton {
+    padding: 16px 45px;
+    font-size: 0.6em;
+}
+
+.mcbutton i {
+    color: inherit;
+    font-size: 1.5em;
+    margin-right: 10px;
+}
+
+a {
+    text-decoration: none;
+}
+
+ol {
+    margin-left: 2em;
+    margin-bottom: 2em;
+}
+
+ul {
+    margin-left: 1em;
+    margin-bottom: 0;
+}
+
+ul ul {
+    margin-left: 1em;
+}
+
+strong {
+    font-weight: 600;
+    color: #1f1f1f;
+}
+
+.intro {
+    width: 100%;
+    margin: 0 auto;
+    background: url(../img/head.jpg);
+    background-size: cover;
+    margin-bottom: 0px;
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding-top: 80px;
+    min-height: 579px;
+    max-height: 579px;
+}
+
+.intro h1 {
+    margin-top: 0;
+    font-size: 3.3em;
+    color: #000;
+    font-weight: 100;
+    margin-bottom: 35px;
+    text-align: center;
+}
+
+.tagline {
+    color: #3a3a3a;
+    margin-bottom: 30px;
+    font-weight: 600;
+    text-align: center;
+    font-size: 17px;
+}
+
+.lead {
+    margin-bottom: 2em;
+}
+
+.lead .mcbutton {
+    border-color: #595959;
+    cursor: pointer;
+}
+
+.heading-icon {
+    margin-right: 16px
+}
+
+.box-container {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    margin-top: 1.4em;
+    width: 100%;
+}
+
+.box {
+    list-style-type: none;
+    float: left;
+    opacity: 0;
+    transform: translate3d(0, 40px, 0);
+    transition: opacity 0.2s, transform 0.35s;
+}
+
+.box.show {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+    transition: opacity 0.4s, transform 0.35s;
+}
+
+.box .inner {
+    padding: 10px;
+    position: relative;
+}
+
+.box a {
+    display: block;
+    width: 100%;
+    height: auto;
+    position: relative;
+    overflow: hidden;
+}
+
+.box img {
+    width: calc(100% + 50px);
+    max-width: calc(100% + 50px);
+    transition: opacity 0.35s, transform 0.35s;
+    transform: translate3d(-40px, 0, 0);
+}
+
+.box a::before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: #000;
+    z-index: 99;
+    opacity: 0;
+    transition: opacity 0.4s;
+}
+
+.three-cols .box {
+    width: 100%;
+}
+
+.four-cols .box {
+    width: 23.1%;
+}
+
+.four-cols .box:nth-child(4n+0) {
+    margin-right: 0;
+}
+
+.four-cols .box:nth-child(4n+1) {
+    clear: both;
+    margin-left: 0;
+}
+
+.options-list {
+    width: 700px;
+    margin: 0 auto;
+    border: 1px solid #ececec;
+    border-radius: 2px;
+}
+
+.options-list .option {
+    overflow: hidden;
+    border-bottom: 1px solid #ececec;
+}
+
+.options-list .option .name {
+    font-weight: 600;
+    display: inline-block;
+    width: 23%;
+    float: left;
+    text-align: left;
+    padding: 14px 17px;
+    color: #000;
+    font-size: 0.89em;
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif !important;
+}
+
+.options-list .option .value {
+    display: inline-block;
+    width: 65%;
+    float: left;
+    padding: 14px 17px;
+    text-align: left;
+    line-height: 1.7em;
+    font-size: 0.89em;
+    border-left: 1px solid #eee;
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif !important;
+}
+
+.options-list .option .type {
+    color: #ed7205;
+    font-weight: 600;
+}
+
+.params-list {
+    margin-bottom: 11em;
+}
+
+.option-code {
+    width: 700px;
+    margin: 0 auto;
+    border: 1px solid #ececec;
+    border-radius: 2px;
+    padding-left: 20px;
+    padding-top: 0;
+    margin-bottom: 48px;
+}
+
+.inline-inner {
+    padding: 40px;
+}
+
+.inline-close-btn {
+    background: #FFC107;
+    width: 200px;
+    display: block;
+    margin: auto;
+    height: 53px;
+    text-align: center;
+    line-height: 53px;
+    font-weight: 600;
+    font-size: 15px;
+    border-radius: 5px;
+    border: 2px solid #eee;
+}
+
+.inline-close-btn:hover {
+    border-color: #000;
+}
+
+.especifications {
+    width: 100%;
+    max-width: 543px;
+    margin: auto;
+}
+.especifications ul {
+    margin-top: 40px;
+    margin-bottom: 40px;
+}
+.especifications li {
+    text-align: left;
+    list-style: initial;
+    margin-bottom: 15px;
+    font-weight: 600;
+    font-size: 16px;
+    color: #2b2b2b;
+    opacity: 0;
+    line-height: 1.7em;
+    transform: translate3d(-10px, 0, 0);
+}
+
+.especifications li.show {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+    transition: all 0.3s ease-in-out;
+}
+
+.especifications li i {
+    color: #000;
+}
+
+
+.footer-btns {
+    margin-top: 50px;
+}
+
+footer {
+    text-align: center;
+    color: #666;
+    margin: 2rem 0;
+}
+
+footer a {
+    color: #000;
+}
+
+.copyright {
+    font-size: 0.8em;
+}
+
+
+@media (min-width: 390px) {
+    .three-cols .box {
+        width: 50%;
+    }
+}
+
+
+@media (min-width: 576px) {
+    .intro h1 {
+        font-size: 4.3em;
+    }
+
+    .intro {
+        max-height: 70vh;
+        min-height: 640px;
+        padding-top: 0px;
+    }
+
+    .intro h1,
+    .tagline {
+        text-align: left;
+    }
+
+    .tagline {
+        font-size: 100%;
+    }
+
+    .three-cols .box {
+        width: 33.3%;
+    }
+
+    .three-cols .box:nth-child(3n+0) {
+        margin-right: 0;
+    }
+
+    .three-cols .box:nth-child(3n+1) {
+        margin-left: 0;
+    }
+
+    .mcbutton {
+        width: auto;
+    }
+}
+
+
+@media (min-width: 992px) {
+    .box:hover img {
+        transform: translate3d(0, 0, 0);
+        transition: opacity 0.35s, transform 0.35s;
+    }
+
+    .box:hover a::before {
+        opacity: 0.3;
+        transition: opacity 0.5s;
+    }
+}
+
+
+/* path {
+    stroke-opacity: 0;
+}
+
+path.hw {
+    stroke-opacity: 1;
+}
+ */

web/themes/custom/eql/librairies/glightbox-master/demo/js/site.js

@@ -0,0 +1,115 @@
+(function() {
+    var _ = v;
+
+    var scrollerDesc = mctracker();
+    scrollerDesc.setup({
+        element: _('.box-container').toArray(),
+        offsetBottom: '20%',
+        once: true,
+    }).onStepEnter(function(response) {
+        var list = _(response.element).find('li');
+        list.forEach(function(item, i) {
+            var delay = i * 150 / 1000;
+            item = _(item);
+            item.attr('style', 'transition-delay: ' + delay + 's;');
+        })
+
+        list.addClass('show')
+    });
+
+
+    var header = function() {
+        var lastKnownScrollY = 0;
+        var currentScrollY = 0;
+        var eleHeader = null;
+        const classes = {
+            pinned: 'header-pin',
+            unpinned: 'header-unpin',
+        };
+
+        function onScroll() {
+            currentScrollY = window.pageYOffset;
+
+            if (currentScrollY <= 0) {
+                restore();
+                return;
+            }
+            if (currentScrollY < lastKnownScrollY) {
+                pin();
+            } else if (currentScrollY > lastKnownScrollY) {
+                unpin();
+            }
+            lastKnownScrollY = currentScrollY;
+        }
+
+        function pin() {
+            eleHeader.removeClass(classes.unpinned);
+            eleHeader.addClass(classes.pinned);
+        }
+        function unpin() {
+            eleHeader.removeClass(classes.pinned);
+            eleHeader.addClass(classes.unpinned);
+        }
+        function restore() {
+            eleHeader.removeClass(classes.pinned);
+            eleHeader.removeClass(classes.unpinned);
+        }
+        eleHeader = _('.main-header');
+        headerHeaight = eleHeader.height();
+        onScroll();
+        window.onload = function() {
+            document.addEventListener('scroll', onScroll, false);
+        }
+    }
+    header();
+
+
+
+
+    var specifics = function(params) {
+        var scrollerDesc = mctracker();
+        scrollerDesc.setup({
+            element: _('.especifications ul').toArray(),
+            bottom: '300',
+            once: true,
+        }).onStepEnter(function(response) {
+            var list = _(response.element).find('li');
+            list.forEach(function(item, i) {
+                var delay = i * 100 / 1000;
+                item = _(item);
+                item.attr('style', 'transition-delay: ' + delay + 's;');
+            })
+            list.addClass('show')
+        });
+    }
+    specifics();
+
+
+    const letters = _('svg').children('g');
+    function animateLetter(index = 0) {
+        if (index > letters.length - 1) {
+            return false;
+        }
+
+        let nextIndex = index + 1;
+        let paths = _(letters[index]).find('path');
+        let duration = (index > 0 ? 390 : 1000);
+
+        anime({
+            targets: paths.toArray(),
+            strokeDashoffset: [anime.setDashoffset, 0],
+            easing: 'easeInOutSine',
+            duration: duration,
+            begin: () => {
+                paths.addClass('hw');
+            },
+            complete: () => {
+                animateLetter(nextIndex);
+            }
+        });
+    }
+    animateLetter(0);
+
+
+
+}());

web/themes/custom/eql/librairies/glightbox-master/development/jscompiler.js

@@ -0,0 +1,84 @@
+const { rollup } = require('rollup');
+const babel = require('rollup-plugin-babel');
+const resolve = require('rollup-plugin-node-resolve');
+const commonjs = require('rollup-plugin-commonjs');
+const path = require('path');
+
+global.rollupCache = global.rollupCache || {};
+
+
+function camelCase(str) {
+    return str.replace(/(?:^\w|[A-Z]|\b\w|[-_])/g, (letter, index) => {
+        return index == 0 ? letter.toLowerCase() : letter.toUpperCase();
+    }).replace(/\s+/g, '').replace(/[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '');
+}
+
+function jscompiler(config) {
+    const {
+        file,
+        dest
+    } = config;
+
+    const fileName = path.basename(file);
+    const extension = path.extname(fileName);
+    const singleFileName = fileName.replace(extension, '');
+    const cache = global.rollupCache[fileName] ? global.rollupCache[fileName] : null;
+    const format = (config.hasOwnProperty('format') ? config.format : 'iife');
+    const strict = (config.hasOwnProperty('strict') ? config.strict : true);
+    const sourcemap = (config.hasOwnProperty('sourcemap') ? config.sourcemap : false);
+    const moduleID = (config.hasOwnProperty('moduleID') ? config.moduleID : false);
+
+    let name = (config.hasOwnProperty('name') ? config.name : camelCase(singleFileName));
+    let outPutFile = path.join(__dirname, '../', dest, fileName);
+    let customFileName = (config.hasOwnProperty('fileName') ? config.fileName : false);
+
+    if (customFileName) {
+        customFileName = customFileName.replace('{name}', singleFileName);
+        outPutFile = outPutFile.replace(fileName, customFileName);
+    }
+
+    return new Promise((res, rej) => {
+        rollup({
+            input: file,
+            cache: cache,
+            plugins: [
+                resolve({
+                    mainFields: ['module', 'main'],
+                    browser: true,
+                }),
+                commonjs(),
+                babel({
+                    comments: false,
+                    exclude: 'node_modules/**',
+                    presets: [
+                        ['@babel/preset-env', {
+                            modules: false
+                        }]
+                    ]
+                }),
+            ]
+        }).then((bundle) => {
+            global.rollupCache[fileName] = bundle.cache;
+            bundle.write({
+                file: outPutFile,
+                format: format, // amd, cjs, esm, iife, umd
+                strict: strict,
+                sourcemap: sourcemap,
+                name: (moduleID ? moduleID : name)
+            }).then(() => {
+                res(true);
+            }).catch(error => {
+                console.error(error)
+                rej(error);
+            });
+
+            return outPutFile;
+
+        }).catch(error => {
+            console.log(error)
+            throw new Error(error);
+        })
+    })
+}
+
+module.exports = jscompiler;

web/themes/custom/eql/librairies/glightbox-master/development/notifications.js

@@ -0,0 +1,15 @@
+const path = require('path');
+const notifier = require('node-notifier');
+
+function notify(title, body) {
+    const icon = path.join(__dirname, 'icon.png');
+
+    notifier.notify({
+        title: title,
+        message: body,
+        icon: icon
+    });
+    console.log(`${title}, ${body}`);
+}
+
+module.exports = notify;

web/themes/custom/eql/librairies/glightbox-master/development/package.js

@@ -0,0 +1,116 @@
+const fs = require('fs');
+const os = require('os');
+const jetpack = require('fs-jetpack');
+const path = require('path');
+const archiver = require('archiver');
+const args = process.argv.slice(2);
+const folder = path.join(__dirname, '/..');
+
+/**
+ * Realease new version
+ * calling
+ * node development/package.js versionhere
+ * then npm publish
+ */
+
+async function createFolder() {
+    jetpack.remove(path.join(folder, 'glightbox-master.zip'));
+
+    const tmpfolder = path.join(os.tmpdir(), 'glightbox-master');
+    const newVersion = args[0];
+
+    await updateFileVersion({
+        file: path.join(folder, 'index.html'),
+        search: /download\/(.*)\/glightbox/g,
+        replace: newVersion
+    });
+
+    await updateFileVersion({
+        file: path.join(folder, 'package.json'),
+        search: /"version":\s?"(.*)",/g,
+        replace: newVersion
+    });
+
+    await updateFileVersion({
+        file: path.join(folder, 'README.md'),
+        search: /v([0-9-.]+)/g,
+        replace: newVersion
+    });
+
+    await updateFileVersion({
+        file: path.join(folder, 'src/js/glightbox.js'),
+        search: /version\s?=\s?'(.*)';/g,
+        replace: newVersion
+    });
+
+    jetpack.copy(folder, tmpfolder, {
+        matching: [
+            '!node_modules',
+            '!node_modules/**/*',
+            '!.git',
+            '!.git/**/*',
+            '!.github',
+            '!.github/**/*',
+            '!.vscode',
+            '!.idea',
+            '!.idea/**/*',
+            '!.nova',
+            '!.nova/**/*',
+            '!icons.zip',
+            '!.vscode/**/*',
+            '!*.psd',
+            '!.DS_Store'
+        ]
+    });
+    console.log('Created folder', `Created folder correctly`);
+
+    const zip = await createZip(tmpfolder).catch((error) => {
+        jetpack.remove(tmpfolder);
+    });
+
+    const folderName = path.basename(folder);
+    jetpack.remove(tmpfolder);
+    jetpack.move(zip, path.join(folder, folderName + '-master.zip'));
+
+    console.log('Done', `Packaging process ended correctly`);
+}
+createFolder();
+
+async function createZip(folder) {
+    return new Promise((resolve, reject) => {
+        const name = folder + '.zip';
+        const output = fs.createWriteStream(name);
+        const archive = archiver('zip', { zlib: { level: 9 } });
+
+        output.on('close', () => {
+            console.log('Zipped', `zip archive was created correctly`);
+            resolve(name);
+        });
+        archive.on('error', (err) => {
+            console.log('Package Error', `The was an error creating the zip.`);
+            reject(err);
+        });
+
+        archive.pipe(output);
+        archive.directory(folder, false);
+        archive.finalize();
+    });
+}
+
+async function updateFileVersion(data) {
+    return new Promise((resolve, reject) => {
+        jetpack.readAsync(data.file).then((str) => {
+            let regexp = new RegExp(data.search);
+
+            while ((matches = regexp.exec(str)) !== null) {
+                let foundLine = matches[0];
+                let newLine = foundLine.replace(matches[1], data.replace);
+                str = str.replace(foundLine, newLine);
+            }
+
+            jetpack.writeAsync(data.file, str).then(() => {
+                resolve(data.file);
+            });
+        });
+    });
+}

web/themes/custom/eql/librairies/glightbox-master/development/postcss.js

@@ -0,0 +1,63 @@
+const postcss = require('postcss');
+const cssnext = require('postcss-preset-env');
+const cssnested = require('postcss-nested');
+const cssmqpacker = require('css-mqpacker');
+const cssprettify = require('postcss-prettify');
+const cssclean = require('clean-css');
+const path = require('path');
+const fs = require('fs');
+
+function postcssCompiler(config) {
+    const { file, dest, minify = true } = config;
+    const fileName = path.basename(file);
+    const from = path.join(__dirname, '../', file);
+    const to = path.join(__dirname, '../', dest, fileName);
+    const fileNameMin = path.extname(fileName);
+    const min = path.join(__dirname, '../', dest, fileName.replace(fileNameMin, `.min${fileNameMin}`));
+    const css = fs.readFileSync(from, 'utf8');
+
+    return new Promise((resolve, reject) => {
+        return postcss([
+            cssnested(),
+            cssnext({
+                stage: 0,
+                browsers: ['last 2 version'],
+                features: {
+                    calc: false
+                }
+            }),
+            cssmqpacker({
+                sort: true
+            }),
+            cssprettify()
+        ])
+            .process(css, {
+                from,
+                to
+            })
+            .then((result) => {
+                if (result && result.css) {
+                    fs.writeFile(to, result.css, 'utf8', (err) => reject(err));
+
+                    if (minify) {
+                        const minified = new cssclean({}).minify(result.css);
+                        fs.writeFile(min, minified.styles, 'utf8', (err) => reject(err));
+
+                        if (result.map) {
+                            fs.writeFile(to + '.map', result.map, 'utf8', (err) => reject(err));
+                        }
+                    }
+
+                    resolve(to);
+                } else {
+                    reject(result);
+                }
+            })
+            .catch((err) => {
+                console.log(err);
+                reject(err);
+            });
+    });
+}
+
+module.exports = postcssCompiler;

web/themes/custom/eql/librairies/glightbox-master/development/watcher.js

@@ -0,0 +1,105 @@
+const fs = require('node:fs');
+const chokidar = require('chokidar');
+const path = require('node:path');
+const jscompiler = require('./jscompiler');
+const postcssCompiler = require('./postcss');
+const terser = require('terser');
+
+let config = {
+    js: {
+        src: 'src/js',
+        dest: 'dist/js',
+    },
+    css: {
+        src: 'src/postcss',
+        dest: 'dist/css',
+    }
+};
+
+/**
+ * Handle Javascript files
+ * compile the javascript files
+ * to es2015, minify and sync the files
+ *
+ * @param {string} file path
+ */
+async function handleJavascript(file) {
+    file = path.join(config.js.src, 'glightbox.js');
+
+    const name = path.basename(file);
+
+    const res = await jscompiler({
+        file,
+        dest: config.js.dest,
+        format: 'umd',
+        sourcemap: false,
+        moduleID: 'GLightbox'
+    }).catch(error => console.log(error));
+
+    if (!res) {
+        console.log('Build Error', `View logs for more info`);
+        console.log(res)
+        return false;
+    }
+
+    const minName = name.replace('.js', '.min.js');
+    const processed = path.join(config.js.dest, name);
+    const code = fs.readFileSync(processed, 'utf8');
+    const minified = terser.minify(code);
+    const minifyPath = path.join(config.js.dest, minName);
+    fs.writeFileSync(minifyPath, minified.code);
+
+    console.log('Javascript Build', `Compiled and Minified ${name}`);
+}
+
+
+/**
+ * Handle Postcss files
+ * compile the css files
+ *
+ * @param {string} file path
+ */
+async function handlePostCSS(file) {
+    const name = path.basename(file);
+    const dest = config.css.dest;
+
+    let res = await postcssCompiler({
+        file,
+        dest,
+        minify: true
+    }).catch(error => console.log(error));
+    if (!res) {
+        return false;
+    }
+    console.log('PostCSS Build', `Compiled and Minified ${name}`);
+}
+
+
+
+/**
+ * Watcher
+ * what the files for the backedn
+ * this includes js and css files
+ */
+function filesWatcher() {
+    const watcher = chokidar.watch(['src'], {
+        ignored: ['.DS_Store', 'src/js/.jshintrc', 'src/js/.babelrc'],
+        persistent: true,
+        depth: 3,
+        awaitWriteFinish: {
+            stabilityThreshold: 500,
+            pollInterval: 500
+        },
+    });
+
+    watcher.on('change', path => {
+        if (path.endsWith('.js')) {
+           return handleJavascript(path);
+        }
+        if (path.endsWith('.css')) {
+            return handlePostCSS(path);
+        }
+    })
+    watcher.on('ready', () => console.log('Watching files', 'Initial scan complete. Ready for changes'))
+}
+filesWatcher();

web/themes/custom/eql/librairies/glightbox-master/dist/css/glightbox.css

@@ -0,0 +1,939 @@
+.glightbox-container {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999999 !important;
+  overflow: hidden;
+  -ms-touch-action: none;
+  touch-action: none;
+  -webkit-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  outline: none;
+}
+
+.glightbox-container.inactive {
+  display: none;
+}
+
+.glightbox-container .gcontainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  overflow: hidden;
+}
+
+.glightbox-container .gslider {
+  -webkit-transition: -webkit-transform 0.4s ease;
+  transition: -webkit-transform 0.4s ease;
+  transition: transform 0.4s ease;
+  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
+  height: 100%;
+  left: 0;
+  top: 0;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+
+.glightbox-container .gslide {
+  width: 100%;
+  position: absolute;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  opacity: 0;
+}
+
+.glightbox-container .gslide.current {
+  opacity: 1;
+  z-index: 99999;
+  position: relative;
+}
+
+.glightbox-container .gslide.prev {
+  opacity: 1;
+  z-index: 9999;
+}
+
+.glightbox-container .gslide-inner-content {
+  width: 100%;
+}
+
+.glightbox-container .ginner-container {
+  position: relative;
+  width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  max-width: 100%;
+  margin: auto;
+  height: 100vh;
+}
+
+.glightbox-container .ginner-container.gvideo-container {
+  width: 100%;
+}
+
+.glightbox-container .ginner-container.desc-bottom,
+        .glightbox-container .ginner-container.desc-top {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.glightbox-container .ginner-container.desc-left,
+        .glightbox-container .ginner-container.desc-right {
+  max-width: 100% !important;
+}
+
+.gslide iframe,
+    .gslide video {
+  outline: none !important;
+  border: none;
+  min-height: 165px;
+  -webkit-overflow-scrolling: touch;
+  -ms-touch-action: auto;
+  touch-action: auto;
+}
+
+.gslide:not(.current) {
+  pointer-events: none;
+}
+
+.gslide-image {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.gslide-image img {
+  max-height: 100vh;
+  display: block;
+  padding: 0;
+  float: none;
+  outline: none;
+  border: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  max-width: 100vw;
+  width: auto;
+  height: auto;
+  -o-object-fit: cover;
+  object-fit: cover;
+  -ms-touch-action: none;
+  touch-action: none;
+  margin: auto;
+  min-width: 200px;
+}
+
+.desc-top .gslide-image img,
+        .desc-bottom .gslide-image img {
+  width: auto;
+}
+
+.desc-left .gslide-image img,
+        .desc-right .gslide-image img {
+  width: auto;
+  max-width: 100%;
+}
+
+.gslide-image img.zoomable {
+  position: relative;
+}
+
+.gslide-image img.dragging {
+  cursor: -webkit-grabbing !important;
+  cursor: grabbing !important;
+  -webkit-transition: none;
+  transition: none;
+}
+
+.gslide-video {
+  position: relative;
+  max-width: 100vh;
+  width: 100% !important;
+}
+
+.gslide-video .plyr__poster-enabled.plyr--loading .plyr__poster {
+  display: none;
+}
+
+.gslide-video .gvideo-wrapper {
+  width: 100%;
+        /* max-width: 160vmin; */
+  margin: auto;
+}
+
+.gslide-video::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 0, 0, 0.34);
+  display: none;
+}
+
+.gslide-video.playing::before {
+  display: none;
+}
+
+.gslide-video.fullscreen {
+  max-width: 100% !important;
+  min-width: 100%;
+  height: 75vh;
+}
+
+.gslide-video.fullscreen video {
+  max-width: 100% !important;
+  width: 100% !important;
+}
+
+.gslide-inline {
+  background: #fff;
+  text-align: left;
+  max-height: calc(100vh - 40px);
+  overflow: auto;
+  max-width: 100%;
+  margin: auto;
+}
+
+.gslide-inline .ginlined-content {
+  padding: 20px;
+  width: 100%;
+}
+
+.gslide-inline .dragging {
+  cursor: -webkit-grabbing !important;
+  cursor: grabbing !important;
+  -webkit-transition: none;
+  transition: none;
+}
+
+.ginlined-content {
+  overflow: auto;
+  display: block !important;
+  opacity: 1;
+}
+
+.gslide-external {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  min-width: 100%;
+  background: #fff;
+  padding: 0;
+  overflow: auto;
+  max-height: 75vh;
+  height: 100%;
+}
+
+.gslide-media {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: auto;
+}
+
+.zoomed .gslide-media {
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
+}
+
+.desc-top .gslide-media,
+    .desc-bottom .gslide-media {
+  margin: 0 auto;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.gslide-description {
+  position: relative;
+  -webkit-box-flex: 1;
+  -ms-flex: 1 0 100%;
+  flex: 1 0 100%;
+}
+
+.gslide-description.description-left,
+    .gslide-description.description-right {
+  max-width: 100%;
+}
+
+.gslide-description.description-bottom,
+    .gslide-description.description-top {
+  margin: 0 auto;
+  width: 100%;
+}
+
+.gslide-description p {
+  margin-bottom: 12px;
+}
+
+.gslide-description p:last-child {
+  margin-bottom: 0;
+}
+
+.zoomed .gslide-description {
+  display: none;
+}
+
+.glightbox-button-hidden {
+  display: none;
+}
+
+
+/*
+ * Description for mobiles
+ * something like facebook does the description
+ * for the photos
+*/
+
+.glightbox-mobile .glightbox-container .gslide-description {
+  height: auto !important;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  padding: 19px 11px;
+  max-width: 100vw !important;
+  -webkit-box-ordinal-group: 3 !important;
+  -ms-flex-order: 2 !important;
+  order: 2 !important;
+  max-height: 78vh;
+  overflow: auto !important;
+  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.75)));
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
+  -webkit-transition: opacity 0.3s linear;
+  transition: opacity 0.3s linear;
+  padding-bottom: 50px;
+}
+
+.glightbox-mobile .glightbox-container .gslide-title {
+  color: #fff;
+  font-size: 1em;
+}
+
+.glightbox-mobile .glightbox-container .gslide-desc {
+  color: #a1a1a1;
+}
+
+.glightbox-mobile .glightbox-container .gslide-desc a {
+  color: #fff;
+  font-weight: bold;
+}
+
+.glightbox-mobile .glightbox-container .gslide-desc * {
+  color: inherit;
+}
+
+.glightbox-mobile .glightbox-container .gslide-desc .desc-more {
+  color: #fff;
+  opacity: 0.4;
+}
+
+.gdesc-open .gslide-media {
+  -webkit-transition: opacity 0.5s ease;
+  transition: opacity 0.5s ease;
+  opacity: 0.4;
+}
+
+.gdesc-open .gdesc-inner {
+  padding-bottom: 30px;
+}
+
+.gdesc-closed .gslide-media {
+  -webkit-transition: opacity 0.5s ease;
+  transition: opacity 0.5s ease;
+  opacity: 1;
+}
+
+.greset {
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+
+.gabsolute {
+  position: absolute;
+}
+
+.grelative {
+  position: relative;
+}
+
+.glightbox-desc {
+  display: none !important;
+}
+
+.glightbox-open {
+  overflow: hidden;
+}
+
+.gloader {
+  height: 25px;
+  width: 25px;
+  -webkit-animation: lightboxLoader 0.8s infinite linear;
+  animation: lightboxLoader 0.8s infinite linear;
+  border: 2px solid #fff;
+  border-right-color: transparent;
+  border-radius: 50%;
+  position: absolute;
+  display: block;
+  z-index: 9999;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  top: 47%;
+}
+
+.goverlay {
+  width: 100%;
+  height: calc(100vh + 1px);
+  position: fixed;
+  top: -1px;
+  left: 0;
+  background: #000;
+  will-change: opacity;
+}
+
+.glightbox-mobile .goverlay {
+  background: #000;
+}
+
+.gprev,
+.gnext,
+.gclose {
+  z-index: 99999;
+  cursor: pointer;
+  width: 26px;
+  height: 44px;
+  border: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.gprev svg,
+.gnext svg,
+.gclose svg {
+  display: block;
+  width: 25px;
+  height: auto;
+  margin: 0;
+  padding: 0;
+}
+
+.gprev.disabled,
+.gnext.disabled,
+.gclose.disabled {
+  opacity: 0.1;
+}
+
+.gprev .garrow,
+.gnext .garrow,
+.gclose .garrow {
+  stroke: #fff;
+}
+
+.gbtn.focused {
+  outline: 2px solid #0f3d81;
+}
+
+iframe.wait-autoplay {
+  opacity: 0;
+}
+
+.glightbox-closing .gnext,
+    .glightbox-closing .gprev,
+    .glightbox-closing .gclose {
+  opacity: 0 !important;
+}
+
+
+/*Skin */
+
+.glightbox-clean .gslide-description {
+  background: #fff;
+}
+
+.glightbox-clean .gdesc-inner {
+  padding: 22px 20px;
+}
+
+.glightbox-clean .gslide-title {
+  font-size: 1em;
+  font-weight: normal;
+  font-family: arial;
+  color: #000;
+  margin-bottom: 19px;
+  line-height: 1.4em;
+}
+
+.glightbox-clean .gslide-desc {
+  font-size: 0.86em;
+  margin-bottom: 0;
+  font-family: arial;
+  line-height: 1.4em;
+}
+
+.glightbox-clean .gslide-video {
+  background: #000;
+}
+
+.glightbox-clean .gprev,
+    .glightbox-clean .gnext,
+    .glightbox-clean .gclose {
+  background-color: rgba(0, 0, 0, 0.75);
+  border-radius: 4px;
+}
+
+.glightbox-clean .gprev path,
+.glightbox-clean .gnext path,
+.glightbox-clean .gclose path {
+  fill: #fff;
+}
+
+.glightbox-clean .gprev {
+  position: absolute;
+  top: -100%;
+  left: 30px;
+  width: 40px;
+  height: 50px;
+}
+
+.glightbox-clean .gnext {
+  position: absolute;
+  top: -100%;
+  right: 30px;
+  width: 40px;
+  height: 50px;
+}
+
+.glightbox-clean .gclose {
+  width: 35px;
+  height: 35px;
+  top: 15px;
+  right: 10px;
+  position: absolute;
+}
+
+.glightbox-clean .gclose svg {
+  width: 18px;
+  height: auto;
+}
+
+.glightbox-clean .gclose:hover {
+  opacity: 1;
+}
+
+
+/*CSS Animations*/
+
+.gfadeIn {
+  -webkit-animation: gfadeIn 0.5s ease;
+  animation: gfadeIn 0.5s ease;
+}
+
+.gfadeOut {
+  -webkit-animation: gfadeOut 0.5s ease;
+  animation: gfadeOut 0.5s ease;
+}
+
+.gslideOutLeft {
+  -webkit-animation: gslideOutLeft 0.3s ease;
+  animation: gslideOutLeft 0.3s ease;
+}
+
+.gslideInLeft {
+  -webkit-animation: gslideInLeft 0.3s ease;
+  animation: gslideInLeft 0.3s ease;
+}
+
+.gslideOutRight {
+  -webkit-animation: gslideOutRight 0.3s ease;
+  animation: gslideOutRight 0.3s ease;
+}
+
+.gslideInRight {
+  -webkit-animation: gslideInRight 0.3s ease;
+  animation: gslideInRight 0.3s ease;
+}
+
+.gzoomIn {
+  -webkit-animation: gzoomIn 0.5s ease;
+  animation: gzoomIn 0.5s ease;
+}
+
+.gzoomOut {
+  -webkit-animation: gzoomOut 0.5s ease;
+  animation: gzoomOut 0.5s ease;
+}
+
+@-webkit-keyframes lightboxLoader {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes lightboxLoader {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes gfadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes gfadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes gfadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes gfadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes gslideInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-60%, 0, 0);
+    transform: translate3d(-60%, 0, 0);
+  }
+  to {
+    visibility: visible;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes gslideInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-60%, 0, 0);
+    transform: translate3d(-60%, 0, 0);
+  }
+  to {
+    visibility: visible;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes gslideOutLeft {
+  from {
+    opacity: 1;
+    visibility: visible;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(-60%, 0, 0);
+    transform: translate3d(-60%, 0, 0);
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+@keyframes gslideOutLeft {
+  from {
+    opacity: 1;
+    visibility: visible;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(-60%, 0, 0);
+    transform: translate3d(-60%, 0, 0);
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+@-webkit-keyframes gslideInRight {
+  from {
+    opacity: 0;
+    visibility: visible;
+    -webkit-transform: translate3d(60%, 0, 0);
+    transform: translate3d(60%, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes gslideInRight {
+  from {
+    opacity: 0;
+    visibility: visible;
+    -webkit-transform: translate3d(60%, 0, 0);
+    transform: translate3d(60%, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes gslideOutRight {
+  from {
+    opacity: 1;
+    visibility: visible;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(60%, 0, 0);
+    transform: translate3d(60%, 0, 0);
+    opacity: 0;
+  }
+}
+
+@keyframes gslideOutRight {
+  from {
+    opacity: 1;
+    visibility: visible;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(60%, 0, 0);
+    transform: translate3d(60%, 0, 0);
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes gzoomIn {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes gzoomIn {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes gzoomOut {
+  from {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes gzoomOut {
+  from {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@media (min-width: 769px) {
+  .glightbox-container .ginner-container {
+    width: auto;
+    height: auto;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
+  .glightbox-container .ginner-container.desc-top .gslide-description {
+    -webkit-box-ordinal-group: 1;
+    -ms-flex-order: 0;
+    order: 0;
+  }
+  .glightbox-container .ginner-container.desc-top .gslide-image,
+                .glightbox-container .ginner-container.desc-top .gslide-image img {
+    -webkit-box-ordinal-group: 2;
+    -ms-flex-order: 1;
+    order: 1;
+  }
+  .glightbox-container .ginner-container.desc-left .gslide-description {
+    -webkit-box-ordinal-group: 1;
+    -ms-flex-order: 0;
+    order: 0;
+  }
+  .glightbox-container .ginner-container.desc-left .gslide-image {
+    -webkit-box-ordinal-group: 2;
+    -ms-flex-order: 1;
+    order: 1;
+  }
+  .gslide-image img {
+    max-height: 97vh;
+    max-width: 100%;
+  }
+  .gslide-image img.zoomable {
+    cursor: -webkit-zoom-in;
+    cursor: zoom-in;
+  }
+  .zoomed .gslide-image img.zoomable {
+    cursor: -webkit-grab;
+    cursor: grab;
+  }
+  .gslide-inline {
+    max-height: 95vh;
+  }
+  .gslide-external {
+    max-height: 100vh;
+  }
+  .gslide-description.description-left,
+    .gslide-description.description-right {
+    max-width: 275px;
+  }
+  .glightbox-open {
+    height: auto;
+  }
+  .goverlay {
+    background: rgba(0, 0, 0, 0.92);
+  }
+  .glightbox-clean .gslide-media {
+    -webkit-box-shadow: 1px 2px 9px 0px rgba(0, 0, 0, 0.65);
+    box-shadow: 1px 2px 9px 0px rgba(0, 0, 0, 0.65);
+  }
+  .glightbox-clean .description-left .gdesc-inner,
+.glightbox-clean .description-right .gdesc-inner {
+    position: absolute;
+    height: 100%;
+    overflow-y: auto;
+  }
+  .glightbox-clean .gprev,
+    .glightbox-clean .gnext,
+    .glightbox-clean .gclose {
+    background-color: rgba(0, 0, 0, 0.32);
+  }
+  .glightbox-clean .gprev:hover,
+.glightbox-clean .gnext:hover,
+.glightbox-clean .gclose:hover {
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+  .glightbox-clean .gprev {
+    top: 45%;
+  }
+  .glightbox-clean .gnext {
+    top: 45%;
+  }
+}
+
+@media (min-width: 992px) {
+  .glightbox-clean .gclose {
+    opacity: 0.7;
+    right: 20px;
+  }
+}
+
+@media screen and (max-height: 420px) {
+  .goverlay {
+    background: #000;
+  }
+}

web/themes/custom/eql/librairies/glightbox-master/dist/js/glightbox.js

@@ -0,0 +1,3087 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = global || self, global.GLightbox = factory());
+}(this, (function () { 'use strict';
+
+  function _classCallCheck(a, n) {
+    if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
+  }
+  function _defineProperties(e, r) {
+    for (var t = 0; t < r.length; t++) {
+      var o = r[t];
+      o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o);
+    }
+  }
+  function _createClass(e, r, t) {
+    return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
+      writable: !1
+    }), e;
+  }
+  function _toPrimitive(t, r) {
+    if ("object" != typeof t || !t) return t;
+    var e = t[Symbol.toPrimitive];
+    if (void 0 !== e) {
+      var i = e.call(t, r || "default");
+      if ("object" != typeof i) return i;
+      throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return ("string" === r ? String : Number)(t);
+  }
+  function _toPropertyKey(t) {
+    var i = _toPrimitive(t, "string");
+    return "symbol" == typeof i ? i : i + "";
+  }
+  function _typeof(o) {
+    "@babel/helpers - typeof";
+
+    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+      return typeof o;
+    } : function (o) {
+      return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+    }, _typeof(o);
+  }
+
+  var uid = Date.now();
+  function extend() {
+    var extended = {};
+    var deep = true;
+    var i = 0;
+    var length = arguments.length;
+    if (Object.prototype.toString.call(arguments[0]) === '[object Boolean]') {
+      deep = arguments[0];
+      i++;
+    }
+    var merge = function merge(obj) {
+      for (var prop in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, prop)) {
+          if (deep && Object.prototype.toString.call(obj[prop]) === '[object Object]') {
+            extended[prop] = extend(true, extended[prop], obj[prop]);
+          } else {
+            extended[prop] = obj[prop];
+          }
+        }
+      }
+    };
+    for (; i < length; i++) {
+      var obj = arguments[i];
+      merge(obj);
+    }
+    return extended;
+  }
+  function each(collection, callback) {
+    if (isNode(collection) || collection === window || collection === document) {
+      collection = [collection];
+    }
+    if (!isArrayLike(collection) && !isObject(collection)) {
+      collection = [collection];
+    }
+    if (size(collection) == 0) {
+      return;
+    }
+    if (isArrayLike(collection) && !isObject(collection)) {
+      var l = collection.length,
+        i = 0;
+      for (; i < l; i++) {
+        if (callback.call(collection[i], collection[i], i, collection) === false) {
+          break;
+        }
+      }
+    } else if (isObject(collection)) {
+      for (var key in collection) {
+        if (has(collection, key)) {
+          if (callback.call(collection[key], collection[key], key, collection) === false) {
+            break;
+          }
+        }
+      }
+    }
+  }
+  function getNodeEvents(node) {
+    var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    var fn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    var cache = node[uid] = node[uid] || [];
+    var data = {
+      all: cache,
+      evt: null,
+      found: null
+    };
+    if (name && fn && size(cache) > 0) {
+      each(cache, function (cl, i) {
+        if (cl.eventName == name && cl.fn.toString() == fn.toString()) {
+          data.found = true;
+          data.evt = i;
+          return false;
+        }
+      });
+    }
+    return data;
+  }
+  function addEvent(eventName) {
+    var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      onElement = _ref.onElement,
+      withCallback = _ref.withCallback,
+      _ref$avoidDuplicate = _ref.avoidDuplicate,
+      avoidDuplicate = _ref$avoidDuplicate === void 0 ? true : _ref$avoidDuplicate,
+      _ref$once = _ref.once,
+      once = _ref$once === void 0 ? false : _ref$once,
+      _ref$useCapture = _ref.useCapture,
+      useCapture = _ref$useCapture === void 0 ? false : _ref$useCapture;
+    var thisArg = arguments.length > 2 ? arguments[2] : undefined;
+    var element = onElement || [];
+    if (isString(element)) {
+      element = document.querySelectorAll(element);
+    }
+    function handler(event) {
+      if (isFunction(withCallback)) {
+        withCallback.call(thisArg, event, this);
+      }
+      if (once) {
+        handler.destroy();
+      }
+    }
+    handler.destroy = function () {
+      each(element, function (el) {
+        var events = getNodeEvents(el, eventName, handler);
+        if (events.found) {
+          events.all.splice(events.evt, 1);
+        }
+        if (el.removeEventListener) {
+          el.removeEventListener(eventName, handler, useCapture);
+        }
+      });
+    };
+    each(element, function (el) {
+      var events = getNodeEvents(el, eventName, handler);
+      if (el.addEventListener && avoidDuplicate && !events.found || !avoidDuplicate) {
+        el.addEventListener(eventName, handler, useCapture);
+        events.all.push({
+          eventName: eventName,
+          fn: handler
+        });
+      }
+    });
+    return handler;
+  }
+  function addClass(node, name) {
+    each(name.split(' '), function (cl) {
+      return node.classList.add(cl);
+    });
+  }
+  function removeClass(node, name) {
+    each(name.split(' '), function (cl) {
+      return node.classList.remove(cl);
+    });
+  }
+  function hasClass(node, name) {
+    return node.classList.contains(name);
+  }
+  function closest(elem, selector) {
+    while (elem !== document.body) {
+      elem = elem.parentElement;
+      if (!elem) {
+        return false;
+      }
+      var matches = typeof elem.matches == 'function' ? elem.matches(selector) : elem.msMatchesSelector(selector);
+      if (matches) {
+        return elem;
+      }
+    }
+  }
+  function animateElement(element) {
+    var animation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    var callback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    if (!element || animation === '') {
+      return false;
+    }
+    if (animation === 'none') {
+      if (isFunction(callback)) {
+        callback();
+      }
+      return false;
+    }
+    var animationEnd = whichAnimationEvent();
+    var animationNames = animation.split(' ');
+    each(animationNames, function (name) {
+      addClass(element, 'g' + name);
+    });
+    addEvent(animationEnd, {
+      onElement: element,
+      avoidDuplicate: false,
+      once: true,
+      withCallback: function withCallback(event, target) {
+        each(animationNames, function (name) {
+          removeClass(target, 'g' + name);
+        });
+        if (isFunction(callback)) {
+          callback();
+        }
+      }
+    });
+  }
+  function cssTransform(node) {
+    var translate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    if (translate === '') {
+      node.style.webkitTransform = '';
+      node.style.MozTransform = '';
+      node.style.msTransform = '';
+      node.style.OTransform = '';
+      node.style.transform = '';
+      return false;
+    }
+    node.style.webkitTransform = translate;
+    node.style.MozTransform = translate;
+    node.style.msTransform = translate;
+    node.style.OTransform = translate;
+    node.style.transform = translate;
+  }
+  function show(element) {
+    element.style.display = 'block';
+  }
+  function hide(element) {
+    element.style.display = 'none';
+  }
+  function createHTML(htmlStr) {
+    var frag = document.createDocumentFragment(),
+      temp = document.createElement('div');
+    temp.innerHTML = htmlStr;
+    while (temp.firstChild) {
+      frag.appendChild(temp.firstChild);
+    }
+    return frag;
+  }
+  function windowSize() {
+    return {
+      width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
+      height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
+    };
+  }
+  function whichAnimationEvent() {
+    var t,
+      el = document.createElement('fakeelement');
+    var animations = {
+      animation: 'animationend',
+      OAnimation: 'oAnimationEnd',
+      MozAnimation: 'animationend',
+      WebkitAnimation: 'webkitAnimationEnd'
+    };
+    for (t in animations) {
+      if (el.style[t] !== undefined) {
+        return animations[t];
+      }
+    }
+  }
+  function whichTransitionEvent() {
+    var t,
+      el = document.createElement('fakeelement');
+    var transitions = {
+      transition: 'transitionend',
+      OTransition: 'oTransitionEnd',
+      MozTransition: 'transitionend',
+      WebkitTransition: 'webkitTransitionEnd'
+    };
+    for (t in transitions) {
+      if (el.style[t] !== undefined) {
+        return transitions[t];
+      }
+    }
+  }
+  function createIframe(config) {
+    var url = config.url,
+      allow = config.allow,
+      callback = config.callback,
+      appendTo = config.appendTo;
+    var iframe = document.createElement('iframe');
+    iframe.className = 'vimeo-video gvideo';
+    iframe.src = url;
+    iframe.style.width = '100%';
+    iframe.style.height = '100%';
+    if (allow) {
+      iframe.setAttribute('allow', allow);
+    }
+    iframe.onload = function () {
+      iframe.onload = null;
+      addClass(iframe, 'node-ready');
+      if (isFunction(callback)) {
+        callback();
+      }
+    };
+    if (appendTo) {
+      appendTo.appendChild(iframe);
+    }
+    return iframe;
+  }
+  function waitUntil(check, onComplete, delay, timeout) {
+    if (check()) {
+      onComplete();
+      return;
+    }
+    if (!delay) {
+      delay = 100;
+    }
+    var timeoutPointer;
+    var intervalPointer = setInterval(function () {
+      if (!check()) {
+        return;
+      }
+      clearInterval(intervalPointer);
+      if (timeoutPointer) {
+        clearTimeout(timeoutPointer);
+      }
+      onComplete();
+    }, delay);
+    if (timeout) {
+      timeoutPointer = setTimeout(function () {
+        clearInterval(intervalPointer);
+      }, timeout);
+    }
+  }
+  function injectAssets(url, waitFor, callback) {
+    if (isNil(url)) {
+      console.error('Inject assets error');
+      return;
+    }
+    if (isFunction(waitFor)) {
+      callback = waitFor;
+      waitFor = false;
+    }
+    if (isString(waitFor) && waitFor in window) {
+      if (isFunction(callback)) {
+        callback();
+      }
+      return;
+    }
+    var found;
+    if (url.indexOf('.css') !== -1) {
+      found = document.querySelectorAll('link[href="' + url + '"]');
+      if (found && found.length > 0) {
+        if (isFunction(callback)) {
+          callback();
+        }
+        return;
+      }
+      var head = document.getElementsByTagName('head')[0];
+      var headStyles = head.querySelectorAll('link[rel="stylesheet"]');
+      var link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.type = 'text/css';
+      link.href = url;
+      link.media = 'all';
+      if (headStyles) {
+        head.insertBefore(link, headStyles[0]);
+      } else {
+        head.appendChild(link);
+      }
+      if (isFunction(callback)) {
+        callback();
+      }
+      return;
+    }
+    found = document.querySelectorAll('script[src="' + url + '"]');
+    if (found && found.length > 0) {
+      if (isFunction(callback)) {
+        if (isString(waitFor)) {
+          waitUntil(function () {
+            return typeof window[waitFor] !== 'undefined';
+          }, function () {
+            callback();
+          });
+          return false;
+        }
+        callback();
+      }
+      return;
+    }
+    var script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = url;
+    script.onload = function () {
+      if (isFunction(callback)) {
+        if (isString(waitFor)) {
+          waitUntil(function () {
+            return typeof window[waitFor] !== 'undefined';
+          }, function () {
+            callback();
+          });
+          return false;
+        }
+        callback();
+      }
+    };
+    document.body.appendChild(script);
+  }
+  function isMobile() {
+    return 'navigator' in window && window.navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(Android)|(PlayBook)|(BB10)|(BlackBerry)|(Opera Mini)|(IEMobile)|(webOS)|(MeeGo)/i);
+  }
+  function isTouch() {
+    return isMobile() !== null || document.createTouch !== undefined || 'ontouchstart' in window || 'onmsgesturechange' in window || navigator.msMaxTouchPoints;
+  }
+  function isFunction(f) {
+    return typeof f === 'function';
+  }
+  function isString(s) {
+    return typeof s === 'string';
+  }
+  function isNode(el) {
+    return !!(el && el.nodeType && el.nodeType == 1);
+  }
+  function isArray(ar) {
+    return Array.isArray(ar);
+  }
+  function isArrayLike(ar) {
+    return ar && ar.length && isFinite(ar.length);
+  }
+  function isObject(o) {
+    var type = _typeof(o);
+    return type === 'object' && o != null && !isFunction(o) && !isArray(o);
+  }
+  function isNil(o) {
+    return o == null;
+  }
+  function has(obj, key) {
+    return obj !== null && hasOwnProperty.call(obj, key);
+  }
+  function size(o) {
+    if (isObject(o)) {
+      if (o.keys) {
+        return o.keys().length;
+      }
+      var l = 0;
+      for (var k in o) {
+        if (has(o, k)) {
+          l++;
+        }
+      }
+      return l;
+    } else {
+      return o.length;
+    }
+  }
+  function isNumber(n) {
+    return !isNaN(parseFloat(n)) && isFinite(n);
+  }
+
+  function getNextFocusElement() {
+    var current = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
+    var btns = document.querySelectorAll('.gbtn[data-taborder]:not(.disabled)');
+    if (!btns.length) {
+      return false;
+    }
+    if (btns.length == 1) {
+      return btns[0];
+    }
+    if (typeof current == 'string') {
+      current = parseInt(current);
+    }
+    var orders = [];
+    each(btns, function (btn) {
+      orders.push(btn.getAttribute('data-taborder'));
+    });
+    var highestOrder = Math.max.apply(Math, orders.map(function (order) {
+      return parseInt(order);
+    }));
+    var newIndex = current < 0 ? 1 : current + 1;
+    if (newIndex > highestOrder) {
+      newIndex = '1';
+    }
+    var nextOrders = orders.filter(function (el) {
+      return el >= parseInt(newIndex);
+    });
+    var nextFocus = nextOrders.sort()[0];
+    return document.querySelector(".gbtn[data-taborder=\"".concat(nextFocus, "\"]"));
+  }
+  function keyboardNavigation(instance) {
+    if (instance.events.hasOwnProperty('keyboard')) {
+      return false;
+    }
+    instance.events['keyboard'] = addEvent('keydown', {
+      onElement: window,
+      withCallback: function withCallback(event, target) {
+        event = event || window.event;
+        var key = event.keyCode;
+        if (key == 9) {
+          var focusedButton = document.querySelector('.gbtn.focused');
+          if (!focusedButton) {
+            var activeElement = document.activeElement && document.activeElement.nodeName ? document.activeElement.nodeName.toLocaleLowerCase() : false;
+            if (activeElement == 'input' || activeElement == 'textarea' || activeElement == 'button') {
+              return;
+            }
+          }
+          event.preventDefault();
+          var btns = document.querySelectorAll('.gbtn[data-taborder]');
+          if (!btns || btns.length <= 0) {
+            return;
+          }
+          if (!focusedButton) {
+            var first = getNextFocusElement();
+            if (first) {
+              first.focus();
+              addClass(first, 'focused');
+            }
+            return;
+          }
+          var currentFocusOrder = focusedButton.getAttribute('data-taborder');
+          var nextFocus = getNextFocusElement(currentFocusOrder);
+          removeClass(focusedButton, 'focused');
+          if (nextFocus) {
+            nextFocus.focus();
+            addClass(nextFocus, 'focused');
+          }
+        }
+        if (key == 39) {
+          instance.nextSlide();
+        }
+        if (key == 37) {
+          instance.prevSlide();
+        }
+        if (key == 27) {
+          instance.close();
+        }
+      }
+    });
+  }
+
+  var ZoomImages = function () {
+    function ZoomImages(el, slide) {
+      var _this = this;
+      var onclose = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+      _classCallCheck(this, ZoomImages);
+      this.img = el;
+      this.slide = slide;
+      this.onclose = onclose;
+      if (this.img.setZoomEvents) {
+        return false;
+      }
+      this.active = false;
+      this.zoomedIn = false;
+      this.dragging = false;
+      this.currentX = null;
+      this.currentY = null;
+      this.initialX = null;
+      this.initialY = null;
+      this.xOffset = 0;
+      this.yOffset = 0;
+      this.img.addEventListener('mousedown', function (e) {
+        return _this.dragStart(e);
+      }, false);
+      this.img.addEventListener('mouseup', function (e) {
+        return _this.dragEnd(e);
+      }, false);
+      this.img.addEventListener('mousemove', function (e) {
+        return _this.drag(e);
+      }, false);
+      this.img.addEventListener('click', function (e) {
+        if (_this.slide.classList.contains('dragging-nav')) {
+          _this.zoomOut();
+          return false;
+        }
+        if (!_this.zoomedIn) {
+          return _this.zoomIn();
+        }
+        if (_this.zoomedIn && !_this.dragging) {
+          _this.zoomOut();
+        }
+      }, false);
+      this.img.setZoomEvents = true;
+    }
+    return _createClass(ZoomImages, [{
+      key: "zoomIn",
+      value: function zoomIn() {
+        var winWidth = this.widowWidth();
+        if (this.zoomedIn || winWidth <= 768) {
+          return;
+        }
+        var img = this.img;
+        img.setAttribute('data-style', img.getAttribute('style'));
+        img.style.maxWidth = img.naturalWidth + 'px';
+        img.style.maxHeight = img.naturalHeight + 'px';
+        if (img.naturalWidth > winWidth) {
+          var centerX = winWidth / 2 - img.naturalWidth / 2;
+          this.setTranslate(this.img.parentNode, centerX, 0);
+        }
+        this.slide.classList.add('zoomed');
+        this.zoomedIn = true;
+      }
+    }, {
+      key: "zoomOut",
+      value: function zoomOut() {
+        this.img.parentNode.setAttribute('style', '');
+        this.img.setAttribute('style', this.img.getAttribute('data-style'));
+        this.slide.classList.remove('zoomed');
+        this.zoomedIn = false;
+        this.currentX = null;
+        this.currentY = null;
+        this.initialX = null;
+        this.initialY = null;
+        this.xOffset = 0;
+        this.yOffset = 0;
+        if (this.onclose && typeof this.onclose == 'function') {
+          this.onclose();
+        }
+      }
+    }, {
+      key: "dragStart",
+      value: function dragStart(e) {
+        e.preventDefault();
+        if (!this.zoomedIn) {
+          this.active = false;
+          return;
+        }
+        if (e.type === 'touchstart') {
+          this.initialX = e.touches[0].clientX - this.xOffset;
+          this.initialY = e.touches[0].clientY - this.yOffset;
+        } else {
+          this.initialX = e.clientX - this.xOffset;
+          this.initialY = e.clientY - this.yOffset;
+        }
+        if (e.target === this.img) {
+          this.active = true;
+          this.img.classList.add('dragging');
+        }
+      }
+    }, {
+      key: "dragEnd",
+      value: function dragEnd(e) {
+        var _this2 = this;
+        e.preventDefault();
+        this.initialX = this.currentX;
+        this.initialY = this.currentY;
+        this.active = false;
+        setTimeout(function () {
+          _this2.dragging = false;
+          _this2.img.isDragging = false;
+          _this2.img.classList.remove('dragging');
+        }, 100);
+      }
+    }, {
+      key: "drag",
+      value: function drag(e) {
+        if (this.active) {
+          e.preventDefault();
+          if (e.type === 'touchmove') {
+            this.currentX = e.touches[0].clientX - this.initialX;
+            this.currentY = e.touches[0].clientY - this.initialY;
+          } else {
+            this.currentX = e.clientX - this.initialX;
+            this.currentY = e.clientY - this.initialY;
+          }
+          this.xOffset = this.currentX;
+          this.yOffset = this.currentY;
+          this.img.isDragging = true;
+          this.dragging = true;
+          this.setTranslate(this.img, this.currentX, this.currentY);
+        }
+      }
+    }, {
+      key: "onMove",
+      value: function onMove(e) {
+        if (!this.zoomedIn) {
+          return;
+        }
+        var xOffset = e.clientX - this.img.naturalWidth / 2;
+        var yOffset = e.clientY - this.img.naturalHeight / 2;
+        this.setTranslate(this.img, xOffset, yOffset);
+      }
+    }, {
+      key: "setTranslate",
+      value: function setTranslate(node, xPos, yPos) {
+        node.style.transform = 'translate3d(' + xPos + 'px, ' + yPos + 'px, 0)';
+      }
+    }, {
+      key: "widowWidth",
+      value: function widowWidth() {
+        return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+      }
+    }]);
+  }();
+
+  var DragSlides = function () {
+    function DragSlides() {
+      var _this = this;
+      var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      _classCallCheck(this, DragSlides);
+      var dragEl = config.dragEl,
+        _config$toleranceX = config.toleranceX,
+        toleranceX = _config$toleranceX === void 0 ? 40 : _config$toleranceX,
+        _config$toleranceY = config.toleranceY,
+        toleranceY = _config$toleranceY === void 0 ? 65 : _config$toleranceY,
+        _config$slide = config.slide,
+        slide = _config$slide === void 0 ? null : _config$slide,
+        _config$instance = config.instance,
+        instance = _config$instance === void 0 ? null : _config$instance;
+      this.el = dragEl;
+      this.active = false;
+      this.dragging = false;
+      this.currentX = null;
+      this.currentY = null;
+      this.initialX = null;
+      this.initialY = null;
+      this.xOffset = 0;
+      this.yOffset = 0;
+      this.direction = null;
+      this.lastDirection = null;
+      this.toleranceX = toleranceX;
+      this.toleranceY = toleranceY;
+      this.toleranceReached = false;
+      this.dragContainer = this.el;
+      this.slide = slide;
+      this.instance = instance;
+      this.el.addEventListener('mousedown', function (e) {
+        return _this.dragStart(e);
+      }, false);
+      this.el.addEventListener('mouseup', function (e) {
+        return _this.dragEnd(e);
+      }, false);
+      this.el.addEventListener('mousemove', function (e) {
+        return _this.drag(e);
+      }, false);
+    }
+    return _createClass(DragSlides, [{
+      key: "dragStart",
+      value: function dragStart(e) {
+        if (this.slide.classList.contains('zoomed')) {
+          this.active = false;
+          return;
+        }
+        if (e.type === 'touchstart') {
+          this.initialX = e.touches[0].clientX - this.xOffset;
+          this.initialY = e.touches[0].clientY - this.yOffset;
+        } else {
+          this.initialX = e.clientX - this.xOffset;
+          this.initialY = e.clientY - this.yOffset;
+        }
+        var clicked = e.target.nodeName.toLowerCase();
+        var exludeClicks = ['input', 'select', 'textarea', 'button', 'a'];
+        if (e.target.classList.contains('nodrag') || closest(e.target, '.nodrag') || exludeClicks.indexOf(clicked) !== -1) {
+          this.active = false;
+          return;
+        }
+        e.preventDefault();
+        if (e.target === this.el || clicked !== 'img' && closest(e.target, '.gslide-inline')) {
+          this.active = true;
+          this.el.classList.add('dragging');
+          this.dragContainer = closest(e.target, '.ginner-container');
+        }
+      }
+    }, {
+      key: "dragEnd",
+      value: function dragEnd(e) {
+        var _this2 = this;
+        e && e.preventDefault();
+        this.initialX = 0;
+        this.initialY = 0;
+        this.currentX = null;
+        this.currentY = null;
+        this.initialX = null;
+        this.initialY = null;
+        this.xOffset = 0;
+        this.yOffset = 0;
+        this.active = false;
+        if (this.doSlideChange) {
+          this.instance.preventOutsideClick = true;
+          this.doSlideChange == 'right' && this.instance.prevSlide();
+          this.doSlideChange == 'left' && this.instance.nextSlide();
+        }
+        if (this.doSlideClose) {
+          this.instance.close();
+        }
+        if (!this.toleranceReached) {
+          this.setTranslate(this.dragContainer, 0, 0, true);
+        }
+        setTimeout(function () {
+          _this2.instance.preventOutsideClick = false;
+          _this2.toleranceReached = false;
+          _this2.lastDirection = null;
+          _this2.dragging = false;
+          _this2.el.isDragging = false;
+          _this2.el.classList.remove('dragging');
+          _this2.slide.classList.remove('dragging-nav');
+          _this2.dragContainer.style.transform = '';
+          _this2.dragContainer.style.transition = '';
+        }, 100);
+      }
+    }, {
+      key: "drag",
+      value: function drag(e) {
+        if (this.active) {
+          e.preventDefault();
+          this.slide.classList.add('dragging-nav');
+          if (e.type === 'touchmove') {
+            this.currentX = e.touches[0].clientX - this.initialX;
+            this.currentY = e.touches[0].clientY - this.initialY;
+          } else {
+            this.currentX = e.clientX - this.initialX;
+            this.currentY = e.clientY - this.initialY;
+          }
+          this.xOffset = this.currentX;
+          this.yOffset = this.currentY;
+          this.el.isDragging = true;
+          this.dragging = true;
+          this.doSlideChange = false;
+          this.doSlideClose = false;
+          var currentXInt = Math.abs(this.currentX);
+          var currentYInt = Math.abs(this.currentY);
+          if (currentXInt > 0 && currentXInt >= Math.abs(this.currentY) && (!this.lastDirection || this.lastDirection == 'x')) {
+            this.yOffset = 0;
+            this.lastDirection = 'x';
+            this.setTranslate(this.dragContainer, this.currentX, 0);
+            var doChange = this.shouldChange();
+            if (!this.instance.settings.dragAutoSnap && doChange) {
+              this.doSlideChange = doChange;
+            }
+            if (this.instance.settings.dragAutoSnap && doChange) {
+              this.instance.preventOutsideClick = true;
+              this.toleranceReached = true;
+              this.active = false;
+              this.instance.preventOutsideClick = true;
+              this.dragEnd(null);
+              doChange == 'right' && this.instance.prevSlide();
+              doChange == 'left' && this.instance.nextSlide();
+              return;
+            }
+          }
+          if (this.toleranceY > 0 && currentYInt > 0 && currentYInt >= currentXInt && (!this.lastDirection || this.lastDirection == 'y')) {
+            this.xOffset = 0;
+            this.lastDirection = 'y';
+            this.setTranslate(this.dragContainer, 0, this.currentY);
+            var doClose = this.shouldClose();
+            if (!this.instance.settings.dragAutoSnap && doClose) {
+              this.doSlideClose = true;
+            }
+            if (this.instance.settings.dragAutoSnap && doClose) {
+              this.instance.close();
+            }
+            return;
+          }
+        }
+      }
+    }, {
+      key: "shouldChange",
+      value: function shouldChange() {
+        var doChange = false;
+        var currentXInt = Math.abs(this.currentX);
+        if (currentXInt >= this.toleranceX) {
+          var dragDir = this.currentX > 0 ? 'right' : 'left';
+          if (dragDir == 'left' && this.slide !== this.slide.parentNode.lastChild || dragDir == 'right' && this.slide !== this.slide.parentNode.firstChild) {
+            doChange = dragDir;
+          }
+        }
+        return doChange;
+      }
+    }, {
+      key: "shouldClose",
+      value: function shouldClose() {
+        var doClose = false;
+        var currentYInt = Math.abs(this.currentY);
+        if (currentYInt >= this.toleranceY) {
+          doClose = true;
+        }
+        return doClose;
+      }
+    }, {
+      key: "setTranslate",
+      value: function setTranslate(node, xPos, yPos) {
+        var animated = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+        if (animated) {
+          node.style.transition = 'all .2s ease';
+        } else {
+          node.style.transition = '';
+        }
+        node.style.transform = "translate3d(".concat(xPos, "px, ").concat(yPos, "px, 0)");
+      }
+    }]);
+  }();
+
+  function slideImage(slide, data, index, callback) {
+    var slideMedia = slide.querySelector('.gslide-media');
+    var img = new Image();
+    var titleID = 'gSlideTitle_' + index;
+    var textID = 'gSlideDesc_' + index;
+    img.addEventListener('load', function () {
+      if (isFunction(callback)) {
+        callback();
+      }
+    }, false);
+    img.src = data.href;
+    if (data.sizes != '' && data.srcset != '') {
+      img.sizes = data.sizes;
+      img.srcset = data.srcset;
+    }
+    img.alt = '';
+    if (!isNil(data.alt) && data.alt !== '') {
+      img.alt = data.alt;
+    }
+    if (data.title !== '') {
+      img.setAttribute('aria-labelledby', titleID);
+    }
+    if (data.description !== '') {
+      img.setAttribute('aria-describedby', textID);
+    }
+    if (data.hasOwnProperty('_hasCustomWidth') && data._hasCustomWidth) {
+      img.style.width = data.width;
+    }
+    if (data.hasOwnProperty('_hasCustomHeight') && data._hasCustomHeight) {
+      img.style.height = data.height;
+    }
+    slideMedia.insertBefore(img, slideMedia.firstChild);
+    return;
+  }
+
+  function slideVideo(slide, data, index, callback) {
+    var _this = this;
+    var slideContainer = slide.querySelector('.ginner-container');
+    var videoID = 'gvideo' + index;
+    var slideMedia = slide.querySelector('.gslide-media');
+    var videoPlayers = this.getAllPlayers();
+    addClass(slideContainer, 'gvideo-container');
+    slideMedia.insertBefore(createHTML('<div class="gvideo-wrapper"></div>'), slideMedia.firstChild);
+    var videoWrapper = slide.querySelector('.gvideo-wrapper');
+    injectAssets(this.settings.plyr.css, 'Plyr');
+    var url = data.href;
+    var provider = data === null || data === void 0 ? void 0 : data.videoProvider;
+    var customPlaceholder = false;
+    slideMedia.style.maxWidth = data.width;
+    injectAssets(this.settings.plyr.js, 'Plyr', function () {
+      if (!provider && url.match(/vimeo\.com\/([0-9]*)/)) {
+        provider = 'vimeo';
+      }
+      if (!provider && (url.match(/(youtube\.com|youtube-nocookie\.com)\/watch\?v=([a-zA-Z0-9\-_]+)/) || url.match(/youtu\.be\/([a-zA-Z0-9\-_]+)/) || url.match(/(youtube\.com|youtube-nocookie\.com)\/embed\/([a-zA-Z0-9\-_]+)/) || url.match(/(youtube\.com|youtube-nocookie\.com)\/shorts\/([a-zA-Z0-9\-_]+)/))) {
+        provider = 'youtube';
+      }
+      if (provider === 'local' || !provider) {
+        provider = 'local';
+        var html = '<video id="' + videoID + '" ';
+        html += "style=\"background:#000; max-width: ".concat(data.width, ";\" ");
+        html += 'preload="metadata" ';
+        html += 'x-webkit-airplay="allow" ';
+        html += 'playsinline ';
+        html += 'controls ';
+        html += 'class="gvideo-local">';
+        html += "<source src=\"".concat(url, "\">");
+        html += '</video>';
+        customPlaceholder = createHTML(html);
+      }
+      var placeholder = customPlaceholder ? customPlaceholder : createHTML("<div id=\"".concat(videoID, "\" data-plyr-provider=\"").concat(provider, "\" data-plyr-embed-id=\"").concat(url, "\"></div>"));
+      addClass(videoWrapper, "".concat(provider, "-video gvideo"));
+      videoWrapper.appendChild(placeholder);
+      videoWrapper.setAttribute('data-id', videoID);
+      videoWrapper.setAttribute('data-index', index);
+      var playerConfig = has(_this.settings.plyr, 'config') ? _this.settings.plyr.config : {};
+      var player = new Plyr('#' + videoID, playerConfig);
+      player.on('ready', function (event) {
+        videoPlayers[videoID] = event.detail.plyr;
+        if (isFunction(callback)) {
+          callback();
+        }
+      });
+      waitUntil(function () {
+        return slide.querySelector('iframe') && slide.querySelector('iframe').dataset.ready == 'true';
+      }, function () {
+        _this.resize(slide);
+      });
+      player.on('enterfullscreen', handleMediaFullScreen);
+      player.on('exitfullscreen', handleMediaFullScreen);
+    });
+  }
+  function handleMediaFullScreen(event) {
+    var media = closest(event.target, '.gslide-media');
+    if (event.type === 'enterfullscreen') {
+      addClass(media, 'fullscreen');
+    }
+    if (event.type === 'exitfullscreen') {
+      removeClass(media, 'fullscreen');
+    }
+  }
+
+  function slideInline(slide, data, index, callback) {
+    var _this = this;
+    var slideMedia = slide.querySelector('.gslide-media');
+    var hash = has(data, 'href') && data.href ? data.href.split('#').pop().trim() : false;
+    var content = has(data, 'content') && data.content ? data.content : false;
+    var innerContent;
+    if (content) {
+      if (isString(content)) {
+        innerContent = createHTML("<div class=\"ginlined-content\">".concat(content, "</div>"));
+      }
+      if (isNode(content)) {
+        if (content.style.display == 'none') {
+          content.style.display = 'block';
+        }
+        var container = document.createElement('div');
+        container.className = 'ginlined-content';
+        container.appendChild(content);
+        innerContent = container;
+      }
+    }
+    if (hash) {
+      var div = document.getElementById(hash);
+      if (!div) {
+        return false;
+      }
+      var cloned = div.cloneNode(true);
+      cloned.style.height = data.height;
+      cloned.style.maxWidth = data.width;
+      addClass(cloned, 'ginlined-content');
+      innerContent = cloned;
+    }
+    if (!innerContent) {
+      console.error('Unable to append inline slide content', data);
+      return false;
+    }
+    slideMedia.style.height = data.height;
+    slideMedia.style.width = data.width;
+    slideMedia.appendChild(innerContent);
+    this.events['inlineclose' + hash] = addEvent('click', {
+      onElement: slideMedia.querySelectorAll('.gtrigger-close'),
+      withCallback: function withCallback(e) {
+        e.preventDefault();
+        _this.close();
+      }
+    });
+    if (isFunction(callback)) {
+      callback();
+    }
+    return;
+  }
+
+  function slideIframe(slide, data, index, callback) {
+    var slideMedia = slide.querySelector('.gslide-media');
+    var iframe = createIframe({
+      url: data.href,
+      callback: callback
+    });
+    slideMedia.parentNode.style.maxWidth = data.width;
+    slideMedia.parentNode.style.height = data.height;
+    slideMedia.appendChild(iframe);
+    return;
+  }
+
+  var SlideConfigParser = function () {
+    function SlideConfigParser() {
+      var slideParamas = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      _classCallCheck(this, SlideConfigParser);
+      this.defaults = {
+        href: '',
+        sizes: '',
+        srcset: '',
+        title: '',
+        type: '',
+        videoProvider: '',
+        description: '',
+        alt: '',
+        descPosition: 'bottom',
+        effect: '',
+        width: '',
+        height: '',
+        content: false,
+        zoomable: true,
+        draggable: true
+      };
+      if (isObject(slideParamas)) {
+        this.defaults = extend(this.defaults, slideParamas);
+      }
+    }
+    return _createClass(SlideConfigParser, [{
+      key: "sourceType",
+      value: function sourceType(url) {
+        var origin = url;
+        url = url.toLowerCase();
+        if (url.match(/\.(jpeg|jpg|jpe|gif|png|apn|webp|avif|svg)/) !== null) {
+          return 'image';
+        }
+        if (url.match(/(youtube\.com|youtube-nocookie\.com)\/watch\?v=([a-zA-Z0-9\-_]+)/) || url.match(/youtu\.be\/([a-zA-Z0-9\-_]+)/) || url.match(/(youtube\.com|youtube-nocookie\.com)\/embed\/([a-zA-Z0-9\-_]+)/) || url.match(/(youtube\.com|youtube-nocookie\.com)\/shorts\/([a-zA-Z0-9\-_]+)/)) {
+          return 'video';
+        }
+        if (url.match(/vimeo\.com\/([0-9]*)/)) {
+          return 'video';
+        }
+        if (url.match(/\.(mp4|ogg|webm|mov)/) !== null) {
+          return 'video';
+        }
+        if (url.match(/\.(mp3|wav|wma|aac|ogg)/) !== null) {
+          return 'audio';
+        }
+        if (url.indexOf('#') > -1) {
+          var hash = origin.split('#').pop();
+          if (hash.trim() !== '') {
+            return 'inline';
+          }
+        }
+        if (url.indexOf('goajax=true') > -1) {
+          return 'ajax';
+        }
+        return 'external';
+      }
+    }, {
+      key: "parseConfig",
+      value: function parseConfig(element, settings) {
+        var _this = this;
+        var data = extend({
+          descPosition: settings.descPosition
+        }, this.defaults);
+        if (isObject(element) && !isNode(element)) {
+          if (!has(element, 'type')) {
+            if (has(element, 'content') && element.content) {
+              element.type = 'inline';
+            } else if (has(element, 'href')) {
+              element.type = this.sourceType(element.href);
+            }
+          }
+          var objectData = extend(data, element);
+          this.setSize(objectData, settings);
+          return objectData;
+        }
+        var url = '';
+        var config = element.getAttribute('data-glightbox');
+        var nodeType = element.nodeName.toLowerCase();
+        if (nodeType === 'a') {
+          url = element.href;
+        }
+        if (nodeType === 'img') {
+          url = element.src;
+          data.alt = element.alt;
+        }
+        data.href = url;
+        each(data, function (val, key) {
+          if (has(settings, key) && key !== 'width') {
+            data[key] = settings[key];
+          }
+          var nodeData = element.dataset[key];
+          if (!isNil(nodeData)) {
+            data[key] = _this.sanitizeValue(nodeData);
+          }
+        });
+        if (data.content) {
+          data.type = 'inline';
+        }
+        if (!data.type && url) {
+          data.type = this.sourceType(url);
+        }
+        if (!isNil(config)) {
+          var cleanKeys = [];
+          each(data, function (v, k) {
+            cleanKeys.push(';\\s?' + k);
+          });
+          cleanKeys = cleanKeys.join('\\s?:|');
+          if (config.trim() !== '') {
+            each(data, function (val, key) {
+              var str = config;
+              var match = 's?' + key + 's?:s?(.*?)(' + cleanKeys + 's?:|$)';
+              var regex = new RegExp(match);
+              var matches = str.match(regex);
+              if (matches && matches.length && matches[1]) {
+                var value = matches[1].trim().replace(/;\s*$/, '');
+                data[key] = _this.sanitizeValue(value);
+              }
+            });
+          }
+        } else {
+          if (!data.title && nodeType == 'a') {
+            var title = element.title;
+            if (!isNil(title) && title !== '') {
+              data.title = title;
+            }
+          }
+          if (!data.title && nodeType == 'img') {
+            var alt = element.alt;
+            if (!isNil(alt) && alt !== '') {
+              data.title = alt;
+            }
+          }
+        }
+        if (data.description && data.description.substring(0, 1) === '.') {
+          var description;
+          try {
+            description = document.querySelector(data.description).innerHTML;
+          } catch (error) {
+            if (!(error instanceof DOMException)) {
+              throw error;
+            }
+          }
+          if (description) {
+            data.description = description;
+          }
+        }
+        if (!data.description) {
+          var nodeDesc = element.querySelector('.glightbox-desc');
+          if (nodeDesc) {
+            data.description = nodeDesc.innerHTML;
+          }
+        }
+        this.setSize(data, settings, element);
+        this.slideConfig = data;
+        return data;
+      }
+    }, {
+      key: "setSize",
+      value: function setSize(data, settings) {
+        var element = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+        var defaultWith = data.type == 'video' ? this.checkSize(settings.videosWidth) : this.checkSize(settings.width);
+        var defaultHeight = this.checkSize(settings.height);
+        data.width = has(data, 'width') && data.width !== '' ? this.checkSize(data.width) : defaultWith;
+        data.height = has(data, 'height') && data.height !== '' ? this.checkSize(data.height) : defaultHeight;
+        if (element && data.type == 'image') {
+          data._hasCustomWidth = element.dataset.width ? true : false;
+          data._hasCustomHeight = element.dataset.height ? true : false;
+        }
+        return data;
+      }
+    }, {
+      key: "checkSize",
+      value: function checkSize(size) {
+        return isNumber(size) ? "".concat(size, "px") : size;
+      }
+    }, {
+      key: "sanitizeValue",
+      value: function sanitizeValue(val) {
+        if (val !== 'true' && val !== 'false') {
+          return val;
+        }
+        return val === 'true';
+      }
+    }]);
+  }();
+
+  var Slide = function () {
+    function Slide(el, instance, index) {
+      _classCallCheck(this, Slide);
+      this.element = el;
+      this.instance = instance;
+      this.index = index;
+    }
+    return _createClass(Slide, [{
+      key: "setContent",
+      value: function setContent() {
+        var _this = this;
+        var slide = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+        var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+        if (hasClass(slide, 'loaded')) {
+          return false;
+        }
+        var settings = this.instance.settings;
+        var slideConfig = this.slideConfig;
+        var isMobileDevice = isMobile();
+        if (isFunction(settings.beforeSlideLoad)) {
+          settings.beforeSlideLoad({
+            index: this.index,
+            slide: slide,
+            player: false
+          });
+        }
+        var type = slideConfig.type;
+        var position = slideConfig.descPosition;
+        var slideMedia = slide.querySelector('.gslide-media');
+        var slideTitle = slide.querySelector('.gslide-title');
+        var slideText = slide.querySelector('.gslide-desc');
+        var slideDesc = slide.querySelector('.gdesc-inner');
+        var finalCallback = callback;
+        var titleID = 'gSlideTitle_' + this.index;
+        var textID = 'gSlideDesc_' + this.index;
+        if (isFunction(settings.afterSlideLoad)) {
+          finalCallback = function finalCallback() {
+            if (isFunction(callback)) {
+              callback();
+            }
+            settings.afterSlideLoad({
+              index: _this.index,
+              slide: slide,
+              player: _this.instance.getSlidePlayerInstance(_this.index)
+            });
+          };
+        }
+        if (slideConfig.title == '' && slideConfig.description == '') {
+          if (slideDesc) {
+            slideDesc.parentNode.parentNode.removeChild(slideDesc.parentNode);
+          }
+        } else {
+          if (slideTitle && slideConfig.title !== '') {
+            slideTitle.id = titleID;
+            slideTitle.innerHTML = slideConfig.title;
+          } else {
+            slideTitle.parentNode.removeChild(slideTitle);
+          }
+          if (slideText && slideConfig.description !== '') {
+            slideText.id = textID;
+            if (isMobileDevice && settings.moreLength > 0) {
+              slideConfig.smallDescription = this.slideShortDesc(slideConfig.description, settings.moreLength, settings.moreText);
+              slideText.innerHTML = slideConfig.smallDescription;
+              this.descriptionEvents(slideText, slideConfig);
+            } else {
+              slideText.innerHTML = slideConfig.description;
+            }
+          } else {
+            slideText.parentNode.removeChild(slideText);
+          }
+          addClass(slideMedia.parentNode, "desc-".concat(position));
+          addClass(slideDesc.parentNode, "description-".concat(position));
+        }
+        addClass(slideMedia, "gslide-".concat(type));
+        addClass(slide, 'loaded');
+        if (type === 'video') {
+          slideVideo.apply(this.instance, [slide, slideConfig, this.index, finalCallback]);
+          return;
+        }
+        if (type === 'external') {
+          slideIframe.apply(this, [slide, slideConfig, this.index, finalCallback]);
+          return;
+        }
+        if (type === 'inline') {
+          slideInline.apply(this.instance, [slide, slideConfig, this.index, finalCallback]);
+          if (slideConfig.draggable) {
+            new DragSlides({
+              dragEl: slide.querySelector('.gslide-inline'),
+              toleranceX: settings.dragToleranceX,
+              toleranceY: settings.dragToleranceY,
+              slide: slide,
+              instance: this.instance
+            });
+          }
+          return;
+        }
+        if (type === 'image') {
+          slideImage(slide, slideConfig, this.index, function () {
+            var img = slide.querySelector('img');
+            if (slideConfig.draggable) {
+              new DragSlides({
+                dragEl: img,
+                toleranceX: settings.dragToleranceX,
+                toleranceY: settings.dragToleranceY,
+                slide: slide,
+                instance: _this.instance
+              });
+            }
+            if (slideConfig.zoomable && img.naturalWidth > img.offsetWidth) {
+              addClass(img, 'zoomable');
+              new ZoomImages(img, slide, function () {
+                _this.instance.resize();
+              });
+            }
+            if (isFunction(finalCallback)) {
+              finalCallback();
+            }
+          });
+          return;
+        }
+        if (isFunction(finalCallback)) {
+          finalCallback();
+        }
+      }
+    }, {
+      key: "slideShortDesc",
+      value: function slideShortDesc(string) {
+        var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 50;
+        var wordBoundary = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+        var div = document.createElement('div');
+        div.innerHTML = string;
+        var cleanedString = div.innerText;
+        var useWordBoundary = wordBoundary;
+        string = cleanedString.trim();
+        if (string.length <= n) {
+          return string;
+        }
+        var subString = string.substr(0, n - 1);
+        if (!useWordBoundary) {
+          return subString;
+        }
+        div = null;
+        return subString + '... <a href="#" class="desc-more">' + wordBoundary + '</a>';
+      }
+    }, {
+      key: "descriptionEvents",
+      value: function descriptionEvents(desc, data) {
+        var _this2 = this;
+        var moreLink = desc.querySelector('.desc-more');
+        if (!moreLink) {
+          return false;
+        }
+        addEvent('click', {
+          onElement: moreLink,
+          withCallback: function withCallback(event, target) {
+            event.preventDefault();
+            var body = document.body;
+            var desc = closest(target, '.gslide-desc');
+            if (!desc) {
+              return false;
+            }
+            desc.innerHTML = data.description;
+            addClass(body, 'gdesc-open');
+            var shortEvent = addEvent('click', {
+              onElement: [body, closest(desc, '.gslide-description')],
+              withCallback: function withCallback(event, target) {
+                if (event.target.nodeName.toLowerCase() !== 'a') {
+                  removeClass(body, 'gdesc-open');
+                  addClass(body, 'gdesc-closed');
+                  desc.innerHTML = data.smallDescription;
+                  _this2.descriptionEvents(desc, data);
+                  setTimeout(function () {
+                    removeClass(body, 'gdesc-closed');
+                  }, 400);
+                  shortEvent.destroy();
+                }
+              }
+            });
+          }
+        });
+      }
+    }, {
+      key: "create",
+      value: function create() {
+        return createHTML(this.instance.settings.slideHTML);
+      }
+    }, {
+      key: "getConfig",
+      value: function getConfig() {
+        if (!isNode(this.element) && !this.element.hasOwnProperty('draggable')) {
+          this.element.draggable = this.instance.settings.draggable;
+        }
+        var parser = new SlideConfigParser(this.instance.settings.slideExtraAttributes);
+        this.slideConfig = parser.parseConfig(this.element, this.instance.settings);
+        return this.slideConfig;
+      }
+    }]);
+  }();
+
+  function getLen(v) {
+    return Math.sqrt(v.x * v.x + v.y * v.y);
+  }
+  function dot(v1, v2) {
+    return v1.x * v2.x + v1.y * v2.y;
+  }
+  function getAngle(v1, v2) {
+    var mr = getLen(v1) * getLen(v2);
+    if (mr === 0) {
+      return 0;
+    }
+    var r = dot(v1, v2) / mr;
+    if (r > 1) {
+      r = 1;
+    }
+    return Math.acos(r);
+  }
+  function cross(v1, v2) {
+    return v1.x * v2.y - v2.x * v1.y;
+  }
+  function getRotateAngle(v1, v2) {
+    var angle = getAngle(v1, v2);
+    if (cross(v1, v2) > 0) {
+      angle *= -1;
+    }
+    return angle * 180 / Math.PI;
+  }
+  var EventsHandlerAdmin = function () {
+    function EventsHandlerAdmin(el) {
+      _classCallCheck(this, EventsHandlerAdmin);
+      this.handlers = [];
+      this.el = el;
+    }
+    return _createClass(EventsHandlerAdmin, [{
+      key: "add",
+      value: function add(handler) {
+        this.handlers.push(handler);
+      }
+    }, {
+      key: "del",
+      value: function del(handler) {
+        if (!handler) {
+          this.handlers = [];
+        }
+        for (var i = this.handlers.length; i >= 0; i--) {
+          if (this.handlers[i] === handler) {
+            this.handlers.splice(i, 1);
+          }
+        }
+      }
+    }, {
+      key: "dispatch",
+      value: function dispatch() {
+        for (var i = 0, len = this.handlers.length; i < len; i++) {
+          var handler = this.handlers[i];
+          if (typeof handler === 'function') {
+            handler.apply(this.el, arguments);
+          }
+        }
+      }
+    }]);
+  }();
+  function wrapFunc(el, handler) {
+    var EventshandlerAdmin = new EventsHandlerAdmin(el);
+    EventshandlerAdmin.add(handler);
+    return EventshandlerAdmin;
+  }
+  var TouchEvents = function () {
+    function TouchEvents(el, option) {
+      _classCallCheck(this, TouchEvents);
+      this.element = typeof el == 'string' ? document.querySelector(el) : el;
+      this.start = this.start.bind(this);
+      this.move = this.move.bind(this);
+      this.end = this.end.bind(this);
+      this.cancel = this.cancel.bind(this);
+      this.element.addEventListener('touchstart', this.start, false);
+      this.element.addEventListener('touchmove', this.move, false);
+      this.element.addEventListener('touchend', this.end, false);
+      this.element.addEventListener('touchcancel', this.cancel, false);
+      this.preV = {
+        x: null,
+        y: null
+      };
+      this.pinchStartLen = null;
+      this.zoom = 1;
+      this.isDoubleTap = false;
+      var noop = function noop() {};
+      this.rotate = wrapFunc(this.element, option.rotate || noop);
+      this.touchStart = wrapFunc(this.element, option.touchStart || noop);
+      this.multipointStart = wrapFunc(this.element, option.multipointStart || noop);
+      this.multipointEnd = wrapFunc(this.element, option.multipointEnd || noop);
+      this.pinch = wrapFunc(this.element, option.pinch || noop);
+      this.swipe = wrapFunc(this.element, option.swipe || noop);
+      this.tap = wrapFunc(this.element, option.tap || noop);
+      this.doubleTap = wrapFunc(this.element, option.doubleTap || noop);
+      this.longTap = wrapFunc(this.element, option.longTap || noop);
+      this.singleTap = wrapFunc(this.element, option.singleTap || noop);
+      this.pressMove = wrapFunc(this.element, option.pressMove || noop);
+      this.twoFingerPressMove = wrapFunc(this.element, option.twoFingerPressMove || noop);
+      this.touchMove = wrapFunc(this.element, option.touchMove || noop);
+      this.touchEnd = wrapFunc(this.element, option.touchEnd || noop);
+      this.touchCancel = wrapFunc(this.element, option.touchCancel || noop);
+      this.translateContainer = this.element;
+      this._cancelAllHandler = this.cancelAll.bind(this);
+      window.addEventListener('scroll', this._cancelAllHandler);
+      this.delta = null;
+      this.last = null;
+      this.now = null;
+      this.tapTimeout = null;
+      this.singleTapTimeout = null;
+      this.longTapTimeout = null;
+      this.swipeTimeout = null;
+      this.x1 = this.x2 = this.y1 = this.y2 = null;
+      this.preTapPosition = {
+        x: null,
+        y: null
+      };
+    }
+    return _createClass(TouchEvents, [{
+      key: "start",
+      value: function start(evt) {
+        if (!evt.touches) {
+          return;
+        }
+        var ignoreDragFor = ['a', 'button', 'input'];
+        if (evt.target && evt.target.nodeName && ignoreDragFor.indexOf(evt.target.nodeName.toLowerCase()) >= 0) {
+          console.log('ignore drag for this touched element', evt.target.nodeName.toLowerCase());
+          return;
+        }
+        this.now = Date.now();
+        this.x1 = evt.touches[0].pageX;
+        this.y1 = evt.touches[0].pageY;
+        this.delta = this.now - (this.last || this.now);
+        this.touchStart.dispatch(evt, this.element);
+        if (this.preTapPosition.x !== null) {
+          this.isDoubleTap = this.delta > 0 && this.delta <= 250 && Math.abs(this.preTapPosition.x - this.x1) < 30 && Math.abs(this.preTapPosition.y - this.y1) < 30;
+          if (this.isDoubleTap) {
+            clearTimeout(this.singleTapTimeout);
+          }
+        }
+        this.preTapPosition.x = this.x1;
+        this.preTapPosition.y = this.y1;
+        this.last = this.now;
+        var preV = this.preV,
+          len = evt.touches.length;
+        if (len > 1) {
+          this._cancelLongTap();
+          this._cancelSingleTap();
+          var v = {
+            x: evt.touches[1].pageX - this.x1,
+            y: evt.touches[1].pageY - this.y1
+          };
+          preV.x = v.x;
+          preV.y = v.y;
+          this.pinchStartLen = getLen(preV);
+          this.multipointStart.dispatch(evt, this.element);
+        }
+        this._preventTap = false;
+        this.longTapTimeout = setTimeout(function () {
+          this.longTap.dispatch(evt, this.element);
+          this._preventTap = true;
+        }.bind(this), 750);
+      }
+    }, {
+      key: "move",
+      value: function move(evt) {
+        if (!evt.touches) {
+          return;
+        }
+        var preV = this.preV,
+          len = evt.touches.length,
+          currentX = evt.touches[0].pageX,
+          currentY = evt.touches[0].pageY;
+        this.isDoubleTap = false;
+        if (len > 1) {
+          var sCurrentX = evt.touches[1].pageX,
+            sCurrentY = evt.touches[1].pageY;
+          var v = {
+            x: evt.touches[1].pageX - currentX,
+            y: evt.touches[1].pageY - currentY
+          };
+          if (preV.x !== null) {
+            if (this.pinchStartLen > 0) {
+              evt.zoom = getLen(v) / this.pinchStartLen;
+              this.pinch.dispatch(evt, this.element);
+            }
+            evt.angle = getRotateAngle(v, preV);
+            this.rotate.dispatch(evt, this.element);
+          }
+          preV.x = v.x;
+          preV.y = v.y;
+          if (this.x2 !== null && this.sx2 !== null) {
+            evt.deltaX = (currentX - this.x2 + sCurrentX - this.sx2) / 2;
+            evt.deltaY = (currentY - this.y2 + sCurrentY - this.sy2) / 2;
+          } else {
+            evt.deltaX = 0;
+            evt.deltaY = 0;
+          }
+          this.twoFingerPressMove.dispatch(evt, this.element);
+          this.sx2 = sCurrentX;
+          this.sy2 = sCurrentY;
+        } else {
+          if (this.x2 !== null) {
+            evt.deltaX = currentX - this.x2;
+            evt.deltaY = currentY - this.y2;
+            var movedX = Math.abs(this.x1 - this.x2),
+              movedY = Math.abs(this.y1 - this.y2);
+            if (movedX > 10 || movedY > 10) {
+              this._preventTap = true;
+            }
+          } else {
+            evt.deltaX = 0;
+            evt.deltaY = 0;
+          }
+          this.pressMove.dispatch(evt, this.element);
+        }
+        this.touchMove.dispatch(evt, this.element);
+        this._cancelLongTap();
+        this.x2 = currentX;
+        this.y2 = currentY;
+        if (len > 1) {
+          evt.preventDefault();
+        }
+      }
+    }, {
+      key: "end",
+      value: function end(evt) {
+        if (!evt.changedTouches) {
+          return;
+        }
+        this._cancelLongTap();
+        var self = this;
+        if (evt.touches.length < 2) {
+          this.multipointEnd.dispatch(evt, this.element);
+          this.sx2 = this.sy2 = null;
+        }
+        if (this.x2 && Math.abs(this.x1 - this.x2) > 30 || this.y2 && Math.abs(this.y1 - this.y2) > 30) {
+          evt.direction = this._swipeDirection(this.x1, this.x2, this.y1, this.y2);
+          this.swipeTimeout = setTimeout(function () {
+            self.swipe.dispatch(evt, self.element);
+          }, 0);
+        } else {
+          this.tapTimeout = setTimeout(function () {
+            if (!self._preventTap) {
+              self.tap.dispatch(evt, self.element);
+            }
+            if (self.isDoubleTap) {
+              self.doubleTap.dispatch(evt, self.element);
+              self.isDoubleTap = false;
+            }
+          }, 0);
+          if (!self.isDoubleTap) {
+            self.singleTapTimeout = setTimeout(function () {
+              self.singleTap.dispatch(evt, self.element);
+            }, 250);
+          }
+        }
+        this.touchEnd.dispatch(evt, this.element);
+        this.preV.x = 0;
+        this.preV.y = 0;
+        this.zoom = 1;
+        this.pinchStartLen = null;
+        this.x1 = this.x2 = this.y1 = this.y2 = null;
+      }
+    }, {
+      key: "cancelAll",
+      value: function cancelAll() {
+        this._preventTap = true;
+        clearTimeout(this.singleTapTimeout);
+        clearTimeout(this.tapTimeout);
+        clearTimeout(this.longTapTimeout);
+        clearTimeout(this.swipeTimeout);
+      }
+    }, {
+      key: "cancel",
+      value: function cancel(evt) {
+        this.cancelAll();
+        this.touchCancel.dispatch(evt, this.element);
+      }
+    }, {
+      key: "_cancelLongTap",
+      value: function _cancelLongTap() {
+        clearTimeout(this.longTapTimeout);
+      }
+    }, {
+      key: "_cancelSingleTap",
+      value: function _cancelSingleTap() {
+        clearTimeout(this.singleTapTimeout);
+      }
+    }, {
+      key: "_swipeDirection",
+      value: function _swipeDirection(x1, x2, y1, y2) {
+        return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? x1 - x2 > 0 ? 'Left' : 'Right' : y1 - y2 > 0 ? 'Up' : 'Down';
+      }
+    }, {
+      key: "on",
+      value: function on(evt, handler) {
+        if (this[evt]) {
+          this[evt].add(handler);
+        }
+      }
+    }, {
+      key: "off",
+      value: function off(evt, handler) {
+        if (this[evt]) {
+          this[evt].del(handler);
+        }
+      }
+    }, {
+      key: "destroy",
+      value: function destroy() {
+        if (this.singleTapTimeout) {
+          clearTimeout(this.singleTapTimeout);
+        }
+        if (this.tapTimeout) {
+          clearTimeout(this.tapTimeout);
+        }
+        if (this.longTapTimeout) {
+          clearTimeout(this.longTapTimeout);
+        }
+        if (this.swipeTimeout) {
+          clearTimeout(this.swipeTimeout);
+        }
+        this.element.removeEventListener('touchstart', this.start);
+        this.element.removeEventListener('touchmove', this.move);
+        this.element.removeEventListener('touchend', this.end);
+        this.element.removeEventListener('touchcancel', this.cancel);
+        this.rotate.del();
+        this.touchStart.del();
+        this.multipointStart.del();
+        this.multipointEnd.del();
+        this.pinch.del();
+        this.swipe.del();
+        this.tap.del();
+        this.doubleTap.del();
+        this.longTap.del();
+        this.singleTap.del();
+        this.pressMove.del();
+        this.twoFingerPressMove.del();
+        this.touchMove.del();
+        this.touchEnd.del();
+        this.touchCancel.del();
+        this.preV = this.pinchStartLen = this.zoom = this.isDoubleTap = this.delta = this.last = this.now = this.tapTimeout = this.singleTapTimeout = this.longTapTimeout = this.swipeTimeout = this.x1 = this.x2 = this.y1 = this.y2 = this.preTapPosition = this.rotate = this.touchStart = this.multipointStart = this.multipointEnd = this.pinch = this.swipe = this.tap = this.doubleTap = this.longTap = this.singleTap = this.pressMove = this.touchMove = this.touchEnd = this.touchCancel = this.twoFingerPressMove = null;
+        window.removeEventListener('scroll', this._cancelAllHandler);
+        return null;
+      }
+    }]);
+  }();
+
+  function resetSlideMove(slide) {
+    var transitionEnd = whichTransitionEvent();
+    var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+    var media = hasClass(slide, 'gslide-media') ? slide : slide.querySelector('.gslide-media');
+    var container = closest(media, '.ginner-container');
+    var desc = slide.querySelector('.gslide-description');
+    if (windowWidth > 769) {
+      media = container;
+    }
+    addClass(media, 'greset');
+    cssTransform(media, 'translate3d(0, 0, 0)');
+    addEvent(transitionEnd, {
+      onElement: media,
+      once: true,
+      withCallback: function withCallback(event, target) {
+        removeClass(media, 'greset');
+      }
+    });
+    media.style.opacity = '';
+    if (desc) {
+      desc.style.opacity = '';
+    }
+  }
+  function touchNavigation(instance) {
+    if (instance.events.hasOwnProperty('touch')) {
+      return false;
+    }
+    var winSize = windowSize();
+    var winWidth = winSize.width;
+    var winHeight = winSize.height;
+    var process = false;
+    var currentSlide = null;
+    var media = null;
+    var mediaImage = null;
+    var doingMove = false;
+    var initScale = 1;
+    var maxScale = 4.5;
+    var currentScale = 1;
+    var doingZoom = false;
+    var imageZoomed = false;
+    var zoomedPosX = null;
+    var zoomedPosY = null;
+    var lastZoomedPosX = null;
+    var lastZoomedPosY = null;
+    var hDistance;
+    var vDistance;
+    var hDistancePercent = 0;
+    var vDistancePercent = 0;
+    var vSwipe = false;
+    var hSwipe = false;
+    var startCoords = {};
+    var endCoords = {};
+    var xDown = 0;
+    var yDown = 0;
+    var isInlined;
+    var sliderWrapper = document.getElementById('glightbox-slider');
+    var overlay = document.querySelector('.goverlay');
+    var touchInstance = new TouchEvents(sliderWrapper, {
+      touchStart: function touchStart(e) {
+        process = true;
+        if (hasClass(e.targetTouches[0].target, 'ginner-container') || closest(e.targetTouches[0].target, '.gslide-desc') || e.targetTouches[0].target.nodeName.toLowerCase() == 'a') {
+          process = false;
+        }
+        if (closest(e.targetTouches[0].target, '.gslide-inline') && !hasClass(e.targetTouches[0].target.parentNode, 'gslide-inline')) {
+          process = false;
+        }
+        if (process) {
+          endCoords = e.targetTouches[0];
+          startCoords.pageX = e.targetTouches[0].pageX;
+          startCoords.pageY = e.targetTouches[0].pageY;
+          xDown = e.targetTouches[0].clientX;
+          yDown = e.targetTouches[0].clientY;
+          currentSlide = instance.activeSlide;
+          media = currentSlide.querySelector('.gslide-media');
+          isInlined = currentSlide.querySelector('.gslide-inline');
+          mediaImage = null;
+          if (hasClass(media, 'gslide-image')) {
+            mediaImage = media.querySelector('img');
+          }
+          var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+          if (windowWidth > 769) {
+            media = currentSlide.querySelector('.ginner-container');
+          }
+          removeClass(overlay, 'greset');
+          if (e.pageX > 20 && e.pageX < window.innerWidth - 20) {
+            return;
+          }
+          e.preventDefault();
+        }
+      },
+      touchMove: function touchMove(e) {
+        if (!process) {
+          return;
+        }
+        endCoords = e.targetTouches[0];
+        if (doingZoom || imageZoomed) {
+          return;
+        }
+        if (isInlined && isInlined.offsetHeight > winHeight) {
+          var moved = startCoords.pageX - endCoords.pageX;
+          if (Math.abs(moved) <= 13) {
+            return false;
+          }
+        }
+        doingMove = true;
+        var xUp = e.targetTouches[0].clientX;
+        var yUp = e.targetTouches[0].clientY;
+        var xDiff = xDown - xUp;
+        var yDiff = yDown - yUp;
+        if (Math.abs(xDiff) > Math.abs(yDiff)) {
+          vSwipe = false;
+          hSwipe = true;
+        } else {
+          hSwipe = false;
+          vSwipe = true;
+        }
+        hDistance = endCoords.pageX - startCoords.pageX;
+        hDistancePercent = hDistance * 100 / winWidth;
+        vDistance = endCoords.pageY - startCoords.pageY;
+        vDistancePercent = vDistance * 100 / winHeight;
+        var opacity;
+        if (vSwipe && mediaImage) {
+          opacity = 1 - Math.abs(vDistance) / winHeight;
+          overlay.style.opacity = opacity;
+          if (instance.settings.touchFollowAxis) {
+            hDistancePercent = 0;
+          }
+        }
+        if (hSwipe) {
+          opacity = 1 - Math.abs(hDistance) / winWidth;
+          media.style.opacity = opacity;
+          if (instance.settings.touchFollowAxis) {
+            vDistancePercent = 0;
+          }
+        }
+        if (!mediaImage) {
+          return cssTransform(media, "translate3d(".concat(hDistancePercent, "%, 0, 0)"));
+        }
+        cssTransform(media, "translate3d(".concat(hDistancePercent, "%, ").concat(vDistancePercent, "%, 0)"));
+      },
+      touchEnd: function touchEnd() {
+        if (!process) {
+          return;
+        }
+        doingMove = false;
+        if (imageZoomed || doingZoom) {
+          lastZoomedPosX = zoomedPosX;
+          lastZoomedPosY = zoomedPosY;
+          return;
+        }
+        var v = Math.abs(parseInt(vDistancePercent));
+        var h = Math.abs(parseInt(hDistancePercent));
+        if (v > 29 && mediaImage) {
+          instance.close();
+          return;
+        }
+        if (v < 29 && h < 25) {
+          addClass(overlay, 'greset');
+          overlay.style.opacity = 1;
+          return resetSlideMove(media);
+        }
+      },
+      multipointEnd: function multipointEnd() {
+        setTimeout(function () {
+          doingZoom = false;
+        }, 50);
+      },
+      multipointStart: function multipointStart() {
+        doingZoom = true;
+        initScale = currentScale ? currentScale : 1;
+      },
+      pinch: function pinch(evt) {
+        if (!mediaImage || doingMove) {
+          return false;
+        }
+        doingZoom = true;
+        mediaImage.scaleX = mediaImage.scaleY = initScale * evt.zoom;
+        var scale = initScale * evt.zoom;
+        imageZoomed = true;
+        if (scale <= 1) {
+          imageZoomed = false;
+          scale = 1;
+          lastZoomedPosY = null;
+          lastZoomedPosX = null;
+          zoomedPosX = null;
+          zoomedPosY = null;
+          mediaImage.setAttribute('style', '');
+          return;
+        }
+        if (scale > maxScale) {
+          scale = maxScale;
+        }
+        mediaImage.style.transform = "scale3d(".concat(scale, ", ").concat(scale, ", 1)");
+        currentScale = scale;
+      },
+      pressMove: function pressMove(e) {
+        if (imageZoomed && !doingZoom) {
+          var mhDistance = endCoords.pageX - startCoords.pageX;
+          var mvDistance = endCoords.pageY - startCoords.pageY;
+          if (lastZoomedPosX) {
+            mhDistance = mhDistance + lastZoomedPosX;
+          }
+          if (lastZoomedPosY) {
+            mvDistance = mvDistance + lastZoomedPosY;
+          }
+          zoomedPosX = mhDistance;
+          zoomedPosY = mvDistance;
+          var style = "translate3d(".concat(mhDistance, "px, ").concat(mvDistance, "px, 0)");
+          if (currentScale) {
+            style += " scale3d(".concat(currentScale, ", ").concat(currentScale, ", 1)");
+          }
+          cssTransform(mediaImage, style);
+        }
+      },
+      swipe: function swipe(evt) {
+        if (imageZoomed) {
+          return;
+        }
+        if (doingZoom) {
+          doingZoom = false;
+          return;
+        }
+        if (evt.direction == 'Left') {
+          if (instance.index == instance.elements.length - 1) {
+            return resetSlideMove(media);
+          }
+          instance.nextSlide();
+        }
+        if (evt.direction == 'Right') {
+          if (instance.index == 0) {
+            return resetSlideMove(media);
+          }
+          instance.prevSlide();
+        }
+      }
+    });
+    instance.events['touch'] = touchInstance;
+  }
+
+  var _version = '3.3.1';
+  var isMobile$1 = isMobile();
+  var isTouch$1 = isTouch();
+  var html = document.getElementsByTagName('html')[0];
+  var defaults = {
+    selector: '.glightbox',
+    elements: null,
+    skin: 'clean',
+    theme: 'clean',
+    closeButton: true,
+    startAt: null,
+    autoplayVideos: true,
+    autofocusVideos: true,
+    descPosition: 'bottom',
+    width: '900px',
+    height: '506px',
+    videosWidth: '960px',
+    beforeSlideChange: null,
+    afterSlideChange: null,
+    beforeSlideLoad: null,
+    afterSlideLoad: null,
+    slideInserted: null,
+    slideRemoved: null,
+    slideExtraAttributes: null,
+    onOpen: null,
+    onClose: null,
+    loop: false,
+    zoomable: true,
+    draggable: true,
+    dragAutoSnap: false,
+    dragToleranceX: 40,
+    dragToleranceY: 65,
+    preload: true,
+    oneSlidePerOpen: false,
+    touchNavigation: true,
+    touchFollowAxis: true,
+    keyboardNavigation: true,
+    closeOnOutsideClick: true,
+    plugins: false,
+    plyr: {
+      css: 'https://cdn.plyr.io/3.6.12/plyr.css',
+      js: 'https://cdn.plyr.io/3.6.12/plyr.js',
+      config: {
+        ratio: '16:9',
+        fullscreen: {
+          enabled: true,
+          iosNative: true
+        },
+        youtube: {
+          noCookie: true,
+          rel: 0,
+          showinfo: 0,
+          iv_load_policy: 3
+        },
+        vimeo: {
+          byline: false,
+          portrait: false,
+          title: false,
+          transparent: false
+        }
+      }
+    },
+    openEffect: 'zoom',
+    closeEffect: 'zoom',
+    slideEffect: 'slide',
+    moreText: 'See more',
+    moreLength: 60,
+    cssEfects: {
+      fade: {
+        "in": 'fadeIn',
+        out: 'fadeOut'
+      },
+      zoom: {
+        "in": 'zoomIn',
+        out: 'zoomOut'
+      },
+      slide: {
+        "in": 'slideInRight',
+        out: 'slideOutLeft'
+      },
+      slideBack: {
+        "in": 'slideInLeft',
+        out: 'slideOutRight'
+      },
+      none: {
+        "in": 'none',
+        out: 'none'
+      }
+    },
+    svg: {
+      close: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve"><g><g><path d="M505.943,6.058c-8.077-8.077-21.172-8.077-29.249,0L6.058,476.693c-8.077,8.077-8.077,21.172,0,29.249C10.096,509.982,15.39,512,20.683,512c5.293,0,10.586-2.019,14.625-6.059L505.943,35.306C514.019,27.23,514.019,14.135,505.943,6.058z"/></g></g><g><g><path d="M505.942,476.694L35.306,6.059c-8.076-8.077-21.172-8.077-29.248,0c-8.077,8.076-8.077,21.171,0,29.248l470.636,470.636c4.038,4.039,9.332,6.058,14.625,6.058c5.293,0,10.587-2.019,14.624-6.057C514.018,497.866,514.018,484.771,505.942,476.694z"/></g></g></svg>',
+      next: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 477.175 477.175" xml:space="preserve"> <g><path d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z"/></g></svg>',
+      prev: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 477.175 477.175" xml:space="preserve"><g><path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"/></g></svg>'
+    }
+  };
+  defaults.slideHTML = "<div class=\"gslide\">\n    <div class=\"gslide-inner-content\">\n        <div class=\"ginner-container\">\n            <div class=\"gslide-media\">\n            </div>\n            <div class=\"gslide-description\">\n                <div class=\"gdesc-inner\">\n                    <h4 class=\"gslide-title\"></h4>\n                    <div class=\"gslide-desc\"></div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>";
+  defaults.lightboxHTML = "<div id=\"glightbox-body\" class=\"glightbox-container\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"false\">\n    <div class=\"gloader visible\"></div>\n    <div class=\"goverlay\"></div>\n    <div class=\"gcontainer\">\n    <div id=\"glightbox-slider\" class=\"gslider\"></div>\n    <button class=\"gclose gbtn\" aria-label=\"Close\" data-taborder=\"3\">{closeSVG}</button>\n    <button class=\"gprev gbtn\" aria-label=\"Previous\" data-taborder=\"2\">{prevSVG}</button>\n    <button class=\"gnext gbtn\" aria-label=\"Next\" data-taborder=\"1\">{nextSVG}</button>\n</div>\n</div>";
+  var GlightboxInit = function () {
+    function GlightboxInit() {
+      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      _classCallCheck(this, GlightboxInit);
+      this.customOptions = options;
+      this.settings = extend(defaults, options);
+      this.effectsClasses = this.getAnimationClasses();
+      this.videoPlayers = {};
+      this.apiEvents = [];
+      this.fullElementsList = false;
+    }
+    return _createClass(GlightboxInit, [{
+      key: "init",
+      value: function init() {
+        var _this = this;
+        var selector = this.getSelector();
+        if (selector) {
+          this.baseEvents = addEvent('click', {
+            onElement: selector,
+            withCallback: function withCallback(e, target) {
+              e.preventDefault();
+              _this.open(target);
+            }
+          });
+        }
+        this.elements = this.getElements();
+      }
+    }, {
+      key: "open",
+      value: function open() {
+        var element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+        var startAt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+        if (this.elements.length === 0) {
+          return false;
+        }
+        this.activeSlide = null;
+        this.prevActiveSlideIndex = null;
+        this.prevActiveSlide = null;
+        var index = isNumber(startAt) ? startAt : this.settings.startAt;
+        if (isNode(element)) {
+          var gallery = element.getAttribute('data-gallery');
+          if (gallery) {
+            this.fullElementsList = this.elements;
+            this.elements = this.getGalleryElements(this.elements, gallery);
+          }
+          if (isNil(index)) {
+            index = this.getElementIndex(element);
+            if (index < 0) {
+              index = 0;
+            }
+          }
+        }
+        if (!isNumber(index)) {
+          index = 0;
+        }
+        this.build();
+        animateElement(this.overlay, this.settings.openEffect === 'none' ? 'none' : this.settings.cssEfects.fade["in"]);
+        var body = document.body;
+        var scrollBar = window.innerWidth - document.documentElement.clientWidth;
+        if (scrollBar > 0) {
+          var styleSheet = document.createElement('style');
+          styleSheet.type = 'text/css';
+          styleSheet.className = 'gcss-styles';
+          styleSheet.innerText = ".gscrollbar-fixer {margin-right: ".concat(scrollBar, "px}");
+          document.head.appendChild(styleSheet);
+          addClass(body, 'gscrollbar-fixer');
+        }
+        addClass(body, 'glightbox-open');
+        addClass(html, 'glightbox-open');
+        if (isMobile$1) {
+          addClass(document.body, 'glightbox-mobile');
+          this.settings.slideEffect = 'slide';
+        }
+        this.showSlide(index, true);
+        if (this.elements.length === 1) {
+          addClass(this.prevButton, 'glightbox-button-hidden');
+          addClass(this.nextButton, 'glightbox-button-hidden');
+        } else {
+          removeClass(this.prevButton, 'glightbox-button-hidden');
+          removeClass(this.nextButton, 'glightbox-button-hidden');
+        }
+        this.lightboxOpen = true;
+        this.trigger('open');
+        if (isFunction(this.settings.onOpen)) {
+          this.settings.onOpen();
+        }
+        if (isTouch$1 && this.settings.touchNavigation) {
+          touchNavigation(this);
+        }
+        if (this.settings.keyboardNavigation) {
+          keyboardNavigation(this);
+        }
+      }
+    }, {
+      key: "openAt",
+      value: function openAt() {
+        var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+        this.open(null, index);
+      }
+    }, {
+      key: "showSlide",
+      value: function showSlide() {
+        var _this2 = this;
+        var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+        var first = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+        show(this.loader);
+        this.index = parseInt(index);
+        var current = this.slidesContainer.querySelector('.current');
+        if (current) {
+          removeClass(current, 'current');
+        }
+        this.slideAnimateOut();
+        var slideNode = this.slidesContainer.querySelectorAll('.gslide')[index];
+        if (hasClass(slideNode, 'loaded')) {
+          this.slideAnimateIn(slideNode, first);
+          hide(this.loader);
+        } else {
+          show(this.loader);
+          var slide = this.elements[index];
+          var slideData = {
+            index: this.index,
+            slide: slideNode,
+            slideNode: slideNode,
+            slideConfig: slide.slideConfig,
+            slideIndex: this.index,
+            trigger: slide.node,
+            player: null
+          };
+          this.trigger('slide_before_load', slideData);
+          slide.instance.setContent(slideNode, function () {
+            hide(_this2.loader);
+            _this2.resize();
+            _this2.slideAnimateIn(slideNode, first);
+            _this2.trigger('slide_after_load', slideData);
+          });
+        }
+        this.slideDescription = slideNode.querySelector('.gslide-description');
+        this.slideDescriptionContained = this.slideDescription && hasClass(this.slideDescription.parentNode, 'gslide-media');
+        if (this.settings.preload) {
+          this.preloadSlide(index + 1);
+          this.preloadSlide(index - 1);
+        }
+        this.updateNavigationClasses();
+        this.activeSlide = slideNode;
+      }
+    }, {
+      key: "preloadSlide",
+      value: function preloadSlide(index) {
+        var _this3 = this;
+        if (index < 0 || index > this.elements.length - 1) {
+          return false;
+        }
+        if (isNil(this.elements[index])) {
+          return false;
+        }
+        var slideNode = this.slidesContainer.querySelectorAll('.gslide')[index];
+        if (hasClass(slideNode, 'loaded')) {
+          return false;
+        }
+        var slide = this.elements[index];
+        var type = slide.type;
+        var slideData = {
+          index: index,
+          slide: slideNode,
+          slideNode: slideNode,
+          slideConfig: slide.slideConfig,
+          slideIndex: index,
+          trigger: slide.node,
+          player: null
+        };
+        this.trigger('slide_before_load', slideData);
+        if (type === 'video' || type === 'external') {
+          setTimeout(function () {
+            slide.instance.setContent(slideNode, function () {
+              _this3.trigger('slide_after_load', slideData);
+            });
+          }, 200);
+        } else {
+          slide.instance.setContent(slideNode, function () {
+            _this3.trigger('slide_after_load', slideData);
+          });
+        }
+      }
+    }, {
+      key: "prevSlide",
+      value: function prevSlide() {
+        this.goToSlide(this.index - 1);
+      }
+    }, {
+      key: "nextSlide",
+      value: function nextSlide() {
+        this.goToSlide(this.index + 1);
+      }
+    }, {
+      key: "goToSlide",
+      value: function goToSlide() {
+        var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+        this.prevActiveSlide = this.activeSlide;
+        this.prevActiveSlideIndex = this.index;
+        if (!this.loop() && (index < 0 || index > this.elements.length - 1)) {
+          return false;
+        }
+        if (index < 0) {
+          index = this.elements.length - 1;
+        } else if (index >= this.elements.length) {
+          index = 0;
+        }
+        this.showSlide(index);
+      }
+    }, {
+      key: "insertSlide",
+      value: function insertSlide() {
+        var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
+        if (index < 0) {
+          index = this.elements.length;
+        }
+        var slide = new Slide(config, this, index);
+        var data = slide.getConfig();
+        var slideInfo = extend({}, data);
+        var newSlide = slide.create();
+        var totalSlides = this.elements.length - 1;
+        slideInfo.index = index;
+        slideInfo.node = false;
+        slideInfo.instance = slide;
+        slideInfo.slideConfig = data;
+        this.elements.splice(index, 0, slideInfo);
+        var addedSlideNode = null;
+        var addedSlidePlayer = null;
+        if (this.slidesContainer) {
+          if (index > totalSlides) {
+            this.slidesContainer.appendChild(newSlide);
+          } else {
+            var existingSlide = this.slidesContainer.querySelectorAll('.gslide')[index];
+            this.slidesContainer.insertBefore(newSlide, existingSlide);
+          }
+          if (this.settings.preload && this.index == 0 && index == 0 || this.index - 1 == index || this.index + 1 == index) {
+            this.preloadSlide(index);
+          }
+          if (this.index === 0 && index === 0) {
+            this.index = 1;
+          }
+          this.updateNavigationClasses();
+          addedSlideNode = this.slidesContainer.querySelectorAll('.gslide')[index];
+          addedSlidePlayer = this.getSlidePlayerInstance(index);
+          slideInfo.slideNode = addedSlideNode;
+        }
+        this.trigger('slide_inserted', {
+          index: index,
+          slide: addedSlideNode,
+          slideNode: addedSlideNode,
+          slideConfig: data,
+          slideIndex: index,
+          trigger: null,
+          player: addedSlidePlayer
+        });
+        if (isFunction(this.settings.slideInserted)) {
+          this.settings.slideInserted({
+            index: index,
+            slide: addedSlideNode,
+            player: addedSlidePlayer
+          });
+        }
+      }
+    }, {
+      key: "removeSlide",
+      value: function removeSlide() {
+        var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
+        if (index < 0 || index > this.elements.length - 1) {
+          return false;
+        }
+        var slide = this.slidesContainer && this.slidesContainer.querySelectorAll('.gslide')[index];
+        if (slide) {
+          if (this.getActiveSlideIndex() == index) {
+            if (index == this.elements.length - 1) {
+              this.prevSlide();
+            } else {
+              this.nextSlide();
+            }
+          }
+          slide.parentNode.removeChild(slide);
+        }
+        this.elements.splice(index, 1);
+        this.trigger('slide_removed', index);
+        if (isFunction(this.settings.slideRemoved)) {
+          this.settings.slideRemoved(index);
+        }
+      }
+    }, {
+      key: "slideAnimateIn",
+      value: function slideAnimateIn(slide, first) {
+        var _this4 = this;
+        var slideMedia = slide.querySelector('.gslide-media');
+        var slideDesc = slide.querySelector('.gslide-description');
+        var prevData = {
+          index: this.prevActiveSlideIndex,
+          slide: this.prevActiveSlide,
+          slideNode: this.prevActiveSlide,
+          slideIndex: this.prevActiveSlide,
+          slideConfig: isNil(this.prevActiveSlideIndex) ? null : this.elements[this.prevActiveSlideIndex].slideConfig,
+          trigger: isNil(this.prevActiveSlideIndex) ? null : this.elements[this.prevActiveSlideIndex].node,
+          player: this.getSlidePlayerInstance(this.prevActiveSlideIndex)
+        };
+        var nextData = {
+          index: this.index,
+          slide: this.activeSlide,
+          slideNode: this.activeSlide,
+          slideConfig: this.elements[this.index].slideConfig,
+          slideIndex: this.index,
+          trigger: this.elements[this.index].node,
+          player: this.getSlidePlayerInstance(this.index)
+        };
+        if (slideMedia.offsetWidth > 0 && slideDesc) {
+          hide(slideDesc);
+          slideDesc.style.display = '';
+        }
+        removeClass(slide, this.effectsClasses);
+        if (first) {
+          animateElement(slide, this.settings.cssEfects[this.settings.openEffect]["in"], function () {
+            if (_this4.settings.autoplayVideos) {
+              _this4.slidePlayerPlay(slide);
+            }
+            _this4.trigger('slide_changed', {
+              prev: prevData,
+              current: nextData
+            });
+            if (isFunction(_this4.settings.afterSlideChange)) {
+              _this4.settings.afterSlideChange.apply(_this4, [prevData, nextData]);
+            }
+          });
+        } else {
+          var effectName = this.settings.slideEffect;
+          var animIn = effectName !== 'none' ? this.settings.cssEfects[effectName]["in"] : effectName;
+          if (this.prevActiveSlideIndex > this.index) {
+            if (this.settings.slideEffect == 'slide') {
+              animIn = this.settings.cssEfects.slideBack["in"];
+            }
+          }
+          animateElement(slide, animIn, function () {
+            if (_this4.settings.autoplayVideos) {
+              _this4.slidePlayerPlay(slide);
+            }
+            _this4.trigger('slide_changed', {
+              prev: prevData,
+              current: nextData
+            });
+            if (isFunction(_this4.settings.afterSlideChange)) {
+              _this4.settings.afterSlideChange.apply(_this4, [prevData, nextData]);
+            }
+          });
+        }
+        setTimeout(function () {
+          _this4.resize(slide);
+        }, 100);
+        addClass(slide, 'current');
+      }
+    }, {
+      key: "slideAnimateOut",
+      value: function slideAnimateOut() {
+        if (!this.prevActiveSlide) {
+          return false;
+        }
+        var prevSlide = this.prevActiveSlide;
+        removeClass(prevSlide, this.effectsClasses);
+        addClass(prevSlide, 'prev');
+        var animation = this.settings.slideEffect;
+        var animOut = animation !== 'none' ? this.settings.cssEfects[animation].out : animation;
+        this.slidePlayerPause(prevSlide);
+        this.trigger('slide_before_change', {
+          prev: {
+            index: this.prevActiveSlideIndex,
+            slide: this.prevActiveSlide,
+            slideNode: this.prevActiveSlide,
+            slideIndex: this.prevActiveSlideIndex,
+            slideConfig: isNil(this.prevActiveSlideIndex) ? null : this.elements[this.prevActiveSlideIndex].slideConfig,
+            trigger: isNil(this.prevActiveSlideIndex) ? null : this.elements[this.prevActiveSlideIndex].node,
+            player: this.getSlidePlayerInstance(this.prevActiveSlideIndex)
+          },
+          current: {
+            index: this.index,
+            slide: this.activeSlide,
+            slideNode: this.activeSlide,
+            slideIndex: this.index,
+            slideConfig: this.elements[this.index].slideConfig,
+            trigger: this.elements[this.index].node,
+            player: this.getSlidePlayerInstance(this.index)
+          }
+        });
+        if (isFunction(this.settings.beforeSlideChange)) {
+          this.settings.beforeSlideChange.apply(this, [{
+            index: this.prevActiveSlideIndex,
+            slide: this.prevActiveSlide,
+            player: this.getSlidePlayerInstance(this.prevActiveSlideIndex)
+          }, {
+            index: this.index,
+            slide: this.activeSlide,
+            player: this.getSlidePlayerInstance(this.index)
+          }]);
+        }
+        if (this.prevActiveSlideIndex > this.index && this.settings.slideEffect == 'slide') {
+          animOut = this.settings.cssEfects.slideBack.out;
+        }
+        animateElement(prevSlide, animOut, function () {
+          var container = prevSlide.querySelector('.ginner-container');
+          var media = prevSlide.querySelector('.gslide-media');
+          var desc = prevSlide.querySelector('.gslide-description');
+          container.style.transform = '';
+          media.style.transform = '';
+          removeClass(media, 'greset');
+          media.style.opacity = '';
+          if (desc) {
+            desc.style.opacity = '';
+          }
+          removeClass(prevSlide, 'prev');
+        });
+      }
+    }, {
+      key: "getAllPlayers",
+      value: function getAllPlayers() {
+        return this.videoPlayers;
+      }
+    }, {
+      key: "getSlidePlayerInstance",
+      value: function getSlidePlayerInstance(index) {
+        var id = 'gvideo' + index;
+        var videoPlayers = this.getAllPlayers();
+        if (has(videoPlayers, id) && videoPlayers[id]) {
+          return videoPlayers[id];
+        }
+        return false;
+      }
+    }, {
+      key: "stopSlideVideo",
+      value: function stopSlideVideo(slide) {
+        if (isNode(slide)) {
+          var node = slide.querySelector('.gvideo-wrapper');
+          if (node) {
+            slide = node.getAttribute('data-index');
+          }
+        }
+        console.log('stopSlideVideo is deprecated, use slidePlayerPause');
+        var player = this.getSlidePlayerInstance(slide);
+        if (player && player.playing) {
+          player.pause();
+        }
+      }
+    }, {
+      key: "slidePlayerPause",
+      value: function slidePlayerPause(slide) {
+        if (isNode(slide)) {
+          var node = slide.querySelector('.gvideo-wrapper');
+          if (node) {
+            slide = node.getAttribute('data-index');
+          }
+        }
+        var player = this.getSlidePlayerInstance(slide);
+        if (player && player.playing) {
+          player.pause();
+        }
+      }
+    }, {
+      key: "playSlideVideo",
+      value: function playSlideVideo(slide) {
+        if (isNode(slide)) {
+          var node = slide.querySelector('.gvideo-wrapper');
+          if (node) {
+            slide = node.getAttribute('data-index');
+          }
+        }
+        console.log('playSlideVideo is deprecated, use slidePlayerPlay');
+        var player = this.getSlidePlayerInstance(slide);
+        if (player && !player.playing) {
+          player.play();
+        }
+      }
+    }, {
+      key: "slidePlayerPlay",
+      value: function slidePlayerPlay(slide) {
+        var _this$settings$plyr$c;
+        if (isMobile$1 && !((_this$settings$plyr$c = this.settings.plyr.config) !== null && _this$settings$plyr$c !== void 0 && _this$settings$plyr$c.muted)) {
+          return;
+        }
+        if (isNode(slide)) {
+          var node = slide.querySelector('.gvideo-wrapper');
+          if (node) {
+            slide = node.getAttribute('data-index');
+          }
+        }
+        var player = this.getSlidePlayerInstance(slide);
+        if (player && !player.playing) {
+          player.play();
+          if (this.settings.autofocusVideos) {
+            player.elements.container.focus();
+          }
+        }
+      }
+    }, {
+      key: "setElements",
+      value: function setElements(elements) {
+        var _this5 = this;
+        this.settings.elements = false;
+        var newElements = [];
+        if (elements && elements.length) {
+          each(elements, function (el, i) {
+            var slide = new Slide(el, _this5, i);
+            var data = slide.getConfig();
+            var slideInfo = extend({}, data);
+            slideInfo.slideConfig = data;
+            slideInfo.instance = slide;
+            slideInfo.index = i;
+            newElements.push(slideInfo);
+          });
+        }
+        this.elements = newElements;
+        if (this.lightboxOpen) {
+          this.slidesContainer.innerHTML = '';
+          if (this.elements.length) {
+            each(this.elements, function () {
+              var slide = createHTML(_this5.settings.slideHTML);
+              _this5.slidesContainer.appendChild(slide);
+            });
+            this.showSlide(0, true);
+          }
+        }
+      }
+    }, {
+      key: "getElementIndex",
+      value: function getElementIndex(node) {
+        var index = false;
+        each(this.elements, function (el, i) {
+          if (has(el, 'node') && el.node == node) {
+            index = i;
+            return true;
+          }
+        });
+        return index;
+      }
+    }, {
+      key: "getElements",
+      value: function getElements() {
+        var _this6 = this;
+        var list = [];
+        this.elements = this.elements ? this.elements : [];
+        if (!isNil(this.settings.elements) && isArray(this.settings.elements) && this.settings.elements.length) {
+          each(this.settings.elements, function (el, i) {
+            var slide = new Slide(el, _this6, i);
+            var elData = slide.getConfig();
+            var slideInfo = extend({}, elData);
+            slideInfo.node = false;
+            slideInfo.index = i;
+            slideInfo.instance = slide;
+            slideInfo.slideConfig = elData;
+            list.push(slideInfo);
+          });
+        }
+        var nodes = false;
+        var selector = this.getSelector();
+        if (selector) {
+          nodes = document.querySelectorAll(this.getSelector());
+        }
+        if (!nodes) {
+          return list;
+        }
+        each(nodes, function (el, i) {
+          var slide = new Slide(el, _this6, i);
+          var elData = slide.getConfig();
+          var slideInfo = extend({}, elData);
+          slideInfo.node = el;
+          slideInfo.index = i;
+          slideInfo.instance = slide;
+          slideInfo.slideConfig = elData;
+          slideInfo.gallery = el.getAttribute('data-gallery');
+          list.push(slideInfo);
+        });
+        return list;
+      }
+    }, {
+      key: "getGalleryElements",
+      value: function getGalleryElements(list, gallery) {
+        return list.filter(function (el) {
+          return el.gallery == gallery;
+        });
+      }
+    }, {
+      key: "getSelector",
+      value: function getSelector() {
+        if (this.settings.elements) {
+          return false;
+        }
+        if (this.settings.selector && this.settings.selector.substring(0, 5) == 'data-') {
+          return "*[".concat(this.settings.selector, "]");
+        }
+        return this.settings.selector;
+      }
+    }, {
+      key: "getActiveSlide",
+      value: function getActiveSlide() {
+        return this.slidesContainer.querySelectorAll('.gslide')[this.index];
+      }
+    }, {
+      key: "getActiveSlideIndex",
+      value: function getActiveSlideIndex() {
+        return this.index;
+      }
+    }, {
+      key: "getAnimationClasses",
+      value: function getAnimationClasses() {
+        var effects = [];
+        for (var key in this.settings.cssEfects) {
+          if (this.settings.cssEfects.hasOwnProperty(key)) {
+            var effect = this.settings.cssEfects[key];
+            effects.push("g".concat(effect["in"]));
+            effects.push("g".concat(effect.out));
+          }
+        }
+        return effects.join(' ');
+      }
+    }, {
+      key: "build",
+      value: function build() {
+        var _this7 = this;
+        if (this.built) {
+          return false;
+        }
+        var children = document.body.childNodes;
+        var bodyChildElms = [];
+        each(children, function (el) {
+          if (el.parentNode == document.body && el.nodeName.charAt(0) !== '#' && el.hasAttribute && !el.hasAttribute('aria-hidden')) {
+            bodyChildElms.push(el);
+            el.setAttribute('aria-hidden', 'true');
+          }
+        });
+        var nextSVG = has(this.settings.svg, 'next') ? this.settings.svg.next : '';
+        var prevSVG = has(this.settings.svg, 'prev') ? this.settings.svg.prev : '';
+        var closeSVG = has(this.settings.svg, 'close') ? this.settings.svg.close : '';
+        var lightboxHTML = this.settings.lightboxHTML;
+        lightboxHTML = lightboxHTML.replace(/{nextSVG}/g, nextSVG);
+        lightboxHTML = lightboxHTML.replace(/{prevSVG}/g, prevSVG);
+        lightboxHTML = lightboxHTML.replace(/{closeSVG}/g, closeSVG);
+        lightboxHTML = createHTML(lightboxHTML);
+        document.body.appendChild(lightboxHTML);
+        var modal = document.getElementById('glightbox-body');
+        this.modal = modal;
+        var closeButton = modal.querySelector('.gclose');
+        this.prevButton = modal.querySelector('.gprev');
+        this.nextButton = modal.querySelector('.gnext');
+        this.overlay = modal.querySelector('.goverlay');
+        this.loader = modal.querySelector('.gloader');
+        this.slidesContainer = document.getElementById('glightbox-slider');
+        this.bodyHiddenChildElms = bodyChildElms;
+        this.events = {};
+        addClass(this.modal, 'glightbox-' + this.settings.skin);
+        if (this.settings.closeButton && closeButton) {
+          this.events['close'] = addEvent('click', {
+            onElement: closeButton,
+            withCallback: function withCallback(e, target) {
+              e.preventDefault();
+              _this7.close();
+            }
+          });
+        }
+        if (closeButton && !this.settings.closeButton) {
+          closeButton.parentNode.removeChild(closeButton);
+        }
+        if (this.nextButton) {
+          this.events['next'] = addEvent('click', {
+            onElement: this.nextButton,
+            withCallback: function withCallback(e, target) {
+              e.preventDefault();
+              _this7.nextSlide();
+            }
+          });
+        }
+        if (this.prevButton) {
+          this.events['prev'] = addEvent('click', {
+            onElement: this.prevButton,
+            withCallback: function withCallback(e, target) {
+              e.preventDefault();
+              _this7.prevSlide();
+            }
+          });
+        }
+        if (this.settings.closeOnOutsideClick) {
+          this.events['outClose'] = addEvent('click', {
+            onElement: modal,
+            withCallback: function withCallback(e, target) {
+              if (!_this7.preventOutsideClick && !hasClass(document.body, 'glightbox-mobile') && !closest(e.target, '.ginner-container')) {
+                if (!closest(e.target, '.gbtn') && !hasClass(e.target, 'gnext') && !hasClass(e.target, 'gprev')) {
+                  _this7.close();
+                }
+              }
+            }
+          });
+        }
+        each(this.elements, function (slide, i) {
+          _this7.slidesContainer.appendChild(slide.instance.create());
+          slide.slideNode = _this7.slidesContainer.querySelectorAll('.gslide')[i];
+        });
+        if (isTouch$1) {
+          addClass(document.body, 'glightbox-touch');
+        }
+        this.events['resize'] = addEvent('resize', {
+          onElement: window,
+          withCallback: function withCallback() {
+            _this7.resize();
+          }
+        });
+        this.built = true;
+      }
+    }, {
+      key: "resize",
+      value: function resize() {
+        var slide = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+        slide = !slide ? this.activeSlide : slide;
+        if (!slide || hasClass(slide, 'zoomed')) {
+          return;
+        }
+        var winSize = windowSize();
+        var video = slide.querySelector('.gvideo-wrapper');
+        var image = slide.querySelector('.gslide-image');
+        var description = this.slideDescription;
+        var winWidth = winSize.width;
+        var winHeight = winSize.height;
+        if (winWidth <= 768) {
+          addClass(document.body, 'glightbox-mobile');
+        } else {
+          removeClass(document.body, 'glightbox-mobile');
+        }
+        if (!video && !image) {
+          return;
+        }
+        var descriptionResize = false;
+        if (description && (hasClass(description, 'description-bottom') || hasClass(description, 'description-top')) && !hasClass(description, 'gabsolute')) {
+          descriptionResize = true;
+        }
+        if (image) {
+          if (winWidth <= 768) {
+            var imgNode = image.querySelector('img');
+          } else if (descriptionResize) {
+            var _this$elements$this$i;
+            var descHeight = description.offsetHeight;
+            var _imgNode = image.querySelector('img');
+            var slideTriggerNode = (_this$elements$this$i = this.elements[this.index]) === null || _this$elements$this$i === void 0 ? void 0 : _this$elements$this$i.node;
+            var maxHeightValue = '100vh';
+            if (slideTriggerNode) {
+              var _slideTriggerNode$get;
+              maxHeightValue = (_slideTriggerNode$get = slideTriggerNode.getAttribute('data-height')) !== null && _slideTriggerNode$get !== void 0 ? _slideTriggerNode$get : maxHeightValue;
+            }
+            _imgNode.setAttribute('style', "max-height: calc(".concat(maxHeightValue, " - ").concat(descHeight, "px)"));
+            description.setAttribute('style', "max-width: ".concat(_imgNode.offsetWidth, "px;"));
+          }
+        }
+        if (video) {
+          var ratio = has(this.settings.plyr.config, 'ratio') ? this.settings.plyr.config.ratio : '';
+          if (!ratio) {
+            var containerWidth = video.clientWidth;
+            var containerHeight = video.clientHeight;
+            var divisor = containerWidth / containerHeight;
+            ratio = "".concat(containerWidth / divisor, ":").concat(containerHeight / divisor);
+          }
+          var videoRatio = ratio.split(':');
+          var videoWidth = this.settings.videosWidth;
+          var maxWidth = this.settings.videosWidth;
+          if (isNumber(videoWidth) || videoWidth.indexOf('px') !== -1) {
+            maxWidth = parseInt(videoWidth);
+          } else {
+            if (videoWidth.indexOf('vw') !== -1) {
+              maxWidth = winWidth * parseInt(videoWidth) / 100;
+            } else if (videoWidth.indexOf('vh') !== -1) {
+              maxWidth = winHeight * parseInt(videoWidth) / 100;
+            } else if (videoWidth.indexOf('%') !== -1) {
+              maxWidth = winWidth * parseInt(videoWidth) / 100;
+            } else {
+              maxWidth = parseInt(video.clientWidth);
+            }
+          }
+          var maxHeight = maxWidth / (parseInt(videoRatio[0]) / parseInt(videoRatio[1]));
+          maxHeight = Math.floor(maxHeight);
+          if (descriptionResize) {
+            winHeight = winHeight - description.offsetHeight;
+          }
+          if (maxWidth > winWidth || maxHeight > winHeight || winHeight < maxHeight && winWidth > maxWidth) {
+            var vwidth = video.offsetWidth;
+            var vheight = video.offsetHeight;
+            var _ratio = winHeight / vheight;
+            var vsize = {
+              width: vwidth * _ratio,
+              height: vheight * _ratio
+            };
+            video.parentNode.setAttribute('style', "max-width: ".concat(vsize.width, "px"));
+            if (descriptionResize) {
+              description.setAttribute('style', "max-width: ".concat(vsize.width, "px;"));
+            }
+          } else {
+            video.parentNode.style.maxWidth = "".concat(videoWidth);
+            if (descriptionResize) {
+              description.setAttribute('style', "max-width: ".concat(videoWidth, ";"));
+            }
+          }
+        }
+      }
+    }, {
+      key: "reload",
+      value: function reload() {
+        this.init();
+      }
+    }, {
+      key: "updateNavigationClasses",
+      value: function updateNavigationClasses() {
+        var loop = this.loop();
+        removeClass(this.nextButton, 'disabled');
+        removeClass(this.prevButton, 'disabled');
+        if (this.index == 0 && this.elements.length - 1 == 0) {
+          addClass(this.prevButton, 'disabled');
+          addClass(this.nextButton, 'disabled');
+        } else if (this.index === 0 && !loop) {
+          addClass(this.prevButton, 'disabled');
+        } else if (this.index === this.elements.length - 1 && !loop) {
+          addClass(this.nextButton, 'disabled');
+        }
+      }
+    }, {
+      key: "loop",
+      value: function loop() {
+        var loop = has(this.settings, 'loopAtEnd') ? this.settings.loopAtEnd : null;
+        loop = has(this.settings, 'loop') ? this.settings.loop : loop;
+        return loop;
+      }
+    }, {
+      key: "close",
+      value: function close() {
+        var _this8 = this;
+        if (!this.lightboxOpen) {
+          if (this.events) {
+            for (var key in this.events) {
+              if (this.events.hasOwnProperty(key)) {
+                this.events[key].destroy();
+              }
+            }
+            this.events = null;
+          }
+          return false;
+        }
+        if (this.closing) {
+          return false;
+        }
+        this.closing = true;
+        this.slidePlayerPause(this.activeSlide);
+        if (this.fullElementsList) {
+          this.elements = this.fullElementsList;
+        }
+        if (this.bodyHiddenChildElms.length) {
+          each(this.bodyHiddenChildElms, function (el) {
+            el.removeAttribute('aria-hidden');
+          });
+        }
+        addClass(this.modal, 'glightbox-closing');
+        animateElement(this.overlay, this.settings.openEffect == 'none' ? 'none' : this.settings.cssEfects.fade.out);
+        animateElement(this.activeSlide, this.settings.cssEfects[this.settings.closeEffect].out, function () {
+          _this8.activeSlide = null;
+          _this8.prevActiveSlideIndex = null;
+          _this8.prevActiveSlide = null;
+          _this8.built = false;
+          if (_this8.events) {
+            for (var _key in _this8.events) {
+              if (_this8.events.hasOwnProperty(_key)) {
+                _this8.events[_key].destroy();
+              }
+            }
+            _this8.events = null;
+          }
+          var body = document.body;
+          removeClass(html, 'glightbox-open');
+          removeClass(body, 'glightbox-open touching gdesc-open glightbox-touch glightbox-mobile gscrollbar-fixer');
+          _this8.modal.parentNode.removeChild(_this8.modal);
+          _this8.trigger('close');
+          if (isFunction(_this8.settings.onClose)) {
+            _this8.settings.onClose();
+          }
+          var styles = document.querySelector('.gcss-styles');
+          if (styles) {
+            styles.parentNode.removeChild(styles);
+          }
+          _this8.lightboxOpen = false;
+          _this8.closing = null;
+        });
+      }
+    }, {
+      key: "destroy",
+      value: function destroy() {
+        this.close();
+        this.clearAllEvents();
+        if (this.baseEvents) {
+          this.baseEvents.destroy();
+        }
+      }
+    }, {
+      key: "on",
+      value: function on(evt, callback) {
+        var once = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+        if (!evt || !isFunction(callback)) {
+          throw new TypeError('Event name and callback must be defined');
+        }
+        this.apiEvents.push({
+          evt: evt,
+          once: once,
+          callback: callback
+        });
+      }
+    }, {
+      key: "once",
+      value: function once(evt, callback) {
+        this.on(evt, callback, true);
+      }
+    }, {
+      key: "trigger",
+      value: function trigger(eventName) {
+        var _this9 = this;
+        var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+        var onceTriggered = [];
+        each(this.apiEvents, function (event, i) {
+          var evt = event.evt,
+            once = event.once,
+            callback = event.callback;
+          if (evt == eventName) {
+            callback(data);
+            if (once) {
+              onceTriggered.push(i);
+            }
+          }
+        });
+        if (onceTriggered.length) {
+          each(onceTriggered, function (i) {
+            return _this9.apiEvents.splice(i, 1);
+          });
+        }
+      }
+    }, {
+      key: "clearAllEvents",
+      value: function clearAllEvents() {
+        this.apiEvents.splice(0, this.apiEvents.length);
+      }
+    }, {
+      key: "version",
+      value: function version() {
+        return _version;
+      }
+    }]);
+  }();
+  function glightbox () {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var instance = new GlightboxInit(options);
+    instance.init();
+    return instance;
+  }
+
+  return glightbox;
+
+})));

web/themes/custom/eql/librairies/glightbox-master/index.d.ts

@@ -0,0 +1,568 @@
+// Type definitions for Glightbox 3.2.1
+// Project: https://github.com/biati-digital/glightbox/blob/master/README.md
+// Definitions by: Ngoc Tu Nguyen <https://github.com/tomasvn>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+declare namespace Glightbox {
+    /**
+     * Youtube iframe api
+     * @see https://developers.google.com/youtube/player_parameters
+     */
+    interface YoutubeOptions {
+        /**
+         * Whether to use an alternative version of Youtube without cookies
+         */
+        noCookie?: boolean;
+        /**
+         * Show related videos
+         */
+        rel?: number;
+        /**
+         * Show video title
+         * @see https://google.com/youtube/player_parameters#release_notes_08_23_2018
+         * 
+         * @deprecated
+         */
+        showinfo?: number;
+        /**
+         * Show or hide annotations
+         */
+        iv_load_policy?: number;
+    }
+    
+    /**
+     * Vimeo embed video api
+     * 
+     * @see https://help.vimeo.com/hc/en-us/articles/360001494447-Using-Player-Parameters
+     */
+    interface VimeoOptions {
+        /**
+         * Show the byline on the video.
+         */
+        byline?: boolean;
+        /**
+         * Show the author’s profile image (portrait)
+         */
+        portrait?: boolean;
+        /**
+         * Show the video’s title.
+         */
+        title?: boolean;
+        /**
+         * Enable or disable the background of the player
+         */
+        transparent?: boolean;
+    }
+
+    interface Config {
+        /**
+         * Set aspect ratio
+         */
+        ratio?: string;
+        /**
+         *  Toggles whether fullscreen should be enabled or
+         *  whether to use native iOS fullscreen when entering
+         *  fullscreen
+         */
+        fullscreen?: Record<'enabled' | 'iosNative', boolean>;
+        youtube?: YoutubeOptions;
+        vimeo?: VimeoOptions
+    }
+
+    interface PlyrOptions {
+        /**
+         * Get Plyr.js css files from cdn
+         */
+        css?: string;
+        /**
+         * Get Plyr.js js files from cdn
+         */
+        js?: string;
+        config?: Config;
+    }
+
+    interface Options {
+        /**
+         * Name of the selector for example '.glightbox' or 'data-glightbox'
+         * or '*[data-glightbox]'
+         * 
+         * @default '.glightbox'
+         */
+        selector?: string;
+        /**
+         * Instead of passing a selector you can pass all the items
+         * that you want in the gallery.
+         * 
+         * @default null
+         */
+        elements?: [] | null;
+        /**
+         * Name of the skin, it will add a class to the lightbox
+         * so you can style it with css.
+         * 
+         * @default 'clean'
+         */
+        skin?: string;
+        /**
+         * Name of the effect on lightbox open. (zoom, fade, none)
+         * 
+         * @default 'zoom'
+         */
+        openEffect?: string;
+        /**
+         * Name of the effect on lightbox close. (zoom, fade, none)
+         * 
+         * @default 'zoom'
+         */
+        closeEffect?: string;
+        /**
+         * Name of the effect on slide change. (slide, fade, zoom, none)
+         * 
+         * @default 'slide'
+         */
+        slideEffect?: string;
+        /**
+         * More text for descriptions on mobile devices.
+         * 
+         * @default 'See more'
+         */
+        moreText?: string;
+        /**
+         * Number of characters to display on the description before adding
+         * the moreText link (only for mobiles),
+         * if 0 it will display the entire description.
+         * 
+         * @default 60
+         */
+        moreLength?: number;
+        /**
+         * Show or hide the close button.
+         * 
+         * @default true
+         */
+        closeButton?: boolean;
+        /**
+         * Enable or disable the touch navigation (swipe).
+         * 
+         * @default true
+         */
+        touchNavigation?: boolean;
+        /**
+         * Image follow axis when dragging on mobile.
+         * 
+         * @default true
+         */
+        touchFollowAxis?: boolean;
+        /**
+         * Enable or disable the keyboard navigation.
+         * 
+         * @default true
+         */
+        keyboardNavigation?: boolean;
+        /**
+         * Close the lightbox when clicking outside the active slide.
+         * 
+         * @default true
+         */
+        closeOnOutsideClick?: boolean;
+        /**
+         * Start lightbox at defined index.
+         * 
+         * @default 0
+         */
+        startAt?: number;
+        /**
+         * Default width for inline elements and iframes
+         * 
+         * @default '900px'
+         */
+        width?: string;
+        /**
+         * Default height for inline elements and iframes
+         * 
+         * @default '506px'
+         */
+        height?: string;
+        /**
+         * Default width for videos.
+         * 
+         * @default '560px'
+         */
+        videosWidth?: string;
+        /**
+         * Global position for slides description
+         * 
+         * @default 'bottom'
+         */
+        descPosition?: string;
+        /**
+         * Loop slides on end.
+         * 
+         * @default false
+         */
+        loop?: Exclude<boolean, undefined>;
+        /**
+         * Enable or disable zoomable images
+         * 
+         * @default true
+         */
+        zoomable?: boolean;
+        /**
+         * Enable or disable mouse drag to go prev and next slide
+         * 
+         * @default true
+         */
+        draggable?: boolean;
+        /**
+         * Used with draggable. Number of pixels the user
+         * has to drag to go to prev or next slide.
+         * 
+         * @default 40
+         */
+        dragToleranceX?: number;
+        /**
+         * Used with draggable. Number of pixels the user has to drag
+         * up or down to close the lightbox
+         * 
+         * @default 65
+         */
+        dragToleranceY?: number;
+        /**
+         * If true the slide will automatically change to prev/next or close
+         * if dragToleranceX or dragToleranceY is reached,
+         * otherwise it will wait till the mouse is released.
+         * 
+         * @default false
+         */
+        dragAutoSnap?: boolean;
+        /**
+         * Enable or disable preloading.
+         * 
+         * @default true
+         */
+        preload?: boolean;
+        /**
+         * Set your own svg icons.
+         */
+        svg?: Record<'close' | 'next' | 'prev', string>;
+        /**
+         * Define or adjust lightbox animations.
+         * 
+         * @see: 
+         */
+        cssEffects?: Record<string, Record<'in' | 'out', string>>;
+        /**
+         * You can completely change the html of GLightbox.
+         */
+        lightboxHTML?: string;
+        /**
+         * You can completely change the html of the individual slide.
+         */
+        slideHTML?: string;
+        /**
+         * Autoplay videos on open.
+         * 
+         * @default true
+         */
+        autoplayVideos?: boolean;
+        /**
+         * If true video will be focused on play to allow
+         * keyboard sortcuts for the player, this will deactivate
+         * prev and next arrows to change slide.
+         * 
+         */
+        autofocusVideos?: boolean;
+        plyr?: PlyrOptions;
+    }
+
+    type EventTypes =
+        | "open"
+        | "close"
+        | "slide_before_change"
+        | "slide_changed"
+        | "slide_before_load"
+        | "slide_after_load"
+        | "slide_inserted"
+        | "slide_removed"
+
+    interface SlideConfig {
+        href?: string;
+        sizes?: string;
+        srcset?: string;
+        title?: string;
+        type?: "image" | "video" | "inline";
+        videoProvider?: string;
+        description?: string;
+        alt?: string;
+        descPosition?: 'bottom' | 'top' | 'left' | 'right';
+        effect?: string;
+        width?: string;
+        height?: string;
+        content?: boolean;
+        zoomable?: boolean;
+        draggable?: boolean;
+    }
+
+    interface BaseData {
+        index?: number;
+        slide?: Element;
+        slideNode?: Element;
+        slideConfig?: SlideConfig;
+        slideIndex?: number;
+        trigger?: Element;
+        player?: null | Record<any, any>;
+    }
+
+    type Payload<T extends EventTypes> = {
+        slide_before_change: {
+            prev: BaseData;
+            current: BaseData;
+        };
+        slide_changed: {
+            prev: BaseData;
+            current: BaseData;
+        };
+        slide_before_load: BaseData;
+        slide_after_load: BaseData;
+        slide_inserted: BaseData;
+        slide_removed: number;
+    }[T]
+}
+
+declare class GlightboxInit {
+    constructor(options: Glightbox.Options);
+
+    /**
+     * Initialize lightbox
+     */
+    private init(): void;
+
+     /**
+     * Open lightbox
+     */
+    public open(element?: Element, startAt?: number): void
+
+    /**
+     * Open at specific index
+     */
+    public openAt(index?: number): void;
+
+    /**
+     * Set Slide
+     */
+    private showSlide(index?: number, first?: boolean): void;
+
+    /**
+     * Preload slides
+     */
+    private preloadSlide(index: number): null;
+
+    /**
+     * Load previous slide
+     * calls goToslide
+     */
+    public prevSlide(): void;
+
+    /**
+     * Load next slide
+     * calls goToslide
+     */
+    public nextSlide(): void;
+
+    /**
+     * Go to slide
+     * calls set slide
+     */
+    public goToSlide(index?: number): void;
+
+    /**
+     * Insert slide
+     */
+    insertSlide(config?: Record<any, any>, index?: number): void;
+
+    /**
+     * Remove slide
+     */
+    public removeSlide(index?: number): boolean | undefined;
+
+    /**
+     * Slide In
+     */
+    private slideAnimateIn(slide: Element, first: boolean): null;
+
+    /**
+     * Slide out
+     */
+    private slideAnimateOut(): void;
+
+    /**
+     * Get all defined players
+     */
+    getAllPlayers(): Record<string, any>;
+
+    /**
+     * Get player at index
+     */
+    getSlidePlayerInstance(index: number): boolean | Record<any, any>;
+
+    /**
+     * Stop video at specified
+     * node or index
+     */
+    stopSlideVideo(slide: Element | number): void;
+
+    /**
+     * Stop player at specified index
+     */
+    slidePlayerPause(slide: Element | number): void;
+
+    /**
+     * Stop video at specified
+     * node or index
+     * 
+     * @deprecated use slidePlayerPause instead
+     */
+    stopSlide(slide: Element | number): void;
+
+    /**
+     * Play video at specified
+     * node or index
+     */
+    playSlideVideo(slide: Element | number): void;
+
+    /**
+     * Play media player at specified
+     * node or index
+     */
+    slidePlayerPlay(slide: Element | number): void;
+
+    /**
+     * Set the entire elements
+     * in the gallery, it replaces all
+     * the existing elements
+     * with the specified list
+     */
+    setElements(elements: any[]): void;
+
+    /**
+     * Return the index
+     * of the specified node,
+     * this node is for example an image, link, etc.
+     * that when clicked it opens the lightbox
+     * its position in the elements array can change
+     * when using insertSlide or removeSlide so we
+     * need to find it in the elements list
+     */
+    private getElementIndex(node: Node): boolean | number;
+
+    /**
+     * Get elements
+     * returns an array containing all
+     * the elements that must be displayed in the
+     * lightbox
+     */
+    private getElements(): any[];
+
+    /**
+     * Return only the elements
+     * from a specific gallery
+     */
+    private getGalleryElements(list: any[], gallery: any[]): any[];
+
+    /**
+     * Get selector
+     */
+    private getSelector(): boolean | string;
+
+    /**
+     * Get the active slide
+     */
+    public getActiveSlide(): Element;
+
+    /**
+     * Get the active index
+     */
+    public getActiveSlideIndex(): number | undefined;
+
+    /**
+     * Get the defined
+     * effects as string
+     */
+    private getAnimationClasses(): string;
+
+    /**
+     * Build the structure
+     */
+    private build(): null;
+
+    /**
+     * Handle resize
+     * Create only to handle
+     * when the height of the screen
+     * is lower than the slide content
+     * this helps to resize videos vertically
+     * and images with description
+     */
+    private resize(slide?: null): void;
+
+    /**
+     * Reload Lightbox
+     * reload and apply events to nodes
+     */
+    public reload(): void;
+
+    /**
+     * Update navigation classes on slide change
+     */
+    private updateNavigationClasses(): void;
+
+    /**
+     * Handle loop config
+     */
+    private loop(): void;
+
+    /**
+     * Close Lightbox
+     * closes the lightbox and removes the slides
+     * and some classes
+     */
+    public close(): boolean | undefined;
+
+    /**
+     * Destroy lightbox
+     * and all events
+     */
+    public destroy(): void;
+
+    /**
+     * Set event
+     */
+    public on(eventName: Glightbox.EventTypes, callback: () => void, once?: boolean): void;
+
+    /**
+     * Set event once
+     */
+    public once(eventName: Glightbox.EventTypes, callback: () => void): void;
+
+    /**
+     * Triggers an specific event
+     * with data
+     */
+    public trigger<T extends Glightbox.EventTypes>(eventName: T, data?: Glightbox.Payload<T>): void;
+
+    /**
+     * Removes all events
+     * set using the API
+     */
+    private clearAllEvents(): void;
+
+    /**
+     * Get Version
+     */
+    version(): string;
+}
+
+declare function GLightbox(options: Glightbox.Options): InstanceType<typeof GlightboxInit>
+
+export = GLightbox;
+export as namespace GLightbox;

web/themes/custom/eql/librairies/glightbox-master/index.html

@@ -0,0 +1,476 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
+
+        <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" />
+        <link
+            rel="stylesheet"
+            href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
+            crossorigin="anonymous"
+        />
+        <link rel="stylesheet" href="demo/css/style.css" />
+        <link rel="stylesheet" href="dist/css/glightbox.css" />
+        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
+
+        <title>GLightbox | A touchable pure Javascript lightbox</title>
+    </head>
+
+    <body>
+        <header class="main-header">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-12">
+                        <div class="header-inner">
+                            <a href="#" class="logo" style="font-family: 'Lobster', cursive">GLightbox</a>
+                            <ul class="d-none d-md-block">
+                                <li><a href="#examples">EXAMPLES</a></li>
+                                <li><a href="#specifications">INFO</a></li>
+                                <li><a href="#license">LICENSE</a></li>
+                                <li><a href="https://github.com/biati-digital/glightbox/releases/tag/3.3.0">DOWNLOAD</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <div class="intro">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-12">
+                        <div class="lead">
+                            <h1 style="font-family: 'Lobster', cursive">GLightbox.</h1>
+                            <p class="tagline">
+                                Code name
+                                <strong>"Gie"</strong>
+                                A touchable Pure Javascript
+                                <br />
+                                lightbox with mobile and video support.
+                            </p>
+
+                            <div class="download">
+                                <a class="mcbutton primary" href="https://github.com/biati-digital/glightbox/releases/tag/3.3.0">
+                                    <i class="fa fa-download" aria-hidden="true"></i>
+                                    <span>Download</span>
+                                </a>
+                                <a class="mcbutton black" href="https://github.com/biati-digital/glightbox" target="_blank">
+                                    <i class="fa fa-github" aria-hidden="true"></i>
+                                    <span>View Source</span>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Simple images example -->
+        <section id="examples" class="section">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-12">
+                        <h3>
+                            <i class="fa fa-camera-retro heading-icon" aria-hidden="true"></i>
+                            Simple Image Gallery
+                        </h3>
+
+                        <ul class="box-container three-cols">
+                            <li class="box">
+                                <div class="inner">
+                                    <a href="demo/img/large/gm1.jpg" class="glightbox">
+                                        <img src="demo/img/small/gm1.jpg" alt="image" />
+                                    </a>
+                                </div>
+                            </li>
+                            <li class="box">
+                                <div class="inner">
+                                    <a href="demo/img/large/gm2.jpg" class="glightbox">
+                                        <img src="demo/img/small/gm2.jpg" alt="image" />
+                                    </a>
+                                </div>
+                            </li>
+                            <li class="box">
+                                <div class="inner">
+                                    <a href="demo/img/large/gm3.jpg" class="glightbox">
+                                        <img src="demo/img/small/gm3.jpg" alt="image" />
+                                    </a>
+                                </div>
+                            </li>
+                            <li class="box">
+                                <div class="inner">
+                                    <a href="demo/img/large/gm4.jpg" class="glightbox">
+                                        <img src="demo/img/small/gm4.jpg" alt="image" />
+                                    </a>
+                                </div>
+                            </li>
+                            <li class="box">
+                                <div class="inner">
+                                    <a href="demo/img/large/gm5.jpg" class="glightbox">
+                                        <img src="demo/img/small/gm5.jpg" alt="image" />
+                                    </a>
+                                </div>
+                            </li>
+                            <li class="box">
+                                <div class="inner">
+                                    <a href="demo/img/large/gm6.jpg" class="glightbox">
+                                        <img src="demo/img/small/gm6.jpg" alt="image" />
+                                    </a>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Images with description example -->
+        <section class="section pair">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-12">
+                        <h3>
+                            <i class="fa fa-address-card heading-icon" aria-hidden="true"></i>
+                            Images with Description
+                        </h3>
+                        <p>
+                            You can add descriptions to your slides, the description position can be set globally for all slides or you can set a different position for each slide. options are: top, bottom, left or
+                            right. You can adjust the style the way you want with basic CSS.
+                            <strong>The description can display html code</strong>
+                            .
+                        </p>
+
+                        <ul class="box-container three-cols">
+                            <li class="box">
+                                <div class="inner">
+                                    <a
+                                        href="demo/img/large/gm7.jpg"
+                                        class="glightbox2"
+                                        data-glightbox='title:Description Bottom; description: You can set the position of the description &lt;a href="http://google.com"&gt;with a link to Google&lt;/a&gt;'
+                                    >
+                                        <img src="demo/img/small/gm7.jpg" alt="image" />
+                                    </a>
+                                </div>
+                            </li>
+                            <li class="box">
+                                <div class="inner">
+                                    <a href="demo/img/large/gm8.jpg" class="glightbox2" data-glightbox="title: Description Right; description: .custom-desc1; descPosition: right;">
+                                        <img src="demo/img/small/gm8.jpg" alt="image" />
+                                    </a>
+
+                                    <div class="glightbox-desc custom-desc1">
+                                        <p>
+                                            You can set the position of the description in different ways for example
+                                            <strong style="text-decoration: underline">top, bottom, left or right</strong>
+                                        </p>
+                                        <p>
+                                            <a href="http://google.com" target="_blank" style="text-decoration: underline; font-weight: bold">Example Google link</a>
+                                            ipsum vehicula eros ultrices lacinia Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Duis quis ipsum vehicula eros ultrices lacinia.
+                                            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+                                        </p>
+                                        <p>
+                                            Primis pharetra facilisis lorem quis penatibus ad nulla inceptos, dui per tempor taciti aliquet consequat sodales, curae tristique gravida auctor interdum malesuada sagittis.
+                                            Felis pretium eros ligula natoque ad ante rutrum himenaeos, adipiscing urna mauris porta quam efficitur odio, sagittis morbi tellus nisi molestie mus faucibus.
+                                        </p>
+                                        <p>
+                                            Primis pharetra facilisis lorem quis penatibus ad nulla inceptos, dui per tempor taciti aliquet consequat sodales, curae tristique gravida auctor interdum malesuada sagittis.
+                                            Felis pretium eros ligula natoque ad ante rutrum himenaeos, adipiscing urna mauris porta quam efficitur odio, sagittis morbi tellus nisi molestie mus faucibus.
+                                        </p>
+                                    </div>
+                                </div>
+                            </li>
+                            <li class="box">
+                                <div class="inner">
+                                    <a href="demo/img/large/gm9.jpg" class="glightbox2" data-glightbox="title: Description Left; description: .custom-desc2; descPosition: left;">
+                                        <img src="demo/img/small/gm9.jpg" alt="image" />
+                                    </a>
+                                    <div class="glightbox-desc custom-desc2">
+                                        <p>You can set the position of the description in different ways for example top, bottom, left or right</p>
+                                        <p>Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</p>
+                                    </div>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Videos example -->
+        <section class="section">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-12">
+                        <h3>
+                            <i class="fa fa-video-camera heading-icon" aria-hidden="true"></i>
+                            Videos Gallery
+                        </h3>
+                        <p>
+                            You can add videos with optional autoplay for
+                            <strong>Vimeo</strong>
+                            ,
+                            <strong>Youtube</strong>
+                            and
+                            <strong>self hosted videos</strong>
+                            . You can specify a default width for the videos or set different widths to each video in your gallery. The videos are 100% responsive and will play correctly on mobile devices.
+                        </p>
+
+                        <ul class="box-container three-cols">
+                            <li class="box">
+                                <div class="inner">
+                                    <a href="https://vimeo.com/115041822" class="glightbox3">
+                                        <img src="demo/img/small/gm10.jpg" alt="image" />
+                                    </a>
+                                </div>
+                            </li>
+                            <li class="box">
+                                <div class="inner">
+                                    <a href="https://www.youtube-nocookie.com/embed/Ga6RYejo6Hk" class="glightbox3">
+                                        <img src="demo/img/small/gm11.jpg" alt="image" />
+                                    </a>
+                                </div>
+                            </li>
+                            <li class="box">
+                                <div class="inner">
+                                    <a href="./demo/pexels-video-1550080.mp4" class="glightbox3">
+                                        <img src="demo/img/small/gm12.jpg" alt="image" />
+                                    </a>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Iframes and inline example -->
+        <section class="section pair">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-12">
+                        <h3>
+                            <i class="fa fa-window-restore heading-icon" aria-hidden="true"></i>
+                            Iframes and Inline Elements
+                        </h3>
+                        <p>You can easily add iframes by simply entering the url, it could be a web page, a video, google maps, etc. also you can display any div of your page by entering the ID in the href attribute.</p>
+
+                        <ul class="box-container three-cols">
+                            <li class="box">
+                                <div class="inner">
+                                    <a href="#inline-example" class="glightbox4" data-glightbox="width: 700; height: auto;">
+                                        <img src="demo/img/small/gm14.jpg" alt="image" />
+                                    </a>
+                                </div>
+                            </li>
+                            <li class="box">
+                                <div class="inner">
+                                    <a
+                                        href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12085.977306439116!2d-73.96648875371474!3d40.77314541916876!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c258bf08488f6b%3A0x618706a9142daa0d!2sUpper+East+Side%2C+Nueva+York%2C+EE.+UU.!5e0!3m2!1ses-419!2smx!4v1511830027642"
+                                        class="glightbox4"
+                                    >
+                                        <img src="demo/img/small/gm15.jpg" alt="image" />
+                                    </a>
+                                </div>
+                            </li>
+                            <li class="box">
+                                <div class="inner">
+                                    <a href="./demo/pexels-video-1550080.mp4" class="glightbox4">
+                                        <img src="demo/img/small/gm16.jpg" alt="image" />
+                                    </a>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="specifications" class="container section">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-12">
+                        <div class="especifications">
+                            <h3 class="text-center">Technical specifications</h3>
+                            <p>GLightbox is built using es6 and transpiled with babel for older browsers and can be used with nodejs.</p>
+
+                            <h4>Animations</h4>
+                            <p>All the animations are created with CSS and only the transform and opacity properties are animated. You can overwrite the CSS of the animations or create your own.</p>
+
+                            <h4>Features</h4>
+                            <ul>
+                                <li>Small - only 11KB Gzipped</li>
+                                <li>Responsive - works with any screen size</li>
+                                <li>Gallery Support - Create multiple galleries</li>
+                                <li>Video Support - Youtube, Vimeo and self hosted videos with autoplay</li>
+                                <li>Inline content support - display any inline content</li>
+                                <li>Iframe support - need to embed an iframe? no problem</li>
+                                <li>Keyboard Navigation - esc, arrows keys, tab and enter is all you need</li>
+                                <li>Touch Navigation - mobile touch events like swipe, move, pinch, etc.</li>
+                                <li>Zoomable images - zoom and drag images on mobile and desktop</li>
+                                <li>Retina ready - svg icons for controls.</li>
+                                <li>Api - control the lightbox with the provided methods</li>
+                            </ul>
+
+                            <h4>Supported browsers and devices</h4>
+                            <ul>
+                                <li>
+                                    <i class="fa fa-safari"></i>
+                                    Safari
+                                </li>
+                                <li>
+                                    <i class="fa fa-chrome"></i>
+                                    Chrome
+                                </li>
+                                <li>
+                                    <i class="fa fa-opera"></i>
+                                    Opera
+                                </li>
+                                <li>
+                                    <i class="fa fa-firefox"></i>
+                                    Firefox
+                                </li>
+                                <li>
+                                    <i class="fa fa-edge"></i>
+                                    Edge
+                                </li>
+                                <li>
+                                    <i class="fa fa-internet-explorer"></i>
+                                    Internet Explorer 11
+                                </li>
+                                <li>
+                                    <i class="fa fa-apple"></i>
+                                    IOS (browser: safari, chrome, opera and firefox)
+                                </li>
+                                <li>
+                                    <i class="fa fa-android"></i>
+                                    Android (browser: chrome, opera and firefox)
+                                </li>
+                                <li>
+                                    <i class="fa fa-terminal"></i>
+                                    And any browser that supports flexbox and classList
+                                </li>
+                            </ul>
+
+                            <h4>Documentation</h4>
+                            <p>
+                                The documentation can be found in the github page.
+                                <a href="https://github.com/biati-digital/glightbox/blob/master/README.md" class="font-weight-bold" target="_blank">View Documentation</a>
+                            </p>
+
+                            <div id="license">
+                                <h4>License</h4>
+                                <p>
+                                    GLightbox is free to use for personal and commercial projects.
+                                    <a href="https://opensource.org/licenses/MIT" target="_blank">MIT license</a>
+                                </p>
+                            </div>
+                        </div>
+
+                        <p class="text-center footer-btns">
+                            <a class="mcbutton primary" href="https://github.com/biati-digital/glightbox/releases/tag/3.3.0">
+                                <i class="fa fa-download"></i>
+                                Download
+                            </a>
+                            <a class="mcbutton black" href="https://github.com/biati-digital/glightbox" target="_blank">
+                                <i class="fa fa-github"></i>
+                                View Source
+                            </a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <div id="inline-example" style="display: none">
+            <div class="inline-inner">
+                <h4 class="text-center">Example of inline content</h4>
+                <div class="text-center">
+                    <p>
+                        Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec nec sollicitudin felis. Donec vel nulla vel leo varius
+                        tempor. Duis suscipit pharetra quam id imperdiet. Praesent vitae eros metus. Donec placerat sagittis rhoncus. In condimentum eleifend ante et ornare. Curabitur pharetra nibh non purus gravida.
+                    </p>
+                </div>
+
+                <a class="gtrigger-close inline-close-btn" href="#">Close Box</a>
+            </div>
+        </div>
+
+        <footer class="text-center">
+            <div class="wrap copyright">
+                made with love by
+                <a href="https://www.biati.digital" target="_blank">biati digital</a>
+                | photos by
+                <a href="http://unsplash.com" target="_blank">unsplash.com</a>
+                | video by
+                <a href="https://www.pexels.com/video/a-rocky-coast-1550080/" target="_blank">pexels</a>
+            </div>
+        </footer>
+        <script src="https://cdn.jsdelivr.net/npm/animejs@3.1.0/lib/anime.min.js"></script>
+        <script src="demo/js/valde.min.js"></script>
+        <script src="dist/js/glightbox.js"></script>
+        <script src="demo/js/site.js"></script>
+        <script>
+            var lightbox = GLightbox();
+            lightbox.on('open', (target) => {
+                console.log('lightbox opened');
+            });
+            var lightboxDescription = GLightbox({
+                selector: '.glightbox2'
+            });
+            var lightboxVideo = GLightbox({
+                selector: '.glightbox3'
+            });
+            lightboxVideo.on('slide_changed', ({ prev, current }) => {
+                console.log('Prev slide', prev);
+                console.log('Current slide', current);
+
+                const { slideIndex, slideNode, slideConfig, player } = current;
+
+                if (player) {
+                    if (!player.ready) {
+                        // If player is not ready
+                        player.on('ready', (event) => {
+                            // Do something when video is ready
+                        });
+                    }
+
+                    player.on('play', (event) => {
+                        console.log('Started play');
+                    });
+
+                    player.on('volumechange', (event) => {
+                        console.log('Volume change');
+                    });
+
+                    player.on('ended', (event) => {
+                        console.log('Video ended');
+                    });
+                }
+            });
+
+            var lightboxInlineIframe = GLightbox({
+                selector: '.glightbox4'
+            });
+
+            /* var exampleApi = GLightbox({ selector: null });
+            exampleApi.insertSlide({
+                href: 'https://picsum.photos/1200/800',
+            });
+            exampleApi.insertSlide({
+                width: '500px',
+                content: '<p>Example</p>'
+            });
+            exampleApi.insertSlide({
+                href: 'https://www.youtube.com/watch?v=WzqrwPhXmew',
+            });
+            exampleApi.insertSlide({
+                width: '200vw',
+                content: document.getElementById('inline-example')
+            });
+            exampleApi.open(); */
+        </script>
+    </body>
+</html>

web/themes/custom/eql/librairies/glightbox-master/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "glightbox",
+  "version": "3.3.1",
+  "description": "Pure Javascript lightbox",
+  "main": "dist/js/glightbox.min.js",
+  "scripts": {
+    "watch": "node development/watcher.js"
+  },
+  "author": "Biati Digital",
+  "types": "./index.d.ts",
+  "keywords": [
+    "lightbox",
+    "javascript",
+    "gallery",
+    "popup"
+  ],
+  "license": "MIT",
+  "homepage": "https://biati-digital.github.io/glightbox/",
+  "repository": {
+    "url": "https://github.com/biati-digital/glightbox",
+    "type": "git"
+  },
+  "bugs": "https://github.com/biati-digital/glightbox/issues",
+  "devDependencies": {
+    "@babel/cli": "^7.10.3",
+    "@babel/core": "^7.10.3",
+    "@babel/node": "^7.10.3",
+    "@babel/preset-env": "^7.10.3",
+    "@babel/register": "^7.10.3",
+    "archiver": "^3.1.1",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "chokidar": "^3.4.0",
+    "clean-css": "^4.2.3",
+    "css-mqpacker": "^7.0.0",
+    "eslint": "^7.16.0",
+    "fs-extra": "^8.1.0",
+    "fs-jetpack": "^2.4.0",
+    "install": "^0.13.0",
+    "node-notifier": "^5.4.0",
+    "npm": "^6.14.10",
+    "postcss": "^7.0.32",
+    "postcss-nested": "^4.1.1",
+    "postcss-preset-env": "^6.5.0",
+    "postcss-prettify": "^0.3.4",
+    "rollup": "^1.32.1",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-node-resolve": "^4.0.0",
+    "temporary": "^1.1.0",
+    "terser": "^4.8.0",
+    "uninstall": "0.0.0"
+  },
+  "dependencies": {}
+}

web/themes/custom/eql/librairies/glightbox-master/src/js/.jshintrc

@@ -0,0 +1,6 @@
+{
+    "esnext": true,
+    "esversion": 6,
+    "maxparams": 4,
+    "asi": false
+}

web/themes/custom/eql/librairies/glightbox-master/src/js/core/drag.js

@@ -0,0 +1,219 @@
+/**
+ * DragSlides
+ * Allow imaes to be dragged for prev and next
+ * in desktops
+ *
+ * @param { object } config
+ */
+
+import { closest } from '../utils/helpers.js';
+
+export default class DragSlides {
+    constructor(config = {}) {
+        let { dragEl, toleranceX = 40, toleranceY = 65, slide = null, instance = null } = config;
+
+        this.el = dragEl;
+        this.active = false;
+        this.dragging = false;
+        this.currentX = null;
+        this.currentY = null;
+        this.initialX = null;
+        this.initialY = null;
+        this.xOffset = 0;
+        this.yOffset = 0;
+        this.direction = null;
+        this.lastDirection = null;
+        this.toleranceX = toleranceX;
+        this.toleranceY = toleranceY;
+        this.toleranceReached = false;
+        this.dragContainer = this.el;
+        this.slide = slide;
+        this.instance = instance;
+
+        this.el.addEventListener('mousedown', (e) => this.dragStart(e), false);
+        this.el.addEventListener('mouseup', (e) => this.dragEnd(e), false);
+        this.el.addEventListener('mousemove', (e) => this.drag(e), false);
+    }
+    dragStart(e) {
+        if (this.slide.classList.contains('zoomed')) {
+            this.active = false;
+            return;
+        }
+
+        if (e.type === 'touchstart') {
+            this.initialX = e.touches[0].clientX - this.xOffset;
+            this.initialY = e.touches[0].clientY - this.yOffset;
+        } else {
+            this.initialX = e.clientX - this.xOffset;
+            this.initialY = e.clientY - this.yOffset;
+        }
+
+        let clicked = e.target.nodeName.toLowerCase();
+        let exludeClicks = ['input', 'select', 'textarea', 'button', 'a'];
+        if (
+            e.target.classList.contains('nodrag') ||
+            closest(e.target, '.nodrag') ||
+            exludeClicks.indexOf(clicked) !== -1
+        ) {
+            this.active = false;
+            return;
+        }
+
+        e.preventDefault();
+
+        if (e.target === this.el || (clicked !== 'img' && closest(e.target, '.gslide-inline'))) {
+            this.active = true;
+            this.el.classList.add('dragging');
+            this.dragContainer = closest(e.target, '.ginner-container');
+        }
+    }
+    dragEnd(e) {
+        e && e.preventDefault();
+        this.initialX = 0;
+        this.initialY = 0;
+        this.currentX = null;
+        this.currentY = null;
+        this.initialX = null;
+        this.initialY = null;
+        this.xOffset = 0;
+        this.yOffset = 0;
+        this.active = false;
+
+        if (this.doSlideChange) {
+            this.instance.preventOutsideClick = true;
+            this.doSlideChange == 'right' && this.instance.prevSlide();
+            this.doSlideChange == 'left' && this.instance.nextSlide();
+        }
+
+        if (this.doSlideClose) {
+            this.instance.close();
+        }
+
+        if (!this.toleranceReached) {
+            this.setTranslate(this.dragContainer, 0, 0, true);
+        }
+
+        setTimeout(() => {
+            this.instance.preventOutsideClick = false;
+            this.toleranceReached = false;
+            this.lastDirection = null;
+            this.dragging = false;
+            this.el.isDragging = false;
+            this.el.classList.remove('dragging');
+            this.slide.classList.remove('dragging-nav');
+            this.dragContainer.style.transform = '';
+            this.dragContainer.style.transition = '';
+        }, 100);
+    }
+    drag(e) {
+        if (this.active) {
+            e.preventDefault();
+
+            this.slide.classList.add('dragging-nav');
+
+            if (e.type === 'touchmove') {
+                this.currentX = e.touches[0].clientX - this.initialX;
+                this.currentY = e.touches[0].clientY - this.initialY;
+            } else {
+                this.currentX = e.clientX - this.initialX;
+                this.currentY = e.clientY - this.initialY;
+            }
+
+            this.xOffset = this.currentX;
+            this.yOffset = this.currentY;
+
+            this.el.isDragging = true;
+            this.dragging = true;
+            this.doSlideChange = false;
+            this.doSlideClose = false;
+
+            let currentXInt = Math.abs(this.currentX);
+            let currentYInt = Math.abs(this.currentY);
+
+            // Horizontal drag
+            if (
+                currentXInt > 0 &&
+                currentXInt >= Math.abs(this.currentY) &&
+                (!this.lastDirection || this.lastDirection == 'x')
+            ) {
+                this.yOffset = 0;
+                this.lastDirection = 'x';
+                this.setTranslate(this.dragContainer, this.currentX, 0);
+
+                let doChange = this.shouldChange();
+                if (!this.instance.settings.dragAutoSnap && doChange) {
+                    this.doSlideChange = doChange;
+                }
+
+                if (this.instance.settings.dragAutoSnap && doChange) {
+                    this.instance.preventOutsideClick = true;
+                    this.toleranceReached = true;
+                    this.active = false;
+                    this.instance.preventOutsideClick = true;
+                    this.dragEnd(null);
+                    doChange == 'right' && this.instance.prevSlide();
+                    doChange == 'left' && this.instance.nextSlide();
+                    return;
+                }
+            }
+
+            // Vertical drag
+            if (
+                this.toleranceY > 0 &&
+                currentYInt > 0 &&
+                currentYInt >= currentXInt &&
+                (!this.lastDirection || this.lastDirection == 'y')
+            ) {
+                this.xOffset = 0;
+                this.lastDirection = 'y';
+                this.setTranslate(this.dragContainer, 0, this.currentY);
+
+                let doClose = this.shouldClose();
+
+                if (!this.instance.settings.dragAutoSnap && doClose) {
+                    this.doSlideClose = true;
+                }
+                if (this.instance.settings.dragAutoSnap && doClose) {
+                    this.instance.close();
+                }
+                return;
+            }
+        }
+    }
+
+    shouldChange() {
+        let doChange = false;
+        let currentXInt = Math.abs(this.currentX);
+
+        if (currentXInt >= this.toleranceX) {
+            let dragDir = this.currentX > 0 ? 'right' : 'left';
+
+            if (
+                (dragDir == 'left' && this.slide !== this.slide.parentNode.lastChild) ||
+                (dragDir == 'right' && this.slide !== this.slide.parentNode.firstChild)
+            ) {
+                doChange = dragDir;
+            }
+        }
+        return doChange;
+    }
+
+    shouldClose() {
+        let doClose = false;
+        let currentYInt = Math.abs(this.currentY);
+
+        if (currentYInt >= this.toleranceY) {
+            doClose = true;
+        }
+        return doClose;
+    }
+
+    setTranslate(node, xPos, yPos, animated = false) {
+        if (animated) {
+            node.style.transition = 'all .2s ease';
+        } else {
+            node.style.transition = '';
+        }
+        node.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;
+    }
+}

web/themes/custom/eql/librairies/glightbox-master/src/js/core/keyboard-navigation.js

@@ -0,0 +1,98 @@
+/**
+ * Keyboard Navigation
+ * Allow navigation using the keyboard
+ *
+ * @param {object} instance
+ */
+
+import { addEvent, addClass, removeClass, each } from '../utils/helpers.js';
+
+function getNextFocusElement(current = -1) {
+    const btns = document.querySelectorAll('.gbtn[data-taborder]:not(.disabled)');
+    if (!btns.length) {
+        return false;
+    }
+
+    if (btns.length == 1) {
+        return btns[0];
+    }
+
+    if (typeof current == 'string') {
+        current = parseInt(current);
+    }
+
+    const orders = [];
+    each(btns, (btn) => {
+        orders.push(btn.getAttribute('data-taborder'));
+    });
+    const highestOrder = Math.max.apply(Math, orders.map((order) => parseInt(order)));
+
+    let newIndex = current < 0 ? 1 : current + 1;
+    if (newIndex > highestOrder) {
+        newIndex = '1';
+    }
+
+    const nextOrders = orders.filter((el) => el >= parseInt(newIndex));
+    const nextFocus = nextOrders.sort()[0];
+
+    return document.querySelector(`.gbtn[data-taborder="${nextFocus}"]`);
+}
+
+export default function keyboardNavigation(instance) {
+    if (instance.events.hasOwnProperty('keyboard')) {
+        return false;
+    }
+
+    instance.events['keyboard'] = addEvent('keydown', {
+        onElement: window,
+        withCallback: (event, target) => {
+            event = event || window.event;
+            const key = event.keyCode;
+            if (key == 9) {
+                //prettier-ignore
+                const focusedButton = document.querySelector('.gbtn.focused');
+
+                if (!focusedButton) {
+                    const activeElement = document.activeElement && document.activeElement.nodeName ? document.activeElement.nodeName.toLocaleLowerCase() : false;
+                    if (activeElement == 'input' || activeElement == 'textarea' || activeElement == 'button') {
+                        return;
+                    }
+                }
+
+                event.preventDefault();
+                const btns = document.querySelectorAll('.gbtn[data-taborder]');
+                if (!btns || btns.length <= 0) {
+                    return;
+                }
+
+                if (!focusedButton) {
+                    const first = getNextFocusElement();
+                    if (first) {
+                        first.focus();
+                        addClass(first, 'focused');
+                    }
+                    return;
+                }
+
+                let currentFocusOrder = focusedButton.getAttribute('data-taborder');
+                let nextFocus = getNextFocusElement(currentFocusOrder);
+
+                removeClass(focusedButton, 'focused');
+
+                if (nextFocus) {
+                    nextFocus.focus();
+                    addClass(nextFocus, 'focused');
+                }
+            }
+            if (key == 39) {
+                instance.nextSlide();
+            }
+            if (key == 37) {
+                instance.prevSlide();
+            }
+            if (key == 27) {
+                instance.close();
+            }
+        }
+    });
+}

web/themes/custom/eql/librairies/glightbox-master/src/js/core/slide-parser.js

@@ -0,0 +1,231 @@
+import { extend, has, each, isNil, isNode, isObject, isNumber } from '../utils/helpers.js';
+
+export default class SlideConfigParser {
+    constructor(slideParamas = {}) {
+        this.defaults = {
+            href: '',
+            sizes: '',
+            srcset: '',
+            title: '',
+            type: '',
+            videoProvider: '',
+            description: '',
+            alt: '',
+            descPosition: 'bottom',
+            effect: '',
+            width: '',
+            height: '',
+            content: false,
+            zoomable: true,
+            draggable: true
+        };
+
+        if (isObject(slideParamas)) {
+            this.defaults = extend(this.defaults, slideParamas);
+        }
+    }
+
+    /**
+     * Get source type
+     * gte the source type of a url
+     *
+     * @param {string} url
+     */
+    sourceType(url) {
+        let origin = url;
+        url = url.toLowerCase();
+
+        if (url.match(/\.(jpeg|jpg|jpe|gif|png|apn|webp|avif|svg)/) !== null) {
+            return 'image';
+        }
+        if (url.match(/(youtube\.com|youtube-nocookie\.com)\/watch\?v=([a-zA-Z0-9\-_]+)/) || url.match(/youtu\.be\/([a-zA-Z0-9\-_]+)/) || url.match(/(youtube\.com|youtube-nocookie\.com)\/embed\/([a-zA-Z0-9\-_]+)/) || url.match(/(youtube\.com|youtube-nocookie\.com)\/shorts\/([a-zA-Z0-9\-_]+)/)) {
+            return 'video';
+        }
+        if (url.match(/vimeo\.com\/([0-9]*)/)) {
+            return 'video';
+        }
+        if (url.match(/\.(mp4|ogg|webm|mov)/) !== null) {
+            return 'video';
+        }
+        if (url.match(/\.(mp3|wav|wma|aac|ogg)/) !== null) {
+            return 'audio';
+        }
+
+        // Check if inline content
+        if (url.indexOf('#') > -1) {
+            let hash = origin.split('#').pop();
+            if (hash.trim() !== '') {
+                return 'inline';
+            }
+        }
+        // Ajax
+        if (url.indexOf('goajax=true') > -1) {
+            return 'ajax';
+        }
+
+        return 'external';
+    }
+
+    parseConfig(element, settings) {
+        let data = extend({ descPosition: settings.descPosition }, this.defaults);
+
+        if (isObject(element) && !isNode(element)) {
+            if (!has(element, 'type')) {
+                if (has(element, 'content') && element.content) {
+                    element.type = 'inline';
+                } else if (has(element, 'href')) {
+                    element.type = this.sourceType(element.href);
+                }
+            }
+            let objectData = extend(data, element);
+            this.setSize(objectData, settings);
+
+            return objectData;
+        }
+
+        let url = '';
+        let config = element.getAttribute('data-glightbox');
+        let nodeType = element.nodeName.toLowerCase();
+
+        if (nodeType === 'a') {
+            url = element.href;
+        }
+        if (nodeType === 'img') {
+            url = element.src;
+            //alt attribute propagation
+            data.alt = element.alt;
+        }
+
+        data.href = url;
+
+        each(data, (val, key) => {
+            if (has(settings, key) && key !== 'width') {
+                data[key] = settings[key];
+            }
+            const nodeData = element.dataset[key];
+            if (!isNil(nodeData)) {
+                data[key] = this.sanitizeValue(nodeData);
+            }
+        });
+
+        if (data.content) {
+            data.type = 'inline';
+        }
+
+        if (!data.type && url) {
+            data.type = this.sourceType(url);
+        }
+
+        if (!isNil(config)) {
+            let cleanKeys = [];
+            each(data, (v, k) => {
+                cleanKeys.push(';\\s?' + k);
+            });
+            cleanKeys = cleanKeys.join('\\s?:|');
+            if (config.trim() !== '') {
+                each(data, (val, key) => {
+                    const str = config;
+                    const match = 's?' + key + 's?:s?(.*?)(' + cleanKeys + 's?:|$)';
+                    const regex = new RegExp(match);
+                    const matches = str.match(regex);
+
+                    if (matches && matches.length && matches[1]) {
+                        const value = matches[1].trim().replace(/;\s*$/, '');
+                        data[key] = this.sanitizeValue(value);
+                    }
+                });
+            }
+        } else {
+            if (!data.title && nodeType == 'a') {
+                let title = element.title;
+                if (!isNil(title) && title !== '') {
+                    data.title = title;
+                }
+            }
+            if (!data.title && nodeType == 'img') {
+                let alt = element.alt;
+                if (!isNil(alt) && alt !== '') {
+                    data.title = alt;
+                }
+            }
+        }
+
+        // Try to get the description from a referenced element
+        if (data.description && data.description.substring(0, 1) === '.') {
+            let description;
+
+            try {
+                description = document.querySelector(data.description).innerHTML;
+            } catch (error) {
+                if (!(error instanceof DOMException)) {
+                    throw error;
+                }
+            }
+
+            if (description) {
+                data.description = description;
+            }
+        }
+
+        // Try to get the description from a .glightbox-desc element
+        if (!data.description) {
+            let nodeDesc = element.querySelector('.glightbox-desc');
+            if (nodeDesc) {
+                data.description = nodeDesc.innerHTML;
+            }
+        }
+
+        this.setSize(data, settings, element);
+        this.slideConfig = data;
+
+        return data;
+    }
+
+    /**
+     * Set slide data size
+     * set the correct size dependin
+     * on the slide type
+     *
+     * @param { object } data
+     * @param { object } settings
+     * @return { object }
+     */
+    setSize(data, settings, element = null) {
+        const defaultWith = data.type == 'video' ? this.checkSize(settings.videosWidth) : this.checkSize(settings.width);
+        const defaultHeight = this.checkSize(settings.height);
+
+        data.width = has(data, 'width') && data.width !== '' ? this.checkSize(data.width) : defaultWith;
+        data.height = has(data, 'height') && data.height !== '' ? this.checkSize(data.height) : defaultHeight;
+
+        if (element && data.type == 'image') {
+            data._hasCustomWidth = element.dataset.width ? true : false;
+            data._hasCustomHeight = element.dataset.height ? true : false;
+        }
+
+        return data;
+    }
+
+    /**
+     * [checkSize size
+     * check if the passed size has a correct unit
+     *
+     * @param {string} size
+     * @return {string}
+     */
+    checkSize(size) {
+        return isNumber(size) ? `${size}px` : size;
+    }
+
+    /**
+     * Sanitize data attributes value
+     *
+     * @param string val
+     * @return mixed
+     */
+    sanitizeValue(val) {
+        if (val !== 'true' && val !== 'false') {
+            return val;
+        }
+        return val === 'true';
+    }
+}

web/themes/custom/eql/librairies/glightbox-master/src/js/core/slide.js

@@ -0,0 +1,245 @@
+/**
+ * Slide
+ * class to hablde slide creation
+ * and config parser
+ */
+
+import ZoomImages from './zoom.js';
+import DragSlides from './drag.js';
+import slideImage from '../slides/image.js';
+import slideVideo from '../slides/video.js';
+import slideInline from '../slides/inline.js';
+import slideIframe from '../slides/iframe.js';
+import SlideConfigParser from './slide-parser.js';
+import { addEvent, addClass, removeClass, hasClass, closest, isMobile, isFunction, isNode, createHTML } from '../utils/helpers.js';
+
+export default class Slide {
+    constructor(el, instance, index) {
+        this.element = el;
+        this.instance = instance;
+        this.index = index;
+    }
+
+    /**
+     * Set slide content
+     *
+     * @param {node} slide
+     * @param {object} data
+     * @param {function} callback
+     */
+    setContent(slide = null, callback = false) {
+        if (hasClass(slide, 'loaded')) {
+            return false;
+        }
+
+        const settings = this.instance.settings;
+        const slideConfig = this.slideConfig;
+        const isMobileDevice = isMobile();
+
+        if (isFunction(settings.beforeSlideLoad)) {
+            settings.beforeSlideLoad({
+                index: this.index,
+                slide: slide,
+                player: false
+            });
+        }
+
+        let type = slideConfig.type;
+        let position = slideConfig.descPosition;
+        let slideMedia = slide.querySelector('.gslide-media');
+        let slideTitle = slide.querySelector('.gslide-title');
+        let slideText = slide.querySelector('.gslide-desc');
+        let slideDesc = slide.querySelector('.gdesc-inner');
+        let finalCallback = callback;
+
+        // used for image accessiblity
+        let titleID = 'gSlideTitle_' + this.index;
+        let textID = 'gSlideDesc_' + this.index;
+
+        if (isFunction(settings.afterSlideLoad)) {
+            finalCallback = () => {
+                if (isFunction(callback)) {
+                    callback();
+                }
+                settings.afterSlideLoad({
+                    index: this.index,
+                    slide: slide,
+                    player: this.instance.getSlidePlayerInstance(this.index)
+                });
+            };
+        }
+
+        if (slideConfig.title == '' && slideConfig.description == '') {
+            if (slideDesc) {
+                slideDesc.parentNode.parentNode.removeChild(slideDesc.parentNode);
+            }
+        } else {
+            if (slideTitle && slideConfig.title !== '') {
+                slideTitle.id = titleID;
+                slideTitle.innerHTML = slideConfig.title;
+            } else {
+                slideTitle.parentNode.removeChild(slideTitle);
+            }
+            if (slideText && slideConfig.description !== '') {
+                slideText.id = textID;
+                if (isMobileDevice && settings.moreLength > 0) {
+                    slideConfig.smallDescription = this.slideShortDesc(slideConfig.description, settings.moreLength, settings.moreText);
+                    slideText.innerHTML = slideConfig.smallDescription;
+                    this.descriptionEvents(slideText, slideConfig);
+                } else {
+                    slideText.innerHTML = slideConfig.description;
+                }
+            } else {
+                slideText.parentNode.removeChild(slideText);
+            }
+            addClass(slideMedia.parentNode, `desc-${position}`);
+            addClass(slideDesc.parentNode, `description-${position}`);
+        }
+
+        addClass(slideMedia, `gslide-${type}`);
+        addClass(slide, 'loaded');
+
+        if (type === 'video') {
+            slideVideo.apply(this.instance, [slide, slideConfig, this.index, finalCallback]);
+            return;
+        }
+
+        if (type === 'external') {
+            slideIframe.apply(this, [slide, slideConfig, this.index, finalCallback]);
+            return;
+        }
+
+        if (type === 'inline') {
+            slideInline.apply(this.instance, [slide, slideConfig, this.index, finalCallback]);
+            if (slideConfig.draggable) {
+                new DragSlides({
+                    dragEl: slide.querySelector('.gslide-inline'),
+                    toleranceX: settings.dragToleranceX,
+                    toleranceY: settings.dragToleranceY,
+                    slide: slide,
+                    instance: this.instance
+                });
+            }
+            return;
+        }
+
+        if (type === 'image') {
+            slideImage(slide, slideConfig, this.index, () => {
+                const img = slide.querySelector('img');
+
+                if (slideConfig.draggable) {
+                    new DragSlides({
+                        dragEl: img,
+                        toleranceX: settings.dragToleranceX,
+                        toleranceY: settings.dragToleranceY,
+                        slide: slide,
+                        instance: this.instance
+                    });
+                }
+                if (slideConfig.zoomable && img.naturalWidth > img.offsetWidth) {
+                    addClass(img, 'zoomable');
+                    new ZoomImages(img, slide, () => {
+                        this.instance.resize();
+                    });
+                }
+
+                if (isFunction(finalCallback)) {
+                    finalCallback();
+                }
+            });
+            return;
+        }
+
+        if (isFunction(finalCallback)) {
+            finalCallback();
+        }
+    }
+
+    slideShortDesc(string, n = 50, wordBoundary = false) {
+        let div = document.createElement('div');
+        div.innerHTML = string;
+        let cleanedString = div.innerText;
+
+        let useWordBoundary = wordBoundary;
+        string = cleanedString.trim();
+        if (string.length <= n) {
+            return string;
+        }
+        let subString = string.substr(0, n - 1);
+        if (!useWordBoundary) {
+            return subString;
+        }
+
+        div = null;
+        return subString + '... <a href="#" class="desc-more">' + wordBoundary + '</a>';
+    }
+
+    descriptionEvents(desc, data) {
+        let moreLink = desc.querySelector('.desc-more');
+        if (!moreLink) {
+            return false;
+        }
+
+        addEvent('click', {
+            onElement: moreLink,
+            withCallback: (event, target) => {
+                event.preventDefault();
+                const body = document.body;
+
+                let desc = closest(target, '.gslide-desc');
+                if (!desc) {
+                    return false;
+                }
+
+                desc.innerHTML = data.description;
+                addClass(body, 'gdesc-open');
+
+                let shortEvent = addEvent('click', {
+                    onElement: [body, closest(desc, '.gslide-description')],
+                    withCallback: (event, target) => {
+                        if (event.target.nodeName.toLowerCase() !== 'a') {
+                            removeClass(body, 'gdesc-open');
+                            addClass(body, 'gdesc-closed');
+                            desc.innerHTML = data.smallDescription;
+                            this.descriptionEvents(desc, data);
+
+                            setTimeout(() => {
+                                removeClass(body, 'gdesc-closed');
+                            }, 400);
+                            shortEvent.destroy();
+                        }
+                    }
+                });
+            }
+        });
+    }
+
+    /**
+     * Create Slide Node
+     *
+     * @return { node }
+     */
+    create() {
+        return createHTML(this.instance.settings.slideHTML);
+    }
+
+    /**
+     * Get slide config
+     * returns each individual slide config
+     * it uses SlideConfigParser
+     * each slide can overwrite a global setting
+     * read more in the SlideConfigParser class
+     *
+     * @return { object }
+     */
+    getConfig() {
+        if (!isNode(this.element) && !this.element.hasOwnProperty('draggable')) {
+            this.element.draggable = this.instance.settings.draggable;
+        }
+
+        const parser = new SlideConfigParser(this.instance.settings.slideExtraAttributes);
+        this.slideConfig = parser.parseConfig(this.element, this.instance.settings);
+
+        return this.slideConfig;
+    }
+}

web/themes/custom/eql/librairies/glightbox-master/src/js/core/touch-events.js

@@ -0,0 +1,378 @@
+function getLen(v) {
+    return Math.sqrt(v.x * v.x + v.y * v.y);
+}
+
+function dot(v1, v2) {
+    return v1.x * v2.x + v1.y * v2.y;
+}
+
+function getAngle(v1, v2) {
+    var mr = getLen(v1) * getLen(v2);
+    if (mr === 0) {
+        return 0;
+    }
+    var r = dot(v1, v2) / mr;
+    if (r > 1) {
+        r = 1;
+    }
+    return Math.acos(r);
+}
+
+function cross(v1, v2) {
+    return v1.x * v2.y - v2.x * v1.y;
+}
+
+function getRotateAngle(v1, v2) {
+    var angle = getAngle(v1, v2);
+    if (cross(v1, v2) > 0) {
+        angle *= -1;
+    }
+
+    return (angle * 180) / Math.PI;
+}
+
+class EventsHandlerAdmin {
+    constructor(el) {
+        this.handlers = [];
+        this.el = el;
+    }
+    add(handler) {
+        this.handlers.push(handler);
+    }
+    del(handler) {
+        if (!handler) {
+            this.handlers = [];
+        }
+
+        for (var i = this.handlers.length; i >= 0; i--) {
+            if (this.handlers[i] === handler) {
+                this.handlers.splice(i, 1);
+            }
+        }
+    }
+    dispatch() {
+        for (var i = 0, len = this.handlers.length; i < len; i++) {
+            var handler = this.handlers[i];
+            if (typeof handler === 'function') {
+                handler.apply(this.el, arguments);
+            }
+        }
+    }
+}
+
+function wrapFunc(el, handler) {
+    var EventshandlerAdmin = new EventsHandlerAdmin(el);
+    EventshandlerAdmin.add(handler);
+
+    return EventshandlerAdmin;
+}
+
+// Modified version of AlloyFinger
+export default class TouchEvents {
+    constructor(el, option) {
+        this.element = typeof el == 'string' ? document.querySelector(el) : el;
+
+        this.start = this.start.bind(this);
+        this.move = this.move.bind(this);
+        this.end = this.end.bind(this);
+        this.cancel = this.cancel.bind(this);
+        this.element.addEventListener('touchstart', this.start, false);
+        this.element.addEventListener('touchmove', this.move, false);
+        this.element.addEventListener('touchend', this.end, false);
+        this.element.addEventListener('touchcancel', this.cancel, false);
+
+        this.preV = { x: null, y: null };
+        this.pinchStartLen = null;
+        this.zoom = 1;
+        this.isDoubleTap = false;
+
+        var noop = function () {};
+
+        this.rotate = wrapFunc(this.element, option.rotate || noop);
+        this.touchStart = wrapFunc(this.element, option.touchStart || noop);
+        this.multipointStart = wrapFunc(this.element, option.multipointStart || noop);
+        this.multipointEnd = wrapFunc(this.element, option.multipointEnd || noop);
+        this.pinch = wrapFunc(this.element, option.pinch || noop);
+        this.swipe = wrapFunc(this.element, option.swipe || noop);
+        this.tap = wrapFunc(this.element, option.tap || noop);
+        this.doubleTap = wrapFunc(this.element, option.doubleTap || noop);
+        this.longTap = wrapFunc(this.element, option.longTap || noop);
+        this.singleTap = wrapFunc(this.element, option.singleTap || noop);
+        this.pressMove = wrapFunc(this.element, option.pressMove || noop);
+        this.twoFingerPressMove = wrapFunc(this.element, option.twoFingerPressMove || noop);
+        this.touchMove = wrapFunc(this.element, option.touchMove || noop);
+        this.touchEnd = wrapFunc(this.element, option.touchEnd || noop);
+        this.touchCancel = wrapFunc(this.element, option.touchCancel || noop);
+        this.translateContainer = this.element;
+
+        this._cancelAllHandler = this.cancelAll.bind(this);
+
+        window.addEventListener('scroll', this._cancelAllHandler);
+
+        this.delta = null;
+        this.last = null;
+        this.now = null;
+        this.tapTimeout = null;
+        this.singleTapTimeout = null;
+        this.longTapTimeout = null;
+        this.swipeTimeout = null;
+        this.x1 = this.x2 = this.y1 = this.y2 = null;
+        this.preTapPosition = { x: null, y: null };
+    }
+    start(evt) {
+        if (!evt.touches) {
+            return;
+        }
+
+        // Fix Media Buttons Not responding on Android #233
+        const ignoreDragFor = ['a', 'button', 'input'];
+        if (evt.target && evt.target.nodeName && ignoreDragFor.indexOf(evt.target.nodeName.toLowerCase()) >= 0) {
+            console.log('ignore drag for this touched element', evt.target.nodeName.toLowerCase());
+            return;
+        }
+
+        this.now = Date.now();
+        this.x1 = evt.touches[0].pageX;
+        this.y1 = evt.touches[0].pageY;
+        this.delta = this.now - (this.last || this.now);
+        this.touchStart.dispatch(evt, this.element);
+        if (this.preTapPosition.x !== null) {
+            this.isDoubleTap = this.delta > 0 && this.delta <= 250 && Math.abs(this.preTapPosition.x - this.x1) < 30 && Math.abs(this.preTapPosition.y - this.y1) < 30;
+            if (this.isDoubleTap) {
+                clearTimeout(this.singleTapTimeout);
+            }
+        }
+        this.preTapPosition.x = this.x1;
+        this.preTapPosition.y = this.y1;
+        this.last = this.now;
+        var preV = this.preV,
+            len = evt.touches.length;
+        if (len > 1) {
+            this._cancelLongTap();
+            this._cancelSingleTap();
+            var v = { x: evt.touches[1].pageX - this.x1, y: evt.touches[1].pageY - this.y1 };
+            preV.x = v.x;
+            preV.y = v.y;
+            this.pinchStartLen = getLen(preV);
+            this.multipointStart.dispatch(evt, this.element);
+        }
+        this._preventTap = false;
+        this.longTapTimeout = setTimeout(
+            function () {
+                this.longTap.dispatch(evt, this.element);
+                this._preventTap = true;
+            }.bind(this),
+            750
+        );
+    }
+    move(evt) {
+        if (!evt.touches) {
+            return;
+        }
+        var preV = this.preV,
+            len = evt.touches.length,
+            currentX = evt.touches[0].pageX,
+            currentY = evt.touches[0].pageY;
+        this.isDoubleTap = false;
+        if (len > 1) {
+            var sCurrentX = evt.touches[1].pageX,
+                sCurrentY = evt.touches[1].pageY;
+            var v = { x: evt.touches[1].pageX - currentX, y: evt.touches[1].pageY - currentY };
+
+            if (preV.x !== null) {
+                if (this.pinchStartLen > 0) {
+                    evt.zoom = getLen(v) / this.pinchStartLen;
+                    this.pinch.dispatch(evt, this.element);
+                }
+
+                evt.angle = getRotateAngle(v, preV);
+                this.rotate.dispatch(evt, this.element);
+            }
+            preV.x = v.x;
+            preV.y = v.y;
+
+            if (this.x2 !== null && this.sx2 !== null) {
+                evt.deltaX = (currentX - this.x2 + sCurrentX - this.sx2) / 2;
+                evt.deltaY = (currentY - this.y2 + sCurrentY - this.sy2) / 2;
+            } else {
+                evt.deltaX = 0;
+                evt.deltaY = 0;
+            }
+            this.twoFingerPressMove.dispatch(evt, this.element);
+
+            this.sx2 = sCurrentX;
+            this.sy2 = sCurrentY;
+        } else {
+            if (this.x2 !== null) {
+                evt.deltaX = currentX - this.x2;
+                evt.deltaY = currentY - this.y2;
+
+                var movedX = Math.abs(this.x1 - this.x2),
+                    movedY = Math.abs(this.y1 - this.y2);
+
+                if (movedX > 10 || movedY > 10) {
+                    this._preventTap = true;
+                }
+            } else {
+                evt.deltaX = 0;
+                evt.deltaY = 0;
+            }
+            this.pressMove.dispatch(evt, this.element);
+        }
+
+        this.touchMove.dispatch(evt, this.element);
+
+        this._cancelLongTap();
+        this.x2 = currentX;
+        this.y2 = currentY;
+
+        if (len > 1) {
+            evt.preventDefault();
+        }
+    }
+    end(evt) {
+        if (!evt.changedTouches) {
+            return;
+        }
+        this._cancelLongTap();
+        var self = this;
+        if (evt.touches.length < 2) {
+            this.multipointEnd.dispatch(evt, this.element);
+            this.sx2 = this.sy2 = null;
+        }
+
+        //swipe
+        if ((this.x2 && Math.abs(this.x1 - this.x2) > 30) || (this.y2 && Math.abs(this.y1 - this.y2) > 30)) {
+            evt.direction = this._swipeDirection(this.x1, this.x2, this.y1, this.y2);
+            this.swipeTimeout = setTimeout(function () {
+                self.swipe.dispatch(evt, self.element);
+            }, 0);
+        } else {
+            this.tapTimeout = setTimeout(function () {
+                if (!self._preventTap) {
+                    self.tap.dispatch(evt, self.element);
+                }
+                // trigger double tap immediately
+                if (self.isDoubleTap) {
+                    self.doubleTap.dispatch(evt, self.element);
+                    self.isDoubleTap = false;
+                }
+            }, 0);
+
+            if (!self.isDoubleTap) {
+                self.singleTapTimeout = setTimeout(function () {
+                    self.singleTap.dispatch(evt, self.element);
+                }, 250);
+            }
+        }
+
+        this.touchEnd.dispatch(evt, this.element);
+
+        this.preV.x = 0;
+        this.preV.y = 0;
+        this.zoom = 1;
+        this.pinchStartLen = null;
+        this.x1 = this.x2 = this.y1 = this.y2 = null;
+    }
+    cancelAll() {
+        this._preventTap = true;
+        clearTimeout(this.singleTapTimeout);
+        clearTimeout(this.tapTimeout);
+        clearTimeout(this.longTapTimeout);
+        clearTimeout(this.swipeTimeout);
+    }
+    cancel(evt) {
+        this.cancelAll();
+        this.touchCancel.dispatch(evt, this.element);
+    }
+    _cancelLongTap() {
+        clearTimeout(this.longTapTimeout);
+    }
+    _cancelSingleTap() {
+        clearTimeout(this.singleTapTimeout);
+    }
+    _swipeDirection(x1, x2, y1, y2) {
+        return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : y1 - y2 > 0 ? 'Up' : 'Down';
+    }
+    on(evt, handler) {
+        if (this[evt]) {
+            this[evt].add(handler);
+        }
+    }
+    off(evt, handler) {
+        if (this[evt]) {
+            this[evt].del(handler);
+        }
+    }
+    destroy() {
+        if (this.singleTapTimeout) {
+            clearTimeout(this.singleTapTimeout);
+        }
+        if (this.tapTimeout) {
+            clearTimeout(this.tapTimeout);
+        }
+        if (this.longTapTimeout) {
+            clearTimeout(this.longTapTimeout);
+        }
+        if (this.swipeTimeout) {
+            clearTimeout(this.swipeTimeout);
+        }
+
+        this.element.removeEventListener('touchstart', this.start);
+        this.element.removeEventListener('touchmove', this.move);
+        this.element.removeEventListener('touchend', this.end);
+        this.element.removeEventListener('touchcancel', this.cancel);
+
+        this.rotate.del();
+        this.touchStart.del();
+        this.multipointStart.del();
+        this.multipointEnd.del();
+        this.pinch.del();
+        this.swipe.del();
+        this.tap.del();
+        this.doubleTap.del();
+        this.longTap.del();
+        this.singleTap.del();
+        this.pressMove.del();
+        this.twoFingerPressMove.del();
+        this.touchMove.del();
+        this.touchEnd.del();
+        this.touchCancel.del();
+
+        this.preV =
+            this.pinchStartLen =
+            this.zoom =
+            this.isDoubleTap =
+            this.delta =
+            this.last =
+            this.now =
+            this.tapTimeout =
+            this.singleTapTimeout =
+            this.longTapTimeout =
+            this.swipeTimeout =
+            this.x1 =
+            this.x2 =
+            this.y1 =
+            this.y2 =
+            this.preTapPosition =
+            this.rotate =
+            this.touchStart =
+            this.multipointStart =
+            this.multipointEnd =
+            this.pinch =
+            this.swipe =
+            this.tap =
+            this.doubleTap =
+            this.longTap =
+            this.singleTap =
+            this.pressMove =
+            this.touchMove =
+            this.touchEnd =
+            this.touchCancel =
+            this.twoFingerPressMove =
+                null;
+
+        window.removeEventListener('scroll', this._cancelAllHandler);
+        return null;
+    }
+}

web/themes/custom/eql/librairies/glightbox-master/src/js/core/touch-navigation.js

@@ -0,0 +1,287 @@
+/**
+ * Touch Navigation
+ * Allow navigation using touch events
+ *
+ * @param {object} instance
+ */
+
+import TouchEvents from './touch-events.js';
+import { addEvent, addClass, removeClass, hasClass, closest, whichTransitionEvent, cssTransform, windowSize } from '../utils/helpers.js';
+
+function resetSlideMove(slide) {
+    const transitionEnd = whichTransitionEvent();
+    const windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+
+    let media = hasClass(slide, 'gslide-media') ? slide : slide.querySelector('.gslide-media');
+    let container = closest(media, '.ginner-container');
+    let desc = slide.querySelector('.gslide-description');
+
+    if (windowWidth > 769) {
+        media = container;
+    }
+
+    addClass(media, 'greset');
+    cssTransform(media, 'translate3d(0, 0, 0)');
+    addEvent(transitionEnd, {
+        onElement: media,
+        once: true,
+        withCallback: (event, target) => {
+            removeClass(media, 'greset');
+        }
+    });
+
+    media.style.opacity = '';
+    if (desc) {
+        desc.style.opacity = '';
+    }
+}
+
+export default function touchNavigation(instance) {
+    if (instance.events.hasOwnProperty('touch')) {
+        return false;
+    }
+
+    let winSize = windowSize();
+    let winWidth = winSize.width;
+    let winHeight = winSize.height;
+    let process = false;
+    let currentSlide = null;
+    let media = null;
+    let mediaImage = null;
+    let doingMove = false;
+    let initScale = 1;
+    let maxScale = 4.5;
+    let currentScale = 1;
+    let doingZoom = false;
+    let imageZoomed = false;
+    let zoomedPosX = null;
+    let zoomedPosY = null;
+    let lastZoomedPosX = null;
+    let lastZoomedPosY = null;
+    let hDistance;
+    let vDistance;
+    let hDistancePercent = 0;
+    let vDistancePercent = 0;
+    let vSwipe = false;
+    let hSwipe = false;
+    let startCoords = {};
+    let endCoords = {};
+    let xDown = 0;
+    let yDown = 0;
+    let isInlined;
+
+    const sliderWrapper = document.getElementById('glightbox-slider');
+    const overlay = document.querySelector('.goverlay');
+
+    const touchInstance = new TouchEvents(sliderWrapper, {
+        touchStart: (e) => {
+            process = true;
+
+            // TODO: More tests for inline content slides
+            if (hasClass(e.targetTouches[0].target, 'ginner-container') || closest(e.targetTouches[0].target, '.gslide-desc') || e.targetTouches[0].target.nodeName.toLowerCase() == 'a') {
+                process = false;
+            }
+
+            if (closest(e.targetTouches[0].target, '.gslide-inline') && !hasClass(e.targetTouches[0].target.parentNode, 'gslide-inline')) {
+                process = false;
+            }
+
+            if (process) {
+                endCoords = e.targetTouches[0];
+                startCoords.pageX = e.targetTouches[0].pageX;
+                startCoords.pageY = e.targetTouches[0].pageY;
+                xDown = e.targetTouches[0].clientX;
+                yDown = e.targetTouches[0].clientY;
+
+                currentSlide = instance.activeSlide;
+                media = currentSlide.querySelector('.gslide-media');
+                isInlined = currentSlide.querySelector('.gslide-inline');
+
+                mediaImage = null;
+                if (hasClass(media, 'gslide-image')) {
+                    mediaImage = media.querySelector('img');
+                }
+
+                const windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+
+                if (windowWidth > 769) {
+                    media = currentSlide.querySelector('.ginner-container');
+                }
+
+                removeClass(overlay, 'greset');
+
+                if (e.pageX > 20 && e.pageX < window.innerWidth - 20) {
+                    return;
+                }
+                e.preventDefault();
+            }
+        },
+        touchMove: (e) => {
+            if (!process) {
+                return;
+            }
+            endCoords = e.targetTouches[0];
+
+            if (doingZoom || imageZoomed) {
+                return;
+            }
+            if (isInlined && isInlined.offsetHeight > winHeight) {
+                // Allow scroll without moving the slide
+                const moved = startCoords.pageX - endCoords.pageX;
+                if (Math.abs(moved) <= 13) {
+                    return false;
+                }
+            }
+
+            doingMove = true;
+            let xUp = e.targetTouches[0].clientX;
+            let yUp = e.targetTouches[0].clientY;
+            let xDiff = xDown - xUp;
+            let yDiff = yDown - yUp;
+
+            if (Math.abs(xDiff) > Math.abs(yDiff)) {
+                vSwipe = false;
+                hSwipe = true;
+            } else {
+                hSwipe = false;
+                vSwipe = true;
+            }
+
+            hDistance = endCoords.pageX - startCoords.pageX;
+            hDistancePercent = (hDistance * 100) / winWidth;
+
+            vDistance = endCoords.pageY - startCoords.pageY;
+            vDistancePercent = (vDistance * 100) / winHeight;
+
+            let opacity;
+            if (vSwipe && mediaImage) {
+                opacity = 1 - Math.abs(vDistance) / winHeight;
+                overlay.style.opacity = opacity;
+
+                if (instance.settings.touchFollowAxis) {
+                    hDistancePercent = 0;
+                }
+            }
+            if (hSwipe) {
+                opacity = 1 - Math.abs(hDistance) / winWidth;
+                media.style.opacity = opacity;
+
+                if (instance.settings.touchFollowAxis) {
+                    vDistancePercent = 0;
+                }
+            }
+
+            if (!mediaImage) {
+                return cssTransform(media, `translate3d(${hDistancePercent}%, 0, 0)`);
+            }
+
+            cssTransform(media, `translate3d(${hDistancePercent}%, ${vDistancePercent}%, 0)`);
+        },
+        touchEnd: () => {
+            if (!process) {
+                return;
+            }
+            doingMove = false;
+            if (imageZoomed || doingZoom) {
+                lastZoomedPosX = zoomedPosX;
+                lastZoomedPosY = zoomedPosY;
+                return;
+            }
+            const v = Math.abs(parseInt(vDistancePercent));
+            const h = Math.abs(parseInt(hDistancePercent));
+
+            if (v > 29 && mediaImage) {
+                instance.close();
+                return;
+            }
+            if (v < 29 && h < 25) {
+                addClass(overlay, 'greset');
+                overlay.style.opacity = 1;
+                return resetSlideMove(media);
+            }
+        },
+        multipointEnd: () => {
+            setTimeout(() => {
+                doingZoom = false;
+            }, 50);
+        },
+        multipointStart: () => {
+            doingZoom = true;
+            initScale = currentScale ? currentScale : 1;
+        },
+        pinch: (evt) => {
+            if (!mediaImage || doingMove) {
+                return false;
+            }
+
+            doingZoom = true;
+            mediaImage.scaleX = mediaImage.scaleY = initScale * evt.zoom;
+
+            let scale = initScale * evt.zoom;
+            imageZoomed = true;
+
+            if (scale <= 1) {
+                imageZoomed = false;
+                scale = 1;
+                lastZoomedPosY = null;
+                lastZoomedPosX = null;
+                zoomedPosX = null;
+                zoomedPosY = null;
+                mediaImage.setAttribute('style', '');
+                return;
+            }
+            if (scale > maxScale) {
+                // max scale zoom
+                scale = maxScale;
+            }
+
+            mediaImage.style.transform = `scale3d(${scale}, ${scale}, 1)`;
+            currentScale = scale;
+        },
+        pressMove: (e) => {
+            if (imageZoomed && !doingZoom) {
+                var mhDistance = endCoords.pageX - startCoords.pageX;
+                var mvDistance = endCoords.pageY - startCoords.pageY;
+
+                if (lastZoomedPosX) {
+                    mhDistance = mhDistance + lastZoomedPosX;
+                }
+                if (lastZoomedPosY) {
+                    mvDistance = mvDistance + lastZoomedPosY;
+                }
+
+                zoomedPosX = mhDistance;
+                zoomedPosY = mvDistance;
+
+                let style = `translate3d(${mhDistance}px, ${mvDistance}px, 0)`;
+                if (currentScale) {
+                    style += ` scale3d(${currentScale}, ${currentScale}, 1)`;
+                }
+                cssTransform(mediaImage, style);
+            }
+        },
+        swipe: (evt) => {
+            if (imageZoomed) {
+                return;
+            }
+            if (doingZoom) {
+                doingZoom = false;
+                return;
+            }
+            if (evt.direction == 'Left') {
+                if (instance.index == instance.elements.length - 1) {
+                    return resetSlideMove(media);
+                }
+                instance.nextSlide();
+            }
+            if (evt.direction == 'Right') {
+                if (instance.index == 0) {
+                    return resetSlideMove(media);
+                }
+                instance.prevSlide();
+            }
+        }
+    });
+
+    instance.events['touch'] = touchInstance;
+}

web/themes/custom/eql/librairies/glightbox-master/src/js/core/zoom.js

@@ -0,0 +1,156 @@
+/**
+ * ZoomImages
+ * Allow imaes to zoom and drag
+ * for desktops
+ *
+ * @param {node} img node
+ * @param {node} slide container
+ * @param {function} function to trigger on close
+ */
+export default class ZoomImages {
+    constructor(el, slide, onclose = null) {
+        this.img = el;
+        this.slide = slide;
+        this.onclose = onclose;
+
+        if (this.img.setZoomEvents) {
+            return false;
+        }
+
+        this.active = false;
+        this.zoomedIn = false;
+        this.dragging = false;
+        this.currentX = null;
+        this.currentY = null;
+        this.initialX = null;
+        this.initialY = null;
+        this.xOffset = 0;
+        this.yOffset = 0;
+
+        this.img.addEventListener('mousedown', (e) => this.dragStart(e), false);
+        this.img.addEventListener('mouseup', (e) => this.dragEnd(e), false);
+        this.img.addEventListener('mousemove', (e) => this.drag(e), false);
+
+        this.img.addEventListener(
+            'click',
+            (e) => {
+                if (this.slide.classList.contains('dragging-nav')) {
+                    this.zoomOut();
+                    return false;
+                }
+
+                if (!this.zoomedIn) {
+                    return this.zoomIn();
+                }
+                if (this.zoomedIn && !this.dragging) {
+                    this.zoomOut();
+                }
+            },
+            false
+        );
+
+        this.img.setZoomEvents = true;
+    }
+    zoomIn() {
+        let winWidth = this.widowWidth();
+
+        if (this.zoomedIn || winWidth <= 768) {
+            return;
+        }
+
+        const img = this.img;
+        img.setAttribute('data-style', img.getAttribute('style'));
+        img.style.maxWidth = img.naturalWidth + 'px';
+        img.style.maxHeight = img.naturalHeight + 'px';
+
+        if (img.naturalWidth > winWidth) {
+            let centerX = winWidth / 2 - img.naturalWidth / 2;
+            this.setTranslate(this.img.parentNode, centerX, 0);
+        }
+        this.slide.classList.add('zoomed');
+        this.zoomedIn = true;
+    }
+    zoomOut() {
+        this.img.parentNode.setAttribute('style', '');
+        this.img.setAttribute('style', this.img.getAttribute('data-style'));
+        this.slide.classList.remove('zoomed');
+        this.zoomedIn = false;
+        this.currentX = null;
+        this.currentY = null;
+        this.initialX = null;
+        this.initialY = null;
+        this.xOffset = 0;
+        this.yOffset = 0;
+
+        if (this.onclose && typeof this.onclose == 'function') {
+            this.onclose();
+        }
+    }
+    dragStart(e) {
+        e.preventDefault();
+        if (!this.zoomedIn) {
+            this.active = false;
+            return;
+        }
+        if (e.type === 'touchstart') {
+            this.initialX = e.touches[0].clientX - this.xOffset;
+            this.initialY = e.touches[0].clientY - this.yOffset;
+        } else {
+            this.initialX = e.clientX - this.xOffset;
+            this.initialY = e.clientY - this.yOffset;
+        }
+
+        if (e.target === this.img) {
+            this.active = true;
+            this.img.classList.add('dragging');
+        }
+    }
+    dragEnd(e) {
+        e.preventDefault();
+        this.initialX = this.currentX;
+        this.initialY = this.currentY;
+        this.active = false;
+
+        setTimeout(() => {
+            this.dragging = false;
+            this.img.isDragging = false;
+            this.img.classList.remove('dragging');
+        }, 100);
+    }
+    drag(e) {
+        if (this.active) {
+            e.preventDefault();
+
+            if (e.type === 'touchmove') {
+                this.currentX = e.touches[0].clientX - this.initialX;
+                this.currentY = e.touches[0].clientY - this.initialY;
+            } else {
+                this.currentX = e.clientX - this.initialX;
+                this.currentY = e.clientY - this.initialY;
+            }
+
+            this.xOffset = this.currentX;
+            this.yOffset = this.currentY;
+
+            this.img.isDragging = true;
+            this.dragging = true;
+
+            this.setTranslate(this.img, this.currentX, this.currentY);
+        }
+    }
+    onMove(e) {
+        if (!this.zoomedIn) {
+            return;
+        }
+        let xOffset = e.clientX - this.img.naturalWidth / 2;
+        let yOffset = e.clientY - this.img.naturalHeight / 2;
+
+        this.setTranslate(this.img, xOffset, yOffset);
+    }
+    setTranslate(node, xPos, yPos) {
+        node.style.transform = 'translate3d(' + xPos + 'px, ' + yPos + 'px, 0)';
+    }
+    widowWidth() {
+        return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+    }
+}

web/themes/custom/eql/librairies/glightbox-master/src/js/glightbox.js

@@ -0,0 +1,1341 @@
+/**
+ * GLightbox
+ * Awesome pure javascript lightbox
+ * made by https://www.biati.digital
+ * Github: https://github.com/biati-digital/glightbox
+ */
+
+import keyboardNavigation from './core/keyboard-navigation.js';
+import Slide from './core/slide.js';
+import touchNavigation from './core/touch-navigation.js';
+import * as _ from './utils/helpers.js';
+
+const version = '3.3.1';
+const isMobile = _.isMobile();
+const isTouch = _.isTouch();
+const html = document.getElementsByTagName('html')[0];
+
+const defaults = {
+    selector: '.glightbox',
+    elements: null,
+    skin: 'clean',
+    theme: 'clean',
+    closeButton: true,
+    startAt: null,
+    autoplayVideos: true,
+    autofocusVideos: true,
+    descPosition: 'bottom',
+    width: '900px',
+    height: '506px',
+    videosWidth: '960px',
+    beforeSlideChange: null,
+    afterSlideChange: null,
+    beforeSlideLoad: null,
+    afterSlideLoad: null,
+    slideInserted: null,
+    slideRemoved: null,
+    slideExtraAttributes: null,
+    onOpen: null,
+    onClose: null,
+    loop: false,
+    zoomable: true,
+    draggable: true,
+    dragAutoSnap: false,
+    dragToleranceX: 40,
+    dragToleranceY: 65,
+    preload: true,
+    oneSlidePerOpen: false,
+    touchNavigation: true,
+    touchFollowAxis: true,
+    keyboardNavigation: true,
+    closeOnOutsideClick: true,
+    plugins: false,
+    plyr: {
+        css: 'https://cdn.plyr.io/3.6.12/plyr.css',
+        js: 'https://cdn.plyr.io/3.6.12/plyr.js',
+        config: {
+            ratio: '16:9', // or '4:3'
+            fullscreen: { enabled: true, iosNative: true },
+            youtube: {
+                noCookie: true,
+                rel: 0,
+                showinfo: 0,
+                iv_load_policy: 3 // eslint-disable-line camelcase
+            },
+            vimeo: {
+                byline: false,
+                portrait: false,
+                title: false,
+                transparent: false
+            }
+        }
+    },
+    openEffect: 'zoom', // fade, zoom, none
+    closeEffect: 'zoom', // fade, zoom, none
+    slideEffect: 'slide', // fade, slide, zoom, none
+    moreText: 'See more',
+    moreLength: 60,
+    cssEfects: {
+        fade: { in: 'fadeIn', out: 'fadeOut' },
+        zoom: { in: 'zoomIn', out: 'zoomOut' },
+        slide: { in: 'slideInRight', out: 'slideOutLeft' },
+        slideBack: { in: 'slideInLeft', out: 'slideOutRight' },
+        none: { in: 'none', out: 'none' }
+    },
+    svg: {
+        close: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve"><g><g><path d="M505.943,6.058c-8.077-8.077-21.172-8.077-29.249,0L6.058,476.693c-8.077,8.077-8.077,21.172,0,29.249C10.096,509.982,15.39,512,20.683,512c5.293,0,10.586-2.019,14.625-6.059L505.943,35.306C514.019,27.23,514.019,14.135,505.943,6.058z"/></g></g><g><g><path d="M505.942,476.694L35.306,6.059c-8.076-8.077-21.172-8.077-29.248,0c-8.077,8.076-8.077,21.171,0,29.248l470.636,470.636c4.038,4.039,9.332,6.058,14.625,6.058c5.293,0,10.587-2.019,14.624-6.057C514.018,497.866,514.018,484.771,505.942,476.694z"/></g></g></svg>',
+        next: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 477.175 477.175" xml:space="preserve"> <g><path d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z"/></g></svg>',
+        prev: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 477.175 477.175" xml:space="preserve"><g><path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"/></g></svg>'
+    }
+};
+
+// You can pass your own slide structure
+// just make sure that add the same classes so they are populated
+// title class = gslide-title
+// desc class = gslide-desc
+// prev arrow class = gnext
+// next arrow id = gprev
+// close id = gclose
+defaults.slideHTML = `<div class="gslide">
+    <div class="gslide-inner-content">
+        <div class="ginner-container">
+            <div class="gslide-media">
+            </div>
+            <div class="gslide-description">
+                <div class="gdesc-inner">
+                    <h4 class="gslide-title"></h4>
+                    <div class="gslide-desc"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>`;
+
+defaults.lightboxHTML = `<div id="glightbox-body" class="glightbox-container" tabindex="-1" role="dialog" aria-hidden="false">
+    <div class="gloader visible"></div>
+    <div class="goverlay"></div>
+    <div class="gcontainer">
+    <div id="glightbox-slider" class="gslider"></div>
+    <button class="gclose gbtn" aria-label="Close" data-taborder="3">{closeSVG}</button>
+    <button class="gprev gbtn" aria-label="Previous" data-taborder="2">{prevSVG}</button>
+    <button class="gnext gbtn" aria-label="Next" data-taborder="1">{nextSVG}</button>
+</div>
+</div>`;
+
+/**
+ * GLightbox Class
+ * Class and public methods
+ */
+class GlightboxInit {
+    constructor(options = {}) {
+        this.customOptions = options;
+        this.settings = _.extend(defaults, options);
+        this.effectsClasses = this.getAnimationClasses();
+        this.videoPlayers = {};
+        this.apiEvents = [];
+        this.fullElementsList = false;
+    }
+
+    init() {
+        const selector = this.getSelector();
+
+        if (selector) {
+            this.baseEvents = _.addEvent('click', {
+                onElement: selector,
+                withCallback: (e, target) => {
+                    e.preventDefault();
+                    this.open(target);
+                }
+            });
+        }
+
+        this.elements = this.getElements();
+    }
+
+    open(element = null, startAt = null) {
+        if (this.elements.length === 0) {
+            return false;
+        }
+
+        this.activeSlide = null;
+        this.prevActiveSlideIndex = null;
+        this.prevActiveSlide = null;
+        let index = _.isNumber(startAt) ? startAt : this.settings.startAt;
+
+        if (_.isNode(element)) {
+            const gallery = element.getAttribute('data-gallery');
+            if (gallery) {
+                this.fullElementsList = this.elements;
+                this.elements = this.getGalleryElements(this.elements, gallery);
+            }
+            if (_.isNil(index)) {
+                // get the index of the element
+                index = this.getElementIndex(element);
+                if (index < 0) {
+                    index = 0;
+                }
+            }
+        }
+
+        if (!_.isNumber(index)) {
+            index = 0;
+        }
+
+        this.build();
+
+        _.animateElement(this.overlay, this.settings.openEffect === 'none' ? 'none' : this.settings.cssEfects.fade.in);
+
+        const body = document.body;
+
+        const scrollBar = window.innerWidth - document.documentElement.clientWidth;
+        if (scrollBar > 0) {
+            var styleSheet = document.createElement('style');
+            styleSheet.type = 'text/css';
+            styleSheet.className = 'gcss-styles';
+            styleSheet.innerText = `.gscrollbar-fixer {margin-right: ${scrollBar}px}`;
+            document.head.appendChild(styleSheet);
+            _.addClass(body, 'gscrollbar-fixer');
+        }
+
+        _.addClass(body, 'glightbox-open');
+        _.addClass(html, 'glightbox-open');
+        if (isMobile) {
+            _.addClass(document.body, 'glightbox-mobile');
+            this.settings.slideEffect = 'slide';
+        }
+
+        this.showSlide(index, true);
+
+        if (this.elements.length === 1) {
+            _.addClass(this.prevButton, 'glightbox-button-hidden');
+            _.addClass(this.nextButton, 'glightbox-button-hidden');
+        } else {
+            _.removeClass(this.prevButton, 'glightbox-button-hidden');
+            _.removeClass(this.nextButton, 'glightbox-button-hidden');
+        }
+        this.lightboxOpen = true;
+
+        this.trigger('open');
+
+        // settings.onOpen is deprecated and will be removed in a future update
+        if (_.isFunction(this.settings.onOpen)) {
+            this.settings.onOpen();
+        }
+        if (isTouch && this.settings.touchNavigation) {
+            touchNavigation(this);
+        }
+        if (this.settings.keyboardNavigation) {
+            keyboardNavigation(this);
+        }
+    }
+
+    /**
+     * Open at specific index
+     * @param {int} index
+     */
+    openAt(index = 0) {
+        this.open(null, index);
+    }
+
+    /**
+     * Set Slide
+     */
+    showSlide(index = 0, first = false) {
+        _.show(this.loader);
+        this.index = parseInt(index);
+
+        let current = this.slidesContainer.querySelector('.current');
+        if (current) {
+            _.removeClass(current, 'current');
+        }
+
+        // hide prev slide
+        this.slideAnimateOut();
+
+        let slideNode = this.slidesContainer.querySelectorAll('.gslide')[index];
+
+        // Check if slide's content is alreay loaded
+        if (_.hasClass(slideNode, 'loaded')) {
+            this.slideAnimateIn(slideNode, first);
+            _.hide(this.loader);
+        } else {
+            // If not loaded add the slide content
+            _.show(this.loader);
+
+            const slide = this.elements[index];
+            const slideData = {
+                index: this.index,
+                slide: slideNode, //this will be removed in the future
+                slideNode: slideNode,
+                slideConfig: slide.slideConfig,
+                slideIndex: this.index,
+                trigger: slide.node,
+                player: null
+            };
+
+            this.trigger('slide_before_load', slideData);
+
+            slide.instance.setContent(slideNode, () => {
+                _.hide(this.loader);
+                this.resize();
+                this.slideAnimateIn(slideNode, first);
+                this.trigger('slide_after_load', slideData);
+            });
+        }
+
+        this.slideDescription = slideNode.querySelector('.gslide-description');
+        this.slideDescriptionContained = this.slideDescription && _.hasClass(this.slideDescription.parentNode, 'gslide-media');
+
+        // Preload subsequent slides
+        if (this.settings.preload) {
+            this.preloadSlide(index + 1);
+            this.preloadSlide(index - 1);
+        }
+
+        // Handle navigation arrows
+        this.updateNavigationClasses();
+
+        this.activeSlide = slideNode;
+    }
+
+    /**
+     * Preload slides
+     * @param  {Int}  index slide index
+     * @return {null}
+     */
+    preloadSlide(index) {
+        // Verify slide index, it can not be lower than 0
+        // and it can not be greater than the total elements
+        if (index < 0 || index > this.elements.length - 1) {
+            return false;
+        }
+
+        if (_.isNil(this.elements[index])) {
+            return false;
+        }
+
+        let slideNode = this.slidesContainer.querySelectorAll('.gslide')[index];
+        if (_.hasClass(slideNode, 'loaded')) {
+            return false;
+        }
+
+        const slide = this.elements[index];
+        const type = slide.type;
+        const slideData = {
+            index: index,
+            slide: slideNode, //this will be removed in the future
+            slideNode: slideNode,
+            slideConfig: slide.slideConfig,
+            slideIndex: index,
+            trigger: slide.node,
+            player: null
+        };
+
+        this.trigger('slide_before_load', slideData);
+
+        if (type === 'video' || type === 'external') {
+            setTimeout(() => {
+                slide.instance.setContent(slideNode, () => {
+                    this.trigger('slide_after_load', slideData);
+                });
+            }, 200);
+        } else {
+            slide.instance.setContent(slideNode, () => {
+                this.trigger('slide_after_load', slideData);
+            });
+        }
+    }
+
+    /**
+     * Load previous slide
+     * calls goToslide
+     */
+    prevSlide() {
+        this.goToSlide(this.index - 1);
+    }
+
+    /**
+     * Load next slide
+     * calls goToslide
+     */
+    nextSlide() {
+        this.goToSlide(this.index + 1);
+    }
+
+    /**
+     * Go to sldei
+     * calls set slide
+     * @param {Int} - index
+     */
+    goToSlide(index = false) {
+        this.prevActiveSlide = this.activeSlide;
+        this.prevActiveSlideIndex = this.index;
+
+        if (!this.loop() && (index < 0 || index > this.elements.length - 1)) {
+            return false;
+        }
+        if (index < 0) {
+            index = this.elements.length - 1;
+        } else if (index >= this.elements.length) {
+            index = 0;
+        }
+        this.showSlide(index);
+    }
+
+    /**
+     * Insert slide
+     *
+     * @param { object } data
+     * @param { numeric } position
+     */
+    insertSlide(config = {}, index = -1) {
+        // Append at the end
+        if (index < 0) {
+            index = this.elements.length;
+        }
+
+        const slide = new Slide(config, this, index);
+        const data = slide.getConfig();
+        const slideInfo = _.extend({}, data);
+        const newSlide = slide.create();
+        const totalSlides = this.elements.length - 1;
+
+        slideInfo.index = index;
+        slideInfo.node = false;
+        slideInfo.instance = slide;
+        slideInfo.slideConfig = data;
+        this.elements.splice(index, 0, slideInfo);
+
+        let addedSlideNode = null;
+        let addedSlidePlayer = null;
+
+        if (this.slidesContainer) {
+            // Append at the end
+            if (index > totalSlides) {
+                this.slidesContainer.appendChild(newSlide);
+            } else {
+                // A current slide must exist in the position specified
+                // we need tp get that slide and insder the new slide before
+                let existingSlide = this.slidesContainer.querySelectorAll('.gslide')[index];
+                this.slidesContainer.insertBefore(newSlide, existingSlide);
+            }
+
+            if ((this.settings.preload && this.index == 0 && index == 0) || this.index - 1 == index || this.index + 1 == index) {
+                this.preloadSlide(index);
+            }
+
+            if (this.index === 0 && index === 0) {
+                this.index = 1;
+            }
+
+            this.updateNavigationClasses();
+
+            addedSlideNode = this.slidesContainer.querySelectorAll('.gslide')[index];
+            addedSlidePlayer = this.getSlidePlayerInstance(index);
+            slideInfo.slideNode = addedSlideNode;
+        }
+
+        this.trigger('slide_inserted', {
+            index: index,
+            slide: addedSlideNode,
+            slideNode: addedSlideNode,
+            slideConfig: data,
+            slideIndex: index,
+            trigger: null,
+            player: addedSlidePlayer
+        });
+
+        // Deprecated and will be removed in a future update
+        if (_.isFunction(this.settings.slideInserted)) {
+            this.settings.slideInserted({
+                index: index,
+                slide: addedSlideNode,
+                player: addedSlidePlayer
+            });
+        }
+    }
+
+    /**
+     * Remove slide
+     *
+     * @param { numeric } position
+     */
+    removeSlide(index = -1) {
+        if (index < 0 || index > this.elements.length - 1) {
+            return false;
+        }
+
+        const slide = this.slidesContainer && this.slidesContainer.querySelectorAll('.gslide')[index];
+
+        if (slide) {
+            if (this.getActiveSlideIndex() == index) {
+                if (index == this.elements.length - 1) {
+                    this.prevSlide();
+                } else {
+                    this.nextSlide();
+                }
+            }
+            slide.parentNode.removeChild(slide);
+        }
+        this.elements.splice(index, 1);
+
+        this.trigger('slide_removed', index);
+
+        // Deprecated and will be removed in a future update
+        if (_.isFunction(this.settings.slideRemoved)) {
+            this.settings.slideRemoved(index);
+        }
+    }
+
+    /**
+     * Slide In
+     * @return {null}
+     */
+    slideAnimateIn(slide, first) {
+        let slideMedia = slide.querySelector('.gslide-media');
+        let slideDesc = slide.querySelector('.gslide-description');
+        let prevData = {
+            index: this.prevActiveSlideIndex,
+            slide: this.prevActiveSlide, //this will be removed in the future
+            slideNode: this.prevActiveSlide,
+            slideIndex: this.prevActiveSlide,
+            slideConfig: _.isNil(this.prevActiveSlideIndex) ? null : this.elements[this.prevActiveSlideIndex].slideConfig,
+            trigger: _.isNil(this.prevActiveSlideIndex) ? null : this.elements[this.prevActiveSlideIndex].node,
+            player: this.getSlidePlayerInstance(this.prevActiveSlideIndex)
+        };
+
+        let nextData = {
+            index: this.index,
+            slide: this.activeSlide, //this will be removed in the future
+            slideNode: this.activeSlide,
+            slideConfig: this.elements[this.index].slideConfig,
+            slideIndex: this.index,
+            trigger: this.elements[this.index].node,
+            player: this.getSlidePlayerInstance(this.index)
+        };
+        if (slideMedia.offsetWidth > 0 && slideDesc) {
+            _.hide(slideDesc);
+            slideDesc.style.display = '';
+        }
+
+        _.removeClass(slide, this.effectsClasses);
+
+        if (first) {
+            _.animateElement(slide, this.settings.cssEfects[this.settings.openEffect].in, () => {
+                if (this.settings.autoplayVideos) {
+                    this.slidePlayerPlay(slide);
+                }
+
+                this.trigger('slide_changed', {
+                    prev: prevData,
+                    current: nextData
+                });
+
+                // settings.afterSlideChange is deprecated and will be removed in a future update
+                if (_.isFunction(this.settings.afterSlideChange)) {
+                    this.settings.afterSlideChange.apply(this, [prevData, nextData]);
+                }
+            });
+        } else {
+            let effectName = this.settings.slideEffect;
+            let animIn = effectName !== 'none' ? this.settings.cssEfects[effectName].in : effectName;
+            if (this.prevActiveSlideIndex > this.index) {
+                if (this.settings.slideEffect == 'slide') {
+                    animIn = this.settings.cssEfects.slideBack.in;
+                }
+            }
+            _.animateElement(slide, animIn, () => {
+                if (this.settings.autoplayVideos) {
+                    this.slidePlayerPlay(slide);
+                }
+
+                this.trigger('slide_changed', {
+                    prev: prevData,
+                    current: nextData
+                });
+
+                // settings.afterSlideChange is deprecated and will be removed in a future update
+                if (_.isFunction(this.settings.afterSlideChange)) {
+                    this.settings.afterSlideChange.apply(this, [prevData, nextData]);
+                }
+            });
+        }
+
+        setTimeout(() => {
+            this.resize(slide);
+        }, 100);
+        _.addClass(slide, 'current');
+    }
+
+    /**
+     * Slide out
+     */
+    slideAnimateOut() {
+        if (!this.prevActiveSlide) {
+            return false;
+        }
+
+        let prevSlide = this.prevActiveSlide;
+        _.removeClass(prevSlide, this.effectsClasses);
+        _.addClass(prevSlide, 'prev');
+
+        let animation = this.settings.slideEffect;
+        let animOut = animation !== 'none' ? this.settings.cssEfects[animation].out : animation;
+
+        this.slidePlayerPause(prevSlide);
+
+        this.trigger('slide_before_change', {
+            prev: {
+                index: this.prevActiveSlideIndex, //this will be removed in the future
+                slide: this.prevActiveSlide, //this will be removed in the future
+                slideNode: this.prevActiveSlide,
+                slideIndex: this.prevActiveSlideIndex,
+                slideConfig: _.isNil(this.prevActiveSlideIndex) ? null : this.elements[this.prevActiveSlideIndex].slideConfig,
+                trigger: _.isNil(this.prevActiveSlideIndex) ? null : this.elements[this.prevActiveSlideIndex].node,
+                player: this.getSlidePlayerInstance(this.prevActiveSlideIndex)
+            },
+            current: {
+                index: this.index, //this will be removed in the future
+                slide: this.activeSlide, //this will be removed in the future
+                slideNode: this.activeSlide,
+                slideIndex: this.index,
+                slideConfig: this.elements[this.index].slideConfig,
+                trigger: this.elements[this.index].node,
+                player: this.getSlidePlayerInstance(this.index)
+            }
+        });
+
+        // settings.beforeSlideChange is deprecated and will be removed in a future update
+        if (_.isFunction(this.settings.beforeSlideChange)) {
+            this.settings.beforeSlideChange.apply(this, [
+                {
+                    index: this.prevActiveSlideIndex,
+                    slide: this.prevActiveSlide,
+                    player: this.getSlidePlayerInstance(this.prevActiveSlideIndex)
+                },
+                {
+                    index: this.index,
+                    slide: this.activeSlide,
+                    player: this.getSlidePlayerInstance(this.index)
+                }
+            ]);
+        }
+        if (this.prevActiveSlideIndex > this.index && this.settings.slideEffect == 'slide') {
+            // going back
+            animOut = this.settings.cssEfects.slideBack.out;
+        }
+        _.animateElement(prevSlide, animOut, () => {
+            let container = prevSlide.querySelector('.ginner-container');
+            let media = prevSlide.querySelector('.gslide-media');
+            let desc = prevSlide.querySelector('.gslide-description');
+
+            container.style.transform = '';
+            media.style.transform = '';
+            _.removeClass(media, 'greset');
+            media.style.opacity = '';
+            if (desc) {
+                desc.style.opacity = '';
+            }
+            _.removeClass(prevSlide, 'prev');
+        });
+    }
+
+    /**
+     * Get all defined players
+     */
+    getAllPlayers() {
+        return this.videoPlayers;
+    }
+
+    /**
+     * Get player at index
+     *
+     * @param index
+     * @return bool|object
+     */
+    getSlidePlayerInstance(index) {
+        const id = 'gvideo' + index;
+        const videoPlayers = this.getAllPlayers();
+
+        if (_.has(videoPlayers, id) && videoPlayers[id]) {
+            return videoPlayers[id];
+        }
+
+        return false;
+    }
+
+    /**
+     * Stop video at specified
+     * node or index
+     *
+     * @param slide node or index
+     * @return void
+     */
+    stopSlideVideo(slide) {
+        if (_.isNode(slide)) {
+            let node = slide.querySelector('.gvideo-wrapper');
+            if (node) {
+                slide = node.getAttribute('data-index');
+            }
+        }
+        console.log('stopSlideVideo is deprecated, use slidePlayerPause');
+        const player = this.getSlidePlayerInstance(slide);
+        if (player && player.playing) {
+            player.pause();
+        }
+    }
+
+    /**
+     * Stop player at specified index
+     *
+     * @param slide node or index
+     * @return void
+     */
+    slidePlayerPause(slide) {
+        if (_.isNode(slide)) {
+            let node = slide.querySelector('.gvideo-wrapper');
+            if (node) {
+                slide = node.getAttribute('data-index');
+            }
+        }
+        const player = this.getSlidePlayerInstance(slide);
+        if (player && player.playing) {
+            player.pause();
+        }
+    }
+
+    /**
+     * Play video at specified
+     * node or index
+     *
+     * @param slide node or index
+     * @return void
+     */
+    playSlideVideo(slide) {
+        if (_.isNode(slide)) {
+            let node = slide.querySelector('.gvideo-wrapper');
+            if (node) {
+                slide = node.getAttribute('data-index');
+            }
+        }
+        console.log('playSlideVideo is deprecated, use slidePlayerPlay');
+        const player = this.getSlidePlayerInstance(slide);
+        if (player && !player.playing) {
+            player.play();
+        }
+    }
+
+    /**
+     * Play media player at specified
+     * node or index
+     *
+     * @param slide node or index
+     * @return void
+     */
+    slidePlayerPlay(slide) {
+        // Do not autoplay on mobile
+        // plyr does not handle well the errors
+        // and the player becomes unplayable
+        if (isMobile && !this.settings.plyr.config?.muted) {
+            return;
+        }
+
+        if (_.isNode(slide)) {
+            let node = slide.querySelector('.gvideo-wrapper');
+            if (node) {
+                slide = node.getAttribute('data-index');
+            }
+        }
+
+        const player = this.getSlidePlayerInstance(slide);
+
+        if (player && !player.playing) {
+            player.play();
+            if (this.settings.autofocusVideos) {
+                player.elements.container.focus();
+            }
+        }
+    }
+
+    /**
+     * Set the entire elements
+     * in the gallery, it replaces all
+     * the existing elements
+     * with the specified list
+     *
+     * @param {array}  elements
+     */
+    setElements(elements) {
+        this.settings.elements = false;
+
+        const newElements = [];
+
+        if (elements && elements.length) {
+            _.each(elements, (el, i) => {
+                const slide = new Slide(el, this, i);
+                const data = slide.getConfig();
+                const slideInfo = _.extend({}, data);
+
+                slideInfo.slideConfig = data;
+                slideInfo.instance = slide;
+                slideInfo.index = i;
+                newElements.push(slideInfo);
+            });
+        }
+
+        this.elements = newElements;
+
+        if (this.lightboxOpen) {
+            this.slidesContainer.innerHTML = '';
+
+            if (this.elements.length) {
+                _.each(this.elements, () => {
+                    let slide = _.createHTML(this.settings.slideHTML);
+                    this.slidesContainer.appendChild(slide);
+                });
+                this.showSlide(0, true);
+            }
+        }
+    }
+
+    /**
+     * Return the index
+     * of the specified node,
+     * this node is for example an image, link, etc.
+     * that when clicked it opens the lightbox
+     * its position in the elements array can change
+     * when using insertSlide or removeSlide so we
+     * need to find it in the elements list
+     *
+     * @param {node} node
+     * @return bool|int
+     */
+    getElementIndex(node) {
+        let index = false;
+        _.each(this.elements, (el, i) => {
+            if (_.has(el, 'node') && el.node == node) {
+                index = i;
+                return true; // exit loop
+            }
+        });
+
+        return index;
+    }
+
+    /**
+     * Get elements
+     * returns an array containing all
+     * the elements that must be displayed in the
+     * lightbox
+     *
+     * @return { array }
+     */
+    getElements() {
+        let list = [];
+        this.elements = this.elements ? this.elements : [];
+
+        if (!_.isNil(this.settings.elements) && _.isArray(this.settings.elements) && this.settings.elements.length) {
+            _.each(this.settings.elements, (el, i) => {
+                const slide = new Slide(el, this, i);
+                const elData = slide.getConfig();
+                const slideInfo = _.extend({}, elData);
+
+                slideInfo.node = false;
+                slideInfo.index = i;
+                slideInfo.instance = slide;
+                slideInfo.slideConfig = elData;
+                list.push(slideInfo);
+            });
+        }
+
+        let nodes = false;
+        let selector = this.getSelector();
+
+        if (selector) {
+            nodes = document.querySelectorAll(this.getSelector());
+        }
+
+        if (!nodes) {
+            return list;
+        }
+
+        _.each(nodes, (el, i) => {
+            const slide = new Slide(el, this, i);
+            const elData = slide.getConfig();
+            const slideInfo = _.extend({}, elData);
+
+            slideInfo.node = el;
+            slideInfo.index = i;
+            slideInfo.instance = slide;
+            slideInfo.slideConfig = elData;
+            slideInfo.gallery = el.getAttribute('data-gallery');
+            list.push(slideInfo);
+        });
+
+        return list;
+    }
+
+    /**
+     * Return only the elements
+     * from a specific gallery
+     *
+     * @return array
+     */
+    getGalleryElements(list, gallery) {
+        return list.filter((el) => {
+            return el.gallery == gallery;
+        });
+    }
+
+    /**
+     * Get selector
+     */
+    getSelector() {
+        if (this.settings.elements) {
+            return false;
+        }
+        if (this.settings.selector && this.settings.selector.substring(0, 5) == 'data-') {
+            return `*[${this.settings.selector}]`;
+        }
+        return this.settings.selector;
+    }
+
+    /**
+     * Get the active slide
+     */
+    getActiveSlide() {
+        return this.slidesContainer.querySelectorAll('.gslide')[this.index];
+    }
+
+    /**
+     * Get the active index
+     */
+    getActiveSlideIndex() {
+        return this.index;
+    }
+
+    /**
+     * Get the defined
+     * effects as string
+     */
+    getAnimationClasses() {
+        let effects = [];
+        for (let key in this.settings.cssEfects) {
+            if (this.settings.cssEfects.hasOwnProperty(key)) {
+                let effect = this.settings.cssEfects[key];
+                effects.push(`g${effect.in}`);
+                effects.push(`g${effect.out}`);
+            }
+        }
+        return effects.join(' ');
+    }
+
+    /**
+     * Build the structure
+     * @return {null}
+     */
+    build() {
+        if (this.built) {
+            return false;
+        }
+
+        // TODO: :scope is not supported on IE or first Edge. so we'll
+        // update this when IE support is removed to use newer code
+        //const children = document.body.querySelectorAll(':scope > *');
+        const children = document.body.childNodes;
+        const bodyChildElms = [];
+        _.each(children, (el) => {
+            if (el.parentNode == document.body && el.nodeName.charAt(0) !== '#' && el.hasAttribute && !el.hasAttribute('aria-hidden')) {
+                bodyChildElms.push(el);
+                el.setAttribute('aria-hidden', 'true');
+            }
+        });
+
+        const nextSVG = _.has(this.settings.svg, 'next') ? this.settings.svg.next : '';
+        const prevSVG = _.has(this.settings.svg, 'prev') ? this.settings.svg.prev : '';
+        const closeSVG = _.has(this.settings.svg, 'close') ? this.settings.svg.close : '';
+
+        let lightboxHTML = this.settings.lightboxHTML;
+        lightboxHTML = lightboxHTML.replace(/{nextSVG}/g, nextSVG);
+        lightboxHTML = lightboxHTML.replace(/{prevSVG}/g, prevSVG);
+        lightboxHTML = lightboxHTML.replace(/{closeSVG}/g, closeSVG);
+
+        lightboxHTML = _.createHTML(lightboxHTML);
+        document.body.appendChild(lightboxHTML);
+
+        const modal = document.getElementById('glightbox-body');
+        this.modal = modal;
+        let closeButton = modal.querySelector('.gclose');
+        this.prevButton = modal.querySelector('.gprev');
+        this.nextButton = modal.querySelector('.gnext');
+        this.overlay = modal.querySelector('.goverlay');
+        this.loader = modal.querySelector('.gloader');
+        this.slidesContainer = document.getElementById('glightbox-slider');
+        this.bodyHiddenChildElms = bodyChildElms;
+        this.events = {};
+
+        _.addClass(this.modal, 'glightbox-' + this.settings.skin);
+
+        if (this.settings.closeButton && closeButton) {
+            this.events['close'] = _.addEvent('click', {
+                onElement: closeButton,
+                withCallback: (e, target) => {
+                    e.preventDefault();
+                    this.close();
+                }
+            });
+        }
+        if (closeButton && !this.settings.closeButton) {
+            closeButton.parentNode.removeChild(closeButton);
+        }
+
+        if (this.nextButton) {
+            this.events['next'] = _.addEvent('click', {
+                onElement: this.nextButton,
+                withCallback: (e, target) => {
+                    e.preventDefault();
+                    this.nextSlide();
+                }
+            });
+        }
+
+        if (this.prevButton) {
+            this.events['prev'] = _.addEvent('click', {
+                onElement: this.prevButton,
+                withCallback: (e, target) => {
+                    e.preventDefault();
+                    this.prevSlide();
+                }
+            });
+        }
+        if (this.settings.closeOnOutsideClick) {
+            this.events['outClose'] = _.addEvent('click', {
+                onElement: modal,
+                withCallback: (e, target) => {
+                    if (!this.preventOutsideClick && !_.hasClass(document.body, 'glightbox-mobile') && !_.closest(e.target, '.ginner-container')) {
+                        if (!_.closest(e.target, '.gbtn') && !_.hasClass(e.target, 'gnext') && !_.hasClass(e.target, 'gprev')) {
+                            this.close();
+                        }
+                    }
+                }
+            });
+        }
+
+        _.each(this.elements, (slide, i) => {
+            this.slidesContainer.appendChild(slide.instance.create());
+            slide.slideNode = this.slidesContainer.querySelectorAll('.gslide')[i];
+        });
+        if (isTouch) {
+            _.addClass(document.body, 'glightbox-touch');
+        }
+
+        this.events['resize'] = _.addEvent('resize', {
+            onElement: window,
+            withCallback: () => {
+                this.resize();
+            }
+        });
+
+        this.built = true;
+    }
+
+    /**
+     * Handle resize
+     * Create only to handle
+     * when the height of the screen
+     * is lower than the slide content
+     * this helps to resize videos vertically
+     * and images with description
+     */
+    resize(slide = null) {
+        slide = !slide ? this.activeSlide : slide;
+
+        if (!slide || _.hasClass(slide, 'zoomed')) {
+            return;
+        }
+
+        const winSize = _.windowSize();
+        const video = slide.querySelector('.gvideo-wrapper');
+        const image = slide.querySelector('.gslide-image');
+        const description = this.slideDescription;
+
+        let winWidth = winSize.width;
+        let winHeight = winSize.height;
+
+        if (winWidth <= 768) {
+            _.addClass(document.body, 'glightbox-mobile');
+        } else {
+            _.removeClass(document.body, 'glightbox-mobile');
+        }
+
+        if (!video && !image) {
+            return;
+        }
+
+        let descriptionResize = false;
+        if (description && (_.hasClass(description, 'description-bottom') || _.hasClass(description, 'description-top')) && !_.hasClass(description, 'gabsolute')) {
+            descriptionResize = true;
+        }
+
+        if (image) {
+            if (winWidth <= 768) {
+                let imgNode = image.querySelector('img');
+                //imgNode.setAttribute('style', '');
+            } else if (descriptionResize) {
+                let descHeight = description.offsetHeight;
+                let imgNode = image.querySelector('img');
+
+                // if a slide height is set via data-height, we want to use that
+                // if not, we fall back to 100vh
+                const slideTriggerNode = this.elements[this.index]?.node;
+                let maxHeightValue = '100vh';
+                if (slideTriggerNode) {
+                    maxHeightValue = slideTriggerNode.getAttribute('data-height') ?? maxHeightValue;
+                }
+
+                imgNode.setAttribute('style', `max-height: calc(${maxHeightValue} - ${descHeight}px)`);
+                description.setAttribute('style', `max-width: ${imgNode.offsetWidth}px;`);
+            }
+        }
+
+        if (video) {
+            let ratio = _.has(this.settings.plyr.config, 'ratio') ? this.settings.plyr.config.ratio : '';
+
+            if (!ratio) {
+                // If no ratio passed, calculate it using the video width and height
+                // generated by Plyr
+                const containerWidth = video.clientWidth;
+                const containerHeight = video.clientHeight;
+                const divisor = containerWidth / containerHeight;
+                ratio = `${containerWidth / divisor}:${containerHeight / divisor}`;
+            }
+
+            let videoRatio = ratio.split(':');
+            let videoWidth = this.settings.videosWidth;
+            let maxWidth = this.settings.videosWidth;
+
+            if (_.isNumber(videoWidth) || videoWidth.indexOf('px') !== -1) {
+                maxWidth = parseInt(videoWidth);
+            } else {
+                // If video size is vw, vh or % convert it to pixels,
+                // fallback to the current video size
+                if (videoWidth.indexOf('vw') !== -1) {
+                    maxWidth = (winWidth * parseInt(videoWidth)) / 100;
+                } else if (videoWidth.indexOf('vh') !== -1) {
+                    maxWidth = (winHeight * parseInt(videoWidth)) / 100;
+                } else if (videoWidth.indexOf('%') !== -1) {
+                    maxWidth = (winWidth * parseInt(videoWidth)) / 100;
+                } else {
+                    maxWidth = parseInt(video.clientWidth);
+                }
+            }
+
+            let maxHeight = maxWidth / (parseInt(videoRatio[0]) / parseInt(videoRatio[1]));
+            maxHeight = Math.floor(maxHeight);
+
+            if (descriptionResize) {
+                winHeight = winHeight - description.offsetHeight;
+            }
+
+            if (maxWidth > winWidth || maxHeight > winHeight || (winHeight < maxHeight && winWidth > maxWidth)) {
+                let vwidth = video.offsetWidth;
+                let vheight = video.offsetHeight;
+                let ratio = winHeight / vheight;
+                let vsize = { width: vwidth * ratio, height: vheight * ratio };
+                video.parentNode.setAttribute('style', `max-width: ${vsize.width}px`);
+
+                if (descriptionResize) {
+                    description.setAttribute('style', `max-width: ${vsize.width}px;`);
+                }
+            } else {
+                video.parentNode.style.maxWidth = `${videoWidth}`;
+                if (descriptionResize) {
+                    description.setAttribute('style', `max-width: ${videoWidth};`);
+                }
+            }
+        }
+    }
+
+    /**
+     * Reload Lightbox
+     * reload and apply events to nodes
+     */
+    reload() {
+        this.init();
+    }
+
+    /**
+     * Update navigation classes on slide change
+     */
+    updateNavigationClasses() {
+        const loop = this.loop();
+        // Handle navigation arrows
+        _.removeClass(this.nextButton, 'disabled');
+        _.removeClass(this.prevButton, 'disabled');
+
+        if (this.index == 0 && this.elements.length - 1 == 0) {
+            _.addClass(this.prevButton, 'disabled');
+            _.addClass(this.nextButton, 'disabled');
+        } else if (this.index === 0 && !loop) {
+            _.addClass(this.prevButton, 'disabled');
+        } else if (this.index === this.elements.length - 1 && !loop) {
+            _.addClass(this.nextButton, 'disabled');
+        }
+    }
+
+    /**
+     * Handle loop config
+     */
+    loop() {
+        let loop = _.has(this.settings, 'loopAtEnd') ? this.settings.loopAtEnd : null;
+        loop = _.has(this.settings, 'loop') ? this.settings.loop : loop;
+
+        return loop;
+    }
+
+    /**
+     * Close Lightbox
+     * closes the lightbox and removes the slides
+     * and some classes
+     */
+    close() {
+        if (!this.lightboxOpen) {
+            if (this.events) {
+                for (let key in this.events) {
+                    if (this.events.hasOwnProperty(key)) {
+                        this.events[key].destroy();
+                    }
+                }
+                this.events = null;
+            }
+            return false;
+        }
+
+        if (this.closing) {
+            return false;
+        }
+        this.closing = true;
+        this.slidePlayerPause(this.activeSlide);
+
+        if (this.fullElementsList) {
+            this.elements = this.fullElementsList;
+        }
+
+        if (this.bodyHiddenChildElms.length) {
+            _.each(this.bodyHiddenChildElms, (el) => {
+                el.removeAttribute('aria-hidden');
+            });
+        }
+
+        _.addClass(this.modal, 'glightbox-closing');
+        _.animateElement(this.overlay, this.settings.openEffect == 'none' ? 'none' : this.settings.cssEfects.fade.out);
+        _.animateElement(this.activeSlide, this.settings.cssEfects[this.settings.closeEffect].out, () => {
+            this.activeSlide = null;
+            this.prevActiveSlideIndex = null;
+            this.prevActiveSlide = null;
+            this.built = false;
+
+            if (this.events) {
+                for (let key in this.events) {
+                    if (this.events.hasOwnProperty(key)) {
+                        this.events[key].destroy();
+                    }
+                }
+                this.events = null;
+            }
+
+            const body = document.body;
+            _.removeClass(html, 'glightbox-open');
+            _.removeClass(body, 'glightbox-open touching gdesc-open glightbox-touch glightbox-mobile gscrollbar-fixer');
+            this.modal.parentNode.removeChild(this.modal);
+
+            this.trigger('close');
+
+            // settings.onClose is deprecated and will be removed in a future update
+            if (_.isFunction(this.settings.onClose)) {
+                this.settings.onClose();
+            }
+
+            const styles = document.querySelector('.gcss-styles');
+            if (styles) {
+                styles.parentNode.removeChild(styles);
+            }
+            this.lightboxOpen = false;
+            this.closing = null;
+        });
+    }
+
+    /**
+     * Destroy lightbox
+     * and all events
+     */
+    destroy() {
+        this.close();
+        this.clearAllEvents();
+
+        if (this.baseEvents) {
+            this.baseEvents.destroy();
+        }
+    }
+
+    /**
+     * Set event
+     */
+    on(evt, callback, once = false) {
+        if (!evt || !_.isFunction(callback)) {
+            throw new TypeError('Event name and callback must be defined');
+        }
+        this.apiEvents.push({ evt, once, callback });
+    }
+
+    /**
+     * Set event
+     */
+    once(evt, callback) {
+        this.on(evt, callback, true);
+    }
+
+    /**
+     * Triggers an specific event
+     * with data
+     *
+     * @param string eventName
+     */
+    trigger(eventName, data = null) {
+        const onceTriggered = [];
+        _.each(this.apiEvents, (event, i) => {
+            const { evt, once, callback } = event;
+            if (evt == eventName) {
+                callback(data);
+                if (once) {
+                    onceTriggered.push(i);
+                }
+            }
+        });
+        if (onceTriggered.length) {
+            _.each(onceTriggered, (i) => this.apiEvents.splice(i, 1));
+        }
+    }
+
+    /**
+     * Removes all events
+     * set using the API
+     */
+    clearAllEvents() {
+        this.apiEvents.splice(0, this.apiEvents.length);
+    }
+
+    /**
+     * Get Version
+     */
+    version() {
+        return version;
+    }
+}
+
+export default function (options = {}) {
+    const instance = new GlightboxInit(options);
+    instance.init();
+
+    return instance;
+}

web/themes/custom/eql/librairies/glightbox-master/src/js/slides/iframe.js

@@ -0,0 +1,24 @@
+/**
+ * Set slide iframe content
+ *
+ * @param {node} slide
+ * @param {object} data
+ * @param {int} index
+ * @param {function} callback
+ */
+
+import { createIframe } from '../utils/helpers.js';
+
+export default function slideIframe(slide, data, index, callback) {
+    const slideMedia = slide.querySelector('.gslide-media');
+    const iframe = createIframe({
+        url: data.href,
+        callback: callback
+    });
+
+    slideMedia.parentNode.style.maxWidth = data.width;
+    slideMedia.parentNode.style.height = data.height;
+    slideMedia.appendChild(iframe);
+
+    return;
+}

web/themes/custom/eql/librairies/glightbox-master/src/js/slides/image.js

@@ -0,0 +1,56 @@
+/**
+ * Set slide inline content
+ * we'll extend this to make http
+ * requests using the fetch api
+ * but for now we keep it simple
+ *
+ * @param {node} slide
+ * @param {object} data
+ * @param {int} index
+ * @param {function} callback
+ */
+
+import { isNil, isFunction } from '../utils/helpers.js';
+
+export default function slideImage(slide, data, index, callback) {
+    const slideMedia = slide.querySelector('.gslide-media');
+
+    let img = new Image();
+    let titleID = 'gSlideTitle_' + index;
+    let textID = 'gSlideDesc_' + index;
+
+    // prettier-ignore
+    img.addEventListener('load', () => {
+        if (isFunction(callback)) {
+            callback();
+        }
+    }, false);
+
+    img.src = data.href;
+    if (data.sizes != '' && data.srcset != '') {
+        img.sizes = data.sizes;
+        img.srcset = data.srcset;
+    }
+    img.alt = ''; // https://davidwalsh.name/accessibility-tip-empty-alt-attributes
+    if (!isNil(data.alt) && data.alt !== '') {
+        img.alt = data.alt;
+    }
+
+    if (data.title !== '') {
+        img.setAttribute('aria-labelledby', titleID);
+    }
+    if (data.description !== '') {
+        // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute#Example_2_A_Close_Button
+        img.setAttribute('aria-describedby', textID);
+    }
+
+    if (data.hasOwnProperty('_hasCustomWidth') && data._hasCustomWidth) {
+        img.style.width = data.width;
+    }
+    if (data.hasOwnProperty('_hasCustomHeight') && data._hasCustomHeight) {
+        img.style.height = data.height;
+    }
+
+    slideMedia.insertBefore(img, slideMedia.firstChild);
+    return;
+}

web/themes/custom/eql/librairies/glightbox-master/src/js/slides/inline.js

@@ -0,0 +1,71 @@
+/**
+ * Set slide inline content
+ * we'll extend this to make http
+ * requests using the fetch api
+ * but for now we keep it simple
+ *
+ * @param {node} slide
+ * @param {object} data
+ * @param {int} index
+ * @param {function} callback
+ */
+
+import { has, addClass, addEvent, createHTML, isString, isNode, isFunction } from '../utils/helpers.js';
+
+export default function slideInline(slide, data, index, callback) {
+    const slideMedia = slide.querySelector('.gslide-media');
+    const hash = has(data, 'href') && data.href ? data.href.split('#').pop().trim() : false;
+    const content = has(data, 'content') && data.content ? data.content : false;
+    let innerContent;
+
+    if (content) {
+        if (isString(content)) {
+            innerContent = createHTML(`<div class="ginlined-content">${content}</div>`);
+        }
+        if (isNode(content)) {
+            if (content.style.display == 'none') {
+                content.style.display = 'block';
+            }
+
+            const container = document.createElement('div');
+            container.className = 'ginlined-content';
+            container.appendChild(content);
+            innerContent = container;
+        }
+    }
+
+    if (hash) {
+        let div = document.getElementById(hash);
+        if (!div) {
+            return false;
+        }
+        const cloned = div.cloneNode(true);
+
+        cloned.style.height = data.height;
+        cloned.style.maxWidth = data.width;
+        addClass(cloned, 'ginlined-content');
+        innerContent = cloned;
+    }
+
+    if (!innerContent) {
+        console.error('Unable to append inline slide content', data);
+        return false;
+    }
+
+    slideMedia.style.height = data.height;
+    slideMedia.style.width = data.width;
+    slideMedia.appendChild(innerContent);
+
+    this.events['inlineclose' + hash] = addEvent('click', {
+        onElement: slideMedia.querySelectorAll('.gtrigger-close'),
+        withCallback: (e) => {
+            e.preventDefault();
+            this.close();
+        }
+    });
+
+    if (isFunction(callback)) {
+        callback();
+    }
+    return;
+}

web/themes/custom/eql/librairies/glightbox-master/src/js/slides/video.js

@@ -0,0 +1,105 @@
+/**
+ * Set slide video
+ *
+ * @param {node} slide
+ * @param {object} data
+ * @param {int} index
+ * @param {function} callback
+ */
+import { has, closest, injectAssets, addClass, removeClass, createHTML, isFunction, waitUntil } from '../utils/helpers.js';
+
+export default function slideVideo(slide, data, index, callback) {
+    const slideContainer = slide.querySelector('.ginner-container');
+    const videoID = 'gvideo' + index;
+    const slideMedia = slide.querySelector('.gslide-media');
+    const videoPlayers = this.getAllPlayers();
+
+    addClass(slideContainer, 'gvideo-container');
+
+    slideMedia.insertBefore(createHTML('<div class="gvideo-wrapper"></div>'), slideMedia.firstChild);
+
+    const videoWrapper = slide.querySelector('.gvideo-wrapper');
+
+    injectAssets(this.settings.plyr.css, 'Plyr');
+
+    let url = data.href;
+    let provider = data?.videoProvider;
+    let customPlaceholder = false;
+
+    slideMedia.style.maxWidth = data.width;
+
+    injectAssets(this.settings.plyr.js, 'Plyr', () => {
+        // Set vimeo videos
+        if (!provider && url.match(/vimeo\.com\/([0-9]*)/)) {
+            provider = 'vimeo';
+        }
+
+        // Set youtube videos
+        if (
+            !provider &&
+            (url.match(/(youtube\.com|youtube-nocookie\.com)\/watch\?v=([a-zA-Z0-9\-_]+)/) || url.match(/youtu\.be\/([a-zA-Z0-9\-_]+)/) || url.match(/(youtube\.com|youtube-nocookie\.com)\/embed\/([a-zA-Z0-9\-_]+)/) || url.match(/(youtube\.com|youtube-nocookie\.com)\/shorts\/([a-zA-Z0-9\-_]+)/))
+        ) {
+            provider = 'youtube';
+        }
+
+        // Set local videos
+        // if no provider, default to local
+        if (provider === 'local' || !provider) {
+            provider = 'local';
+            let html = '<video id="' + videoID + '" ';
+            html += `style="background:#000; max-width: ${data.width};" `;
+            html += 'preload="metadata" ';
+            html += 'x-webkit-airplay="allow" ';
+            html += 'playsinline ';
+            html += 'controls ';
+            html += 'class="gvideo-local">';
+            html += `<source src="${url}">`;
+            html += '</video>';
+            customPlaceholder = createHTML(html);
+        }
+
+        // prettier-ignore
+        const placeholder = customPlaceholder ? customPlaceholder : createHTML(`<div id="${videoID}" data-plyr-provider="${provider}" data-plyr-embed-id="${url}"></div>`);
+
+        addClass(videoWrapper, `${provider}-video gvideo`);
+        videoWrapper.appendChild(placeholder);
+        videoWrapper.setAttribute('data-id', videoID);
+        videoWrapper.setAttribute('data-index', index);
+
+        const playerConfig = has(this.settings.plyr, 'config') ? this.settings.plyr.config : {};
+        const player = new Plyr('#' + videoID, playerConfig);
+
+        player.on('ready', (event) => {
+            videoPlayers[videoID] = event.detail.plyr;
+            if (isFunction(callback)) {
+                callback();
+            }
+        });
+        waitUntil(
+            () => {
+                return slide.querySelector('iframe') && slide.querySelector('iframe').dataset.ready == 'true';
+            },
+            () => {
+                this.resize(slide);
+            }
+        );
+        player.on('enterfullscreen', handleMediaFullScreen);
+        player.on('exitfullscreen', handleMediaFullScreen);
+    });
+}
+
+/**
+ * Handle fullscreen
+ *
+ * @param {object} event
+ */
+function handleMediaFullScreen(event) {
+    const media = closest(event.target, '.gslide-media');
+
+    if (event.type === 'enterfullscreen') {
+        addClass(media, 'fullscreen');
+    }
+    if (event.type === 'exitfullscreen') {
+        removeClass(media, 'fullscreen');
+    }
+}

web/themes/custom/eql/librairies/glightbox-master/src/js/utils/helpers.js

@@ -0,0 +1,541 @@
+const uid = Date.now();
+
+/**
+ * Merge two or more objects
+ */
+export function extend() {
+    let extended = {};
+    let deep = true;
+    let i = 0;
+    let length = arguments.length;
+    if (Object.prototype.toString.call(arguments[0]) === '[object Boolean]') {
+        deep = arguments[0];
+        i++;
+    }
+    let merge = (obj) => {
+        for (let prop in obj) {
+            if (Object.prototype.hasOwnProperty.call(obj, prop)) {
+                if (deep && Object.prototype.toString.call(obj[prop]) === '[object Object]') {
+                    extended[prop] = extend(true, extended[prop], obj[prop]);
+                } else {
+                    extended[prop] = obj[prop];
+                }
+            }
+        }
+    };
+    for (; i < length; i++) {
+        let obj = arguments[i];
+        merge(obj);
+    }
+    return extended;
+}
+
+/**
+ * Each
+ *
+ * @param {mixed} node list, array, object
+ * @param {function} callback
+ */
+export function each(collection, callback) {
+    if (isNode(collection) || collection === window || collection === document) {
+        collection = [collection];
+    }
+    if (!isArrayLike(collection) && !isObject(collection)) {
+        collection = [collection];
+    }
+    if (size(collection) == 0) {
+        return;
+    }
+
+    if (isArrayLike(collection) && !isObject(collection)) {
+        let l = collection.length,
+            i = 0;
+        for (; i < l; i++) {
+            if (callback.call(collection[i], collection[i], i, collection) === false) {
+                break;
+            }
+        }
+    } else if (isObject(collection)) {
+        for (let key in collection) {
+            if (has(collection, key)) {
+                if (callback.call(collection[key], collection[key], key, collection) === false) {
+                    break;
+                }
+            }
+        }
+    }
+}
+
+/**
+ * Get nde events
+ * return node events and optionally
+ * check if the node has already a specific event
+ * to avoid duplicated callbacks
+ *
+ * @param {node} node
+ * @param {string} name event name
+ * @param {object} fn callback
+ * @returns {object}
+ */
+export function getNodeEvents(node, name = null, fn = null) {
+    const cache = (node[uid] = node[uid] || []);
+    const data = { all: cache, evt: null, found: null };
+    if (name && fn && size(cache) > 0) {
+        each(cache, (cl, i) => {
+            if (cl.eventName == name && cl.fn.toString() == fn.toString()) {
+                data.found = true;
+                data.evt = i;
+                return false;
+            }
+        });
+    }
+    return data;
+}
+
+/**
+ * Add Event
+ * Add an event listener
+ *
+ * @param {string} eventName
+ * @param {object} detials
+ */
+export function addEvent(eventName, { onElement, withCallback, avoidDuplicate = true, once = false, useCapture = false } = {}, thisArg) {
+    let element = onElement || [];
+    if (isString(element)) {
+        element = document.querySelectorAll(element);
+    }
+
+    function handler(event) {
+        if (isFunction(withCallback)) {
+            withCallback.call(thisArg, event, this);
+        }
+        if (once) {
+            handler.destroy();
+        }
+    }
+    handler.destroy = function () {
+        each(element, (el) => {
+            const events = getNodeEvents(el, eventName, handler);
+            if (events.found) {
+                events.all.splice(events.evt, 1);
+            }
+            if (el.removeEventListener) {
+                el.removeEventListener(eventName, handler, useCapture);
+            }
+        });
+    };
+    each(element, (el) => {
+        const events = getNodeEvents(el, eventName, handler);
+        if ((el.addEventListener && avoidDuplicate && !events.found) || !avoidDuplicate) {
+            el.addEventListener(eventName, handler, useCapture);
+            events.all.push({ eventName: eventName, fn: handler });
+        }
+    });
+    return handler;
+}
+
+/**
+ * Add element class
+ *
+ * @param {node} element
+ * @param {string} class name
+ */
+export function addClass(node, name) {
+    each(name.split(' '), (cl) => node.classList.add(cl));
+}
+
+/**
+ * Remove element class
+ *
+ * @param {node} element
+ * @param {string} class name
+ */
+export function removeClass(node, name) {
+    each(name.split(' '), (cl) => node.classList.remove(cl));
+}
+
+/**
+ * Has class
+ *
+ * @param {node} element
+ * @param {string} class name
+ */
+export function hasClass(node, name) {
+    return node.classList.contains(name);
+}
+
+/**
+ * Get the closestElement
+ *
+ * @param {node} element
+ * @param {string} class name
+ */
+export function closest(elem, selector) {
+    while (elem !== document.body) {
+        elem = elem.parentElement;
+        if (!elem) {
+            return false;
+        }
+        const matches = typeof elem.matches == 'function' ? elem.matches(selector) : elem.msMatchesSelector(selector);
+
+        if (matches) {
+            return elem;
+        }
+    }
+}
+
+/**
+ * CSS Animations
+ *
+ * @param {node} element
+ * @param {string} animation name
+ * @param {function} callback
+ */
+export function animateElement(element, animation = '', callback = false) {
+    if (!element || animation === '') {
+        return false;
+    }
+    if (animation === 'none') {
+        if (isFunction(callback)) {
+            callback();
+        }
+        return false;
+    }
+    const animationEnd = whichAnimationEvent();
+    const animationNames = animation.split(' ');
+    each(animationNames, (name) => {
+        addClass(element, 'g' + name);
+    });
+    addEvent(animationEnd, {
+        onElement: element,
+        avoidDuplicate: false,
+        once: true,
+        withCallback: (event, target) => {
+            each(animationNames, (name) => {
+                removeClass(target, 'g' + name);
+            });
+            if (isFunction(callback)) {
+                callback();
+            }
+        }
+    });
+}
+
+export function cssTransform(node, translate = '') {
+    if (translate === '') {
+        node.style.webkitTransform = '';
+        node.style.MozTransform = '';
+        node.style.msTransform = '';
+        node.style.OTransform = '';
+        node.style.transform = '';
+        return false;
+    }
+    node.style.webkitTransform = translate;
+    node.style.MozTransform = translate;
+    node.style.msTransform = translate;
+    node.style.OTransform = translate;
+    node.style.transform = translate;
+}
+
+/**
+ * Show element
+ *
+ * @param {node} element
+ */
+export function show(element) {
+    element.style.display = 'block';
+}
+
+/**
+ * Hide element
+ */
+export function hide(element) {
+    element.style.display = 'none';
+}
+
+/**
+ * Create a document fragment
+ *
+ * @param {string} html code
+ */
+export function createHTML(htmlStr) {
+    let frag = document.createDocumentFragment(),
+        temp = document.createElement('div');
+    temp.innerHTML = htmlStr;
+    while (temp.firstChild) {
+        frag.appendChild(temp.firstChild);
+    }
+    return frag;
+}
+
+/**
+ * Return screen size
+ * return the current screen dimensions
+ *
+ * @returns {object}
+ */
+export function windowSize() {
+    return {
+        width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
+        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
+    };
+}
+
+/**
+ * Determine animation events
+ */
+export function whichAnimationEvent() {
+    let t,
+        el = document.createElement('fakeelement');
+    let animations = {
+        animation: 'animationend',
+        OAnimation: 'oAnimationEnd',
+        MozAnimation: 'animationend',
+        WebkitAnimation: 'webkitAnimationEnd'
+    };
+    for (t in animations) {
+        if (el.style[t] !== undefined) {
+            return animations[t];
+        }
+    }
+}
+
+/**
+ * Determine transition events
+ */
+export function whichTransitionEvent() {
+    let t,
+        el = document.createElement('fakeelement');
+
+    const transitions = {
+        transition: 'transitionend',
+        OTransition: 'oTransitionEnd',
+        MozTransition: 'transitionend',
+        WebkitTransition: 'webkitTransitionEnd'
+    };
+
+    for (t in transitions) {
+        if (el.style[t] !== undefined) {
+            return transitions[t];
+        }
+    }
+}
+
+/**
+ * Create an iframe element
+ *
+ * @param {string} url
+ * @param {numeric} width
+ * @param {numeric} height
+ * @param {function} callback
+ */
+export function createIframe(config) {
+    let { url, allow, callback, appendTo } = config;
+    let iframe = document.createElement('iframe');
+    iframe.className = 'vimeo-video gvideo';
+    iframe.src = url;
+    iframe.style.width = '100%';
+    iframe.style.height = '100%';
+
+    if (allow) {
+        iframe.setAttribute('allow', allow);
+    }
+    iframe.onload = function () {
+        iframe.onload = null;
+        addClass(iframe, 'node-ready');
+        if (isFunction(callback)) {
+            callback();
+        }
+    };
+
+    if (appendTo) {
+        appendTo.appendChild(iframe);
+    }
+    return iframe;
+}
+
+/**
+ * Wait until
+ * wait until all the validations
+ * are passed
+ *
+ * @param {function} check
+ * @param {function} onComplete
+ * @param {numeric} delay
+ * @param {numeric} timeout
+ */
+export function waitUntil(check, onComplete, delay, timeout) {
+    if (check()) {
+        onComplete();
+        return;
+    }
+
+    if (!delay) {
+        delay = 100;
+    }
+    let timeoutPointer;
+    let intervalPointer = setInterval(() => {
+        if (!check()) {
+            return;
+        }
+        clearInterval(intervalPointer);
+        if (timeoutPointer) {
+            clearTimeout(timeoutPointer);
+        }
+        onComplete();
+    }, delay);
+    if (timeout) {
+        timeoutPointer = setTimeout(() => {
+            clearInterval(intervalPointer);
+        }, timeout);
+    }
+}
+
+/**
+ * Inject videos api
+ * used for video player
+ *
+ * @param {string} url
+ * @param {function} callback
+ */
+export function injectAssets(url, waitFor, callback) {
+    if (isNil(url)) {
+        console.error('Inject assets error');
+        return;
+    }
+    if (isFunction(waitFor)) {
+        callback = waitFor;
+        waitFor = false;
+    }
+
+    if (isString(waitFor) && waitFor in window) {
+        if (isFunction(callback)) {
+            callback();
+        }
+        return;
+    }
+
+    let found;
+
+    if (url.indexOf('.css') !== -1) {
+        found = document.querySelectorAll('link[href="' + url + '"]');
+        if (found && found.length > 0) {
+            if (isFunction(callback)) {
+                callback();
+            }
+            return;
+        }
+
+        const head = document.getElementsByTagName('head')[0];
+        const headStyles = head.querySelectorAll('link[rel="stylesheet"]');
+        const link = document.createElement('link');
+
+        link.rel = 'stylesheet';
+        link.type = 'text/css';
+        link.href = url;
+        link.media = 'all';
+
+        if (headStyles) {
+            head.insertBefore(link, headStyles[0]);
+        } else {
+            head.appendChild(link);
+        }
+        if (isFunction(callback)) {
+            callback();
+        }
+        return;
+    }
+
+    found = document.querySelectorAll('script[src="' + url + '"]');
+    if (found && found.length > 0) {
+        if (isFunction(callback)) {
+            if (isString(waitFor)) {
+                waitUntil(
+                    () => {
+                        return typeof window[waitFor] !== 'undefined';
+                    },
+                    () => {
+                        callback();
+                    }
+                );
+                return false;
+            }
+            callback();
+        }
+        return;
+    }
+
+    let script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = url;
+    script.onload = () => {
+        if (isFunction(callback)) {
+            if (isString(waitFor)) {
+                waitUntil(
+                    () => {
+                        return typeof window[waitFor] !== 'undefined';
+                    },
+                    () => {
+                        callback();
+                    }
+                );
+                return false;
+            }
+            callback();
+        }
+    };
+    document.body.appendChild(script);
+}
+
+export function isMobile() {
+    return 'navigator' in window && window.navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(Android)|(PlayBook)|(BB10)|(BlackBerry)|(Opera Mini)|(IEMobile)|(webOS)|(MeeGo)/i);
+}
+
+export function isTouch() {
+    return isMobile() !== null || document.createTouch !== undefined || 'ontouchstart' in window || 'onmsgesturechange' in window || navigator.msMaxTouchPoints;
+}
+
+export function isFunction(f) {
+    return typeof f === 'function';
+}
+export function isString(s) {
+    return typeof s === 'string';
+}
+export function isNode(el) {
+    return !!(el && el.nodeType && el.nodeType == 1);
+}
+export function isArray(ar) {
+    return Array.isArray(ar);
+}
+export function isArrayLike(ar) {
+    return ar && ar.length && isFinite(ar.length);
+}
+export function isObject(o) {
+    let type = typeof o;
+    return type === 'object' && o != null && !isFunction(o) && !isArray(o);
+}
+export function isNil(o) {
+    return o == null;
+}
+export function has(obj, key) {
+    return obj !== null && hasOwnProperty.call(obj, key);
+}
+export function size(o) {
+    if (isObject(o)) {
+        if (o.keys) {
+            return o.keys().length;
+        }
+        let l = 0;
+        for (let k in o) {
+            if (has(o, k)) {
+                l++;
+            }
+        }
+        return l;
+    } else {
+        return o.length;
+    }
+}
+export function isNumber(n) {
+    return !isNaN(parseFloat(n)) && isFinite(n);
+}

web/themes/custom/eql/librairies/glightbox-master/src/postcss/glightbox.css

@@ -0,0 +1,723 @@
+@custom-media --small-viewport (width >=576px);
+@custom-media --medium-small-viewport (width > 768px);
+@custom-media --medium-viewport (width >=992px);
+@custom-media --large-viewport (width >=1200px);
+
+.glightbox-container {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999999 !important;
+    overflow: hidden;
+    touch-action: none;
+    text-size-adjust: 100%;
+    backface-visibility: hidden;
+    outline: none;
+
+    &.inactive {
+        display: none;
+    }
+
+    & .gcontainer {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        z-index: 9999;
+        overflow: hidden;
+    }
+
+    .gslider {
+        transition: transform 0.4s ease;
+        height: 100%;
+        left: 0;
+        top: 0;
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        display: flex !important;
+        justify-content: center;
+        align-items: center;
+        transform: translate3d(0, 0, 0);
+    }
+
+    .gslide {
+        width: 100%;
+        position: absolute;
+        user-select: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+
+        &.current {
+            opacity: 1;
+            z-index: 99999;
+            position: relative;
+        }
+
+        &.prev {
+            opacity: 1;
+            z-index: 9999;
+        }
+    }
+
+    .gslide-inner-content {
+        width: 100%;
+    }
+
+    .ginner-container {
+        position: relative;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        max-width: 100%;
+        margin: auto;
+        height: 100vh;
+
+        &.gvideo-container {
+            width: 100%;
+        }
+
+        @media (--medium-small-viewport) {
+            width: auto;
+            height: auto;
+            flex-direction: row;
+        }
+
+        &.desc-bottom,
+        &.desc-top {
+            flex-direction: column;
+        }
+
+        &.desc-left,
+        &.desc-right {
+            max-width: 100% !important;
+        }
+
+        &.desc-top {
+            @media (--medium-small-viewport) {
+                .gslide-description {
+                    order: 0;
+                }
+                .gslide-image,
+                .gslide-image img {
+                    order: 1;
+                }
+            }
+        }
+
+        &.desc-left {
+            @media (--medium-small-viewport) {
+                .gslide-description {
+                    order: 0;
+                }
+                .gslide-image {
+                    order: 1;
+                }
+            }
+        }
+    }
+}
+
+.gslide {
+    iframe,
+    video {
+        outline: none !important;
+        border: none;
+        min-height: 165px;
+        -webkit-overflow-scrolling: touch;
+        touch-action: auto;
+    }
+}
+
+.gslide:not(.current) {
+    pointer-events: none;
+}
+
+.gslide-image {
+    align-items: center;
+
+    img {
+        max-height: 100vh;
+        display: block;
+        padding: 0;
+        float: none;
+        outline: none;
+        border: none;
+        user-select: none;
+        max-width: 100vw;
+        width: auto;
+        height: auto;
+        object-fit: cover;
+        touch-action: none;
+        margin: auto;
+        min-width: 200px;
+
+        @media (--medium-small-viewport) {
+            max-height: 97vh;
+            max-width: 100%;
+        }
+
+        .desc-top &,
+        .desc-bottom & {
+            width: auto;
+        }
+
+        .desc-left &,
+        .desc-right & {
+            width: auto;
+            max-width: 100%;
+        }
+
+        &.zoomable {
+            position: relative;
+
+            @media (--medium-small-viewport) {
+                cursor: zoom-in;
+
+                .zoomed & {
+                    cursor: grab;
+                }
+            }
+        }
+
+        &.dragging {
+            cursor: grabbing !important;
+            transition: none;
+        }
+    }
+}
+
+.gslide-video {
+    position: relative;
+    max-width: 100vh;
+    width: 100% !important;
+
+    .plyr__poster-enabled.plyr--loading {
+        .plyr__poster {
+            display: none;
+        }
+    }
+
+    .gvideo-wrapper {
+        width: 100%;
+        /* max-width: 160vmin; */
+        margin: auto;
+    }
+
+    &::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: rgba(255, 0, 0, 0.34);
+        display: none;
+    }
+    &.playing::before {
+        display: none;
+    }
+
+    &.fullscreen {
+        max-width: 100% !important;
+        min-width: 100%;
+        height: 75vh;
+
+        video {
+            max-width: 100% !important;
+            width: 100% !important;
+        }
+    }
+}
+
+.gslide-inline {
+    background: #fff;
+    text-align: left;
+    max-height: calc(100vh - 40px);
+    overflow: auto;
+    max-width: 100%;
+    margin: auto;
+
+    @media (--medium-small-viewport) {
+        max-height: 95vh;
+    }
+
+    .ginlined-content {
+        padding: 20px;
+        width: 100%;
+    }
+
+    .dragging {
+        cursor: grabbing !important;
+        transition: none;
+    }
+}
+
+.ginlined-content {
+    overflow: auto;
+    display: block !important;
+    opacity: 1;
+}
+
+.gslide-external {
+    display: flex;
+    width: 100%;
+    min-width: 100%;
+    background: #fff;
+    padding: 0;
+    overflow: auto;
+    max-height: 75vh;
+    height: 100%;
+
+    @media (--medium-small-viewport) {
+        max-height: 100vh;
+    }
+}
+
+.gslide-media {
+    display: flex;
+    width: auto;
+
+    .zoomed & {
+        box-shadow: none !important;
+    }
+
+    .desc-top &,
+    .desc-bottom & {
+        margin: 0 auto;
+        flex-direction: column;
+    }
+}
+
+.gslide-description {
+    position: relative;
+    flex: 1 0 100%;
+
+    &.description-left,
+    &.description-right {
+        max-width: 100%;
+
+        @media (--medium-small-viewport) {
+            max-width: 275px;
+        }
+    }
+
+    &.description-bottom,
+    &.description-top {
+        margin: 0 auto;
+        width: 100%;
+    }
+
+    p {
+        margin-bottom: 12px;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .zoomed & {
+        display: none;
+    }
+}
+
+.glightbox-button-hidden {
+    display: none;
+}
+
+/*
+ * Description for mobiles
+ * something like facebook does the description
+ * for the photos
+*/
+.glightbox-mobile .glightbox-container {
+    .gslide-description {
+        height: auto !important;
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+        padding: 19px 11px;
+        max-width: 100vw !important;
+        order: 2 !important;
+        max-height: 78vh;
+        overflow: auto !important;
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
+        transition: opacity 0.3s linear;
+        padding-bottom: 50px;
+    }
+
+    .gslide-title {
+        color: #fff;
+        font-size: 1em;
+    }
+    .gslide-desc {
+        color: #a1a1a1;
+
+        a {
+            color: #fff;
+            font-weight: bold;
+        }
+
+        * {
+            color: inherit;
+        }
+        .desc-more {
+            color: #fff;
+            opacity: 0.4;
+        }
+    }
+}
+
+.gdesc-open {
+    .gslide-media {
+        transition: opacity 0.5s ease;
+        opacity: 0.4;
+    }
+    .gdesc-inner {
+        padding-bottom: 30px;
+    }
+}
+.gdesc-closed {
+    .gslide-media {
+        transition: opacity 0.5s ease;
+        opacity: 1;
+    }
+}
+
+.greset {
+    transition: all 0.3s ease;
+}
+
+.gabsolute {
+    position: absolute;
+}
+
+.grelative {
+    position: relative;
+}
+
+.glightbox-desc {
+    display: none !important;
+}
+
+.glightbox-open {
+    overflow: hidden;
+
+    @media (--medium-small-viewport) {
+        height: auto;
+    }
+}
+
+.gloader {
+    height: 25px;
+    width: 25px;
+    animation: lightboxLoader 0.8s infinite linear;
+    border: 2px solid #fff;
+    border-right-color: transparent;
+    border-radius: 50%;
+    position: absolute;
+    display: block;
+    z-index: 9999;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    top: 47%;
+}
+
+.goverlay {
+    width: 100%;
+    height: calc(100vh + 1px);
+    position: fixed;
+    top: -1px;
+    left: 0;
+    background: #000;
+    will-change: opacity;
+
+    .glightbox-mobile & {
+        background: #000;
+    }
+
+    @media (--medium-small-viewport) {
+        background: rgba(0, 0, 0, 0.92);
+    }
+
+    @media screen and (max-height: 420px) {
+        background: #000;
+    }
+}
+
+.gprev,
+.gnext,
+.gclose {
+    z-index: 99999;
+    cursor: pointer;
+    width: 26px;
+    height: 44px;
+    border: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+    svg {
+        display: block;
+        width: 25px;
+        height: auto;
+        margin: 0;
+        padding: 0;
+    }
+
+    &.disabled {
+        opacity: 0.1;
+    }
+
+    .garrow {
+        stroke: #fff;
+    }
+}
+
+.gbtn.focused {
+    outline: 2px solid #0f3d81;
+}
+
+iframe.wait-autoplay {
+    opacity: 0;
+}
+
+.glightbox-closing {
+    .gnext,
+    .gprev,
+    .gclose {
+        opacity: 0 !important;
+    }
+}
+
+/*Skin */
+.glightbox-clean {
+    .gslide-media {
+        @media (--medium-small-viewport) {
+            box-shadow: 1px 2px 9px 0px rgba(0, 0, 0, 0.65);
+        }
+    }
+
+    .gslide-description {
+        background: #fff;
+    }
+
+    .gdesc-inner {
+        padding: 22px 20px;
+    }
+
+    @media (--medium-small-viewport) {
+        .description-left,
+        .description-right {
+            .gdesc-inner {
+                position: absolute;
+                height: 100%;
+                overflow-y: auto;
+            }
+        }
+    }
+
+    .gslide-title {
+        font-size: 1em;
+        font-weight: normal;
+        color: #000;
+        margin-bottom: 19px;
+        line-height: 1.4em;
+    }
+
+    .gslide-desc {
+        font-size: 0.86em;
+        margin-bottom: 0;
+        line-height: 1.4em;
+    }
+
+    .gslide-video {
+        background: #000;
+    }
+
+    .gprev,
+    .gnext,
+    .gclose {
+        background-color: rgba(0, 0, 0, 0.75);
+        border-radius: 4px;
+
+        @media (--medium-small-viewport) {
+            background-color: rgba(0, 0, 0, 0.32);
+
+            &:hover {
+                background-color: rgba(0, 0, 0, 0.7);
+            }
+        }
+
+        path {
+            fill: #fff;
+        }
+    }
+
+    .gprev {
+        position: absolute;
+        top: -100%;
+        left: 30px;
+        width: 40px;
+        height: 50px;
+
+        @media (--medium-small-viewport) {
+            top: 45%;
+        }
+    }
+
+    .gnext {
+        position: absolute;
+        top: -100%;
+        right: 30px;
+        width: 40px;
+        height: 50px;
+
+        @media (--medium-small-viewport) {
+            top: 45%;
+        }
+    }
+
+    .gclose {
+        width: 35px;
+        height: 35px;
+        top: 15px;
+        right: 10px;
+        position: absolute;
+
+        svg {
+            width: 18px;
+            height: auto;
+        }
+
+        @media (--medium-viewport) {
+            opacity: 0.7;
+            right: 20px;
+        }
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+}
+
+/*CSS Animations*/
+.gfadeIn {
+    animation: gfadeIn 0.5s ease;
+}
+.gfadeOut {
+    animation: gfadeOut 0.5s ease;
+}
+.gslideOutLeft {
+    animation: gslideOutLeft 0.3s ease;
+}
+.gslideInLeft {
+    animation: gslideInLeft 0.3s ease;
+}
+.gslideOutRight {
+    animation: gslideOutRight 0.3s ease;
+}
+.gslideInRight {
+    animation: gslideInRight 0.3s ease;
+}
+.gzoomIn {
+    animation: gzoomIn 0.5s ease;
+}
+.gzoomOut {
+    animation: gzoomOut 0.5s ease;
+}
+
+@keyframes lightboxLoader {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+@keyframes gfadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+@keyframes gfadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+@keyframes gslideInLeft {
+    from {
+        opacity: 0;
+        transform: translate3d(-60%, 0, 0);
+    }
+    to {
+        visibility: visible;
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}
+@keyframes gslideOutLeft {
+    from {
+        opacity: 1;
+        visibility: visible;
+        transform: translate3d(0, 0, 0);
+    }
+    to {
+        transform: translate3d(-60%, 0, 0);
+        opacity: 0;
+        visibility: hidden;
+    }
+}
+@keyframes gslideInRight {
+    from {
+        opacity: 0;
+        visibility: visible;
+        transform: translate3d(60%, 0, 0);
+    }
+    to {
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}
+@keyframes gslideOutRight {
+    from {
+        opacity: 1;
+        visibility: visible;
+        transform: translate3d(0, 0, 0);
+    }
+    to {
+        transform: translate3d(60%, 0, 0);
+        opacity: 0;
+    }
+}
+@keyframes gzoomIn {
+    from {
+        opacity: 0;
+        transform: scale3d(0.3, 0.3, 0.3);
+    }
+    to {
+        opacity: 1;
+    }
+}
+@keyframes gzoomOut {
+    from {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+        transform: scale3d(0.3, 0.3, 0.3);
+    }
+    to {
+        opacity: 0;
+    }
+}

web/themes/custom/eql/scripts/main.js

@@ -257,3 +257,7 @@ function initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContaine
   });
 
 }
+
+
+
+

web/themes/custom/eql/scss/pages/_ressource-type-en-images copy.scss

@@ -0,0 +1,157 @@
+.carousel{display: none;}
+.page-node-type-ressource{
+
+        .type-les-projets-en-images.layout__region--top{
+            .block-region-top{
+            display: flex !important;
+            flex-direction: column;
+            margin-left: 11%;
+            @media screen and (min-width:1100px) {
+                display: flex;
+            }
+            .block {
+                margin-left: 0;
+            }
+            .block-entity-fieldnodefield-images{
+              margin-top: 5rem;
+                padding: 0;
+                order: 7;
+
+                .carousel {
+                    display: block;
+                    max-width: 60vw;
+                    margin: auto;
+                    text-align: center;
+                
+                    .main-image-container {
+                      position: relative;
+                    //   background: #e0f5ff;
+                      height: 500px;
+                      max-height: 500px;
+                      overflow: hidden;
+                      width: 100%;
+                      object-fit: contain;
+                
+                      img {
+                        width: 100%;
+                        height: 100%;
+                        object-fit: contain;
+                        transition: transform 0.3s ease-in-out;
+                        border: none ;
+                        // transition: opacity 0.4s ease-in-out; // à réactiver si fade souhaité
+                        &.animate {
+                          transform: scale(1.02); // léger effet smooth sur changement
+                        }
+                      }
+                
+                      .arrow {
+                        position: absolute;
+                        top: 50%;
+                        transform: translateY(-50%);
+                        background: #00aaff;
+                        border-radius: 50%;
+                        padding: 5px 10px;
+                        color: white;
+                        cursor: pointer;
+                        content
+                
+                        &.left {
+                          left: 10px;
+                        }
+                
+                        &.right {
+                          right: 10px;
+                        }
+                      }
+                        // #prevArrow{
+                        //     &::before{
+                        //     content:url("../images/pictos/fleche-droite-dans-rond.png");
+                        //     display: block;
+                        //     transform: scaleX(-1);
+                        //     width: 50px;
+                        // }
+                        // }
+                        // #nextArrow{
+                        //     &::before{
+                        //         content:url("../images/pictos/fleche-droite-dans-rond.png");
+                        //         display: block;
+                        //     }
+                        // }
+                    }
+                
+                    .caption {
+                      margin-top: 10px;
+                      font-family: sans-serif;
+                    }
+                
+                    .thumbnails-wrapper {
+                      position: relative;
+                      max-width: 100%;
+                      overflow: hidden;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                
+                      .thumb-arrow {
+                        cursor: pointer;
+                        padding: 5px 10px;
+                        background: #00aaff;
+                        color: white;
+                        border-radius: 50%;
+                        user-select: none;
+                        z-index: 2;
+                        // font-weight: bold;
+                
+                        &.left {
+                          margin-right: 10px;
+                        }
+                
+                        &.right {
+                          margin-left: 10px;
+                        }
+                      }
+                
+                      .thumbnails {
+                        display: flex;
+                        gap: 10px;
+                        overflow-x: auto;
+                        scroll-behavior: smooth;
+                        max-width: 100%;
+                        padding: 10px 0;
+                        scrollbar-width: none; // Firefox
+                
+                        &::-webkit-scrollbar {
+                          display: none; // Chrome, Safari
+                        }
+                
+                        img {
+                          width: 60px;
+                          height: 60px;
+                          object-fit: cover;
+                          border: 2px solid transparent;
+                          cursor: pointer;
+                
+                          &.active {
+                            border-color: #00aaff;
+                          }
+                        }
+                      }
+                    }
+                  }
+                
+                  // Masquer les images Drupal originales (facultatif)
+                  .field__items {
+                    display: none;
+                  }
+            }
+            
+            }
+
+            
+        }
+
+        .block-region-third{
+          transform: translateY(-46rem);
+          margin-bottom: -46rem;
+        }
+}    

web/themes/custom/eql/scss/pages/_ressource-type-en-images.scss

@@ -13,6 +13,7 @@
                 margin-left: 0;
             }
             .block-entity-fieldnodefield-images{
+              margin-top: 5rem;
                 padding: 0;
                 order: 7;
 
@@ -144,8 +145,13 @@
                   }
             }
             
+            }
+
+            
         }
 
-    // }
-    }
+        .block-region-third{
+          transform: translateY(-46rem);
+          margin-bottom: -46rem;
+        }
 }    

web/themes/custom/eql/templates/block--entity-field--node--field-images.html.twig

@@ -61,18 +61,7 @@
       </div>
     {% endif %}
 
-   {# <div class="carousel">
-      <div class="main-image-container">
-        <div class="arrow left" id="prevArrow">←</div>
-        <img id="mainImage" src="" alt="Image principale">
-        <div class="arrow right" id="nextArrow">→</div>
-      </div>
-      <div class="caption" id="caption"></div>
-      <div class="thumbnails-wrapper">
-        <div class="thumb-arrow left" id="thumbPrev">←</div>
-        <div class="thumbnails" id="thumbnails"></div>
-        <div class="thumb-arrow right" id="thumbNext">→</div>
-      </div>    </div> #}
+
     {{ content }}
   {% endblock %}
 </div>

web/themes/custom/eql/templates/field--node--field-images--ressource.html.twig

@@ -79,6 +79,7 @@
       {% if multiple %}
         </div>
       {% endif %}
+      
     </div>
   {% endif %}