j1-template 2024.3.16 → 2024.3.17

data/assets/theme/j1/modules/amplitudejs/js/visualizations/bar.js

@@ -21,7 +21,7 @@
  * Simple visualization that shows the waveforms as a bar graph
 */
 
-function BarVisualization(){
+function BarVisualization() {
 	/*
 		Define the ID, name, and initialize the container. These are a part
 		of the visualization template and are necessary.

data/assets/theme/j1/modules/amplitudejs/js/visualizations/circular-equalizer.js

@@ -17,4 +17,34 @@
  # -----------------------------------------------------------------------------
 */
 
-function CircularEqualizer(){this.id="circular_equalizer",this.name="Circular Equalizer",this.container="",this.preferences={barWidth:2,barHeight:2,barSpacing:5,barColor:"#ffffff",shadowColor:"#ffffff",shadowBlur:10},this.analyser="",this.frequencyData=[],this.canvas=null,this.canvasCtx=null,this.gradient=null,this.getID=function(){return this.id},this.getName=function(){return this.name},this.setPreferences=function(t){for(var e in this.preferences)null!=t[e]&&(this.preferences[e]=t[e])},this.startVisualization=function(t){this.analyser=Amplitude.getAnalyser(),this.container=t,window.cont=this.container,this.canvas=document.createElement("canvas"),this.canvas.width=this.container.offsetWidth,this.canvas.height=this.container.offsetHeight,this.container.appendChild(this.canvas),this.canvasCtx=this.canvas.getContext("2d"),this.frequencyData=new Uint8Array(this.analyser.frequencyBinCount),this.gradient=this.canvasCtx.createLinearGradient(0,0,0,400),this.gradient.addColorStop(0,this.preferences.barColor),this.gradient.addColorStop(1,"orange"),this.canvasCtx.fillStyle=this.gradient,this.canvasCtx.shadowBlur=this.preferences.shadowBlur,this.canvasCtx.shadowColor=this.preferences.shadowColor,requestAnimationFrame(this.renderFrame.bind(this))},this.stopVisualization=function(){this.container.innerHTML="",window.cancelAnimationFrame(this.renderFrame.bind(this))},this.renderFrame=function(){requestAnimationFrame(this.renderFrame.bind(this)),this.analyser.getByteFrequencyData(this.frequencyData),this.canvasCtx.clearRect(0,0,this.canvas.width,this.canvas.height);for(var t=this.canvas.width/2,e=this.canvas.height/2,a=t-27,i=Math.floor(2*a*Math.PI/(this.preferences.barWidth+this.preferences.barSpacing)),s=i-Math.floor(25*i/100),n=Math.floor(this.frequencyData.length/i),r=0;r<s;r++){var h=this.frequencyData[r*n],c=2*r*Math.PI/i+Math.PI,o=(135-this.preferences.barWidth)*Math.PI/180,f=a-(h/12-this.preferences.barHeight),l=this.preferences.barWidth,d=h/6+this.preferences.barHeight;this.canvasCtx.save(),this.canvasCtx.translate(t,e),this.canvasCtx.rotate(c-o),this.canvasCtx.fillRect(0,f,l,d),this.canvasCtx.restore()}}}
+function CircularEqualizer() {
+    this.id = "circular_equalizer", this.name = "Circular Equalizer", this.container = "", this.preferences = {
+      barWidth: 2,
+      barHeight: 2,
+      barSpacing: 5,
+      barColor: "#ffffff",
+      shadowColor: "#ffffff",
+      shadowBlur: 10
+    }, this.analyser = "", this.frequencyData = [], this.canvas = null, this.canvasCtx = null, this.gradient = null, this.getID = function () {
+      return this.id
+    }, this.getName = function () {
+      return this.name
+    }, this.setPreferences = function (t) {
+      for (var e in this.preferences) null != t[e] && (this.preferences[e] = t[e])
+    }, this.startVisualization = function (t) {
+      this.analyser = Amplitude.getAnalyser(), this.container = t, window.cont = this.container, this.canvas = document.createElement("canvas"), this.canvas.width = this.container.offsetWidth, this.canvas.height = this.container.offsetHeight, this.container.appendChild(this.canvas), this.canvasCtx = this.canvas.getContext("2d"), this.frequencyData = new Uint8Array(this.analyser.frequencyBinCount), this.gradient = this.canvasCtx.createLinearGradient(0, 0, 0, 400), this.gradient.addColorStop(0, this.preferences.barColor), this.gradient.addColorStop(1, "orange"), this.canvasCtx.fillStyle = this.gradient, this.canvasCtx.shadowBlur = this.preferences.shadowBlur, this.canvasCtx.shadowColor = this.preferences.shadowColor, requestAnimationFrame(this.renderFrame.bind(this))
+    }, this.stopVisualization = function () {
+      this.container.innerHTML = "", window.cancelAnimationFrame(this.renderFrame.bind(this))
+    }, this.renderFrame = function () {
+      requestAnimationFrame(this.renderFrame.bind(this)), this.analyser.getByteFrequencyData(this.frequencyData), this.canvasCtx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      for (var t = this.canvas.width / 2, e = this.canvas.height / 2, a = t - 27, i = Math.floor(2 * a * Math.PI / (this.preferences.barWidth + this.preferences.barSpacing)), s = i - Math.floor(25 * i / 100), n = Math.floor(this.frequencyData.length / i), r = 0; r < s; r++) {
+        var h = this.frequencyData[r * n],
+          c = 2 * r * Math.PI / i + Math.PI,
+          o = (135 - this.preferences.barWidth) * Math.PI / 180,
+          f = a - (h / 12 - this.preferences.barHeight),
+          l = this.preferences.barWidth,
+          d = h / 6 + this.preferences.barHeight;
+        this.canvasCtx.save(), this.canvasCtx.translate(t, e), this.canvasCtx.rotate(c - o), this.canvasCtx.fillRect(0, f, l, d), this.canvasCtx.restore()
+      }
+    }
+  }

data/assets/theme/j1/modules/amplitudejs/js/visualizations/frequency-analyzer.js

@@ -17,7 +17,7 @@
  # -----------------------------------------------------------------------------
 */
 
-function FrequencyAnalyzerVisualization(){
+function FrequencyAnalyzerVisualization() {
 	/*
 		Define the ID of your visualization. This is used to apply
 		visualizations to songs, playlists, and default. It is a JSON

data/assets/theme/j1/modules/amplitudejs/js/visualizations/michael-bromley.js

@@ -22,7 +22,7 @@
 	https://github.com/michaelbromley/soundcloud-visualizer
 */
 
-function MichaelBromleyVisualization(){
+function MichaelBromleyVisualization() {
 	/*
 		Sets the ID and Name of the visualization.
 	*/

data/assets/theme/j1/modules/amplitudejs/js/visualizations/template.js

@@ -29,7 +29,7 @@
 	name for your visualization.
 */
 
-function VisualizationObjectName(){
+function VisualizationObjectName() {
 	/*
 		Define the ID of your visualization. This is used to apply
 		visualizations to songs, playlists, and default. It is a JSON

data/assets/theme/j1/modules/photoswipe/.version_5.4.4

@@ -0,0 +1,6 @@
+/*
+* PhotoSwipe 5.4.4 - https://photoswipe.com
+* (c) 2024 Dmytro Semenov
+*/
+
+PhotoSwipe v5 — JavaScript image gallery and lightbox

data/assets/theme/j1/modules/photoswipe/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014-2022 Dmitry Semenov, https://dimsemenov.com
+
+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.

data/assets/theme/j1/modules/photoswipe/README.md

@@ -0,0 +1,32 @@
+[![Stand With Ukraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner-direct.svg)](https://savelife.in.ua/en/)
+
+
+PhotoSwipe v5 — JavaScript image gallery and lightbox
+
+**[Demo](https://photoswipe.com)** | **[Documentation](https://photoswipe.com/getting-started/)**
+
+[![Sponsor via OpenCollective](https://img.shields.io/opencollective/all/photoswipe?label=Sponsor%20via%20OpenCollective)](https://opencollective.com/photoswipe)
+[![Follow on Twitter](https://img.shields.io/twitter/follow/photoswipe?style=social)](https://twitter.com/intent/user?screen_name=photoswipe)
+
+
+### Repo structure
+
+- `dist/` - main JS and CSS
+- `src/` - source JS and CSS.
+  - `src/js/photoswipe.js` - entry for PhotoSwipe Core.
+  - `src/js/lightbox/lightbox.js` - entry for PhotoSwipe Lightbox.
+- `docs/` - documentation markdown files.
+- `demo-docs-website/` - website with documentation, demos and manual tests.
+- `build/` - rollup build config.
+
+To build JS and CSS in `dist/` directory, run `npm run build`.
+
+To run the demo website and automatically rebuild files during development, run `npm install` in `demo-docs-website/` and `npm run watch` in the root directory.
+
+### Older versions
+
+Documentation for the old version (v4) can be found [here](https://photoswipe.com/v4-docs/getting-started.html) and [the code for 4.1.3 is here](https://github.com/dimsemenov/PhotoSwipe/tree/v4.1.3).
+
+---
+
+This project is tested with [BrowserStack](https://www.browserstack.com/).

data/assets/theme/j1/modules/photoswipe/css/org/photoswipe-dynamic-caption-plugin.umd.min.js

@@ -0,0 +1,5 @@
+/*!
+  * PhotoSwipe Dynamic Caption plugin 1.2.7 - https://photoswipe.com
+  * (c) 2022 Dmytro Semenov
+  */
+!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).PhotoSwipeDynamicCaption=i()}(this,(function(){"use strict";const t={captionContent:".pswp-caption-content",type:"auto",horizontalEdgeThreshold:20,mobileCaptionOverlapRatio:.3,mobileLayoutBreakpoint:600,verticallyCenterImage:!1};return class{constructor(i,e){this.options={...t,...e},this.lightbox=i,this.lightbox.on("init",(()=>{this.pswp=this.lightbox.pswp,this.initCaption()}))}initCaption(){const{pswp:t}=this;t.on("change",(()=>{this.showCaption(this.pswp.currSlide)})),t.on("calcSlideSize",(t=>this.onCalcSlideSize(t))),t.on("slideDestroy",(t=>{t.slide.dynamicCaption&&(t.slide.dynamicCaption.element&&t.slide.dynamicCaption.element.remove(),delete t.slide.dynamicCaption)})),t.on("zoomPanUpdate",(({slide:i})=>{if(t.opener.isOpen&&i.dynamicCaption){if(i.currZoomLevel>i.zoomLevels.initial?this.hideCaption(i):this.showCaption(i),i.dynamicCaption.element){let t=0;if(i.currZoomLevel<=i.zoomLevels.initial){const e=i.pan.y-i.bounds.center.y;Math.abs(e)>1&&(t=e)}this.setCaptionYOffset(i.dynamicCaption.element,t)}this.adjustPanArea(i,i.currZoomLevel)}})),t.on("beforeZoomTo",(i=>{this.adjustPanArea(t.currSlide,i.destZoomLevel)})),t.on("tapAction",(t=>{t.originalEvent.target.closest(".pswp__dynamic-caption")&&t.preventDefault()}))}adjustPanArea(t,i){t.dynamicCaption&&t.dynamicCaption.adjustedPanAreaSize&&(i>t.zoomLevels.initial?(t.panAreaSize.x=t.dynamicCaption.originalPanAreaSize.x,t.panAreaSize.y=t.dynamicCaption.originalPanAreaSize.y):(t.panAreaSize.x=t.dynamicCaption.adjustedPanAreaSize.x,t.panAreaSize.y=t.dynamicCaption.adjustedPanAreaSize.y))}useMobileLayout(){const{mobileLayoutBreakpoint:t}=this.options;return"function"==typeof t?t.call(this):"number"==typeof t&&window.innerWidth<t}hideCaption(t){if(t.dynamicCaption&&!t.dynamicCaption.hidden){const i=t.dynamicCaption.element;if(!i)return;t.dynamicCaption.hidden=!0,i.classList.add("pswp__dynamic-caption--faded"),t.captionFadeTimeout&&clearTimeout(t.captionFadeTimeout),t.captionFadeTimeout=setTimeout((()=>{i.style.visibility="hidden",delete t.captionFadeTimeout}),400)}}setCaptionYOffset(t,i){t.style.transform=`translateY(${i}px)`}showCaption(t){if(t.dynamicCaption&&t.dynamicCaption.hidden){const i=t.dynamicCaption.element;if(!i)return;t.dynamicCaption.hidden=!1,i.style.visibility="visible",clearTimeout(t.captionFadeTimeout),t.captionFadeTimeout=setTimeout((()=>{i.classList.remove("pswp__dynamic-caption--faded"),delete t.captionFadeTimeout}),50)}}setCaptionPosition(t,i,e){const s=i<=this.options.horizontalEdgeThreshold;t.classList[s?"add":"remove"]("pswp__dynamic-caption--on-hor-edge"),t.style.left=i+"px",t.style.top=e+"px"}setCaptionWidth(t,i){i?t.style.width=i+"px":t.style.removeProperty("width")}setCaptionType(t,i){const e=t.dataset.pswpCaptionType;i!==e&&(t.classList.add("pswp__dynamic-caption--"+i),t.classList.remove("pswp__dynamic-caption--"+e),t.dataset.pswpCaptionType=i)}updateCaptionPosition(t){if(!t.dynamicCaption||!t.dynamicCaption.type||!t.dynamicCaption.element)return;if("mobile"===t.dynamicCaption.type)return this.setCaptionType(t.dynamicCaption.element,t.dynamicCaption.type),t.dynamicCaption.element.style.removeProperty("left"),t.dynamicCaption.element.style.removeProperty("top"),void this.setCaptionWidth(t.dynamicCaption.element,!1);const i=t.zoomLevels.initial,e=Math.ceil(t.width*i),s=Math.ceil(t.height*i);this.setCaptionType(t.dynamicCaption.element,t.dynamicCaption.type),"aside"===t.dynamicCaption.type?(this.setCaptionPosition(t.dynamicCaption.element,t.bounds.center.x+e,t.bounds.center.y),this.setCaptionWidth(t.dynamicCaption.element,!1)):"below"===t.dynamicCaption.type&&(this.setCaptionPosition(t.dynamicCaption.element,t.bounds.center.x,t.bounds.center.y+s),this.setCaptionWidth(t.dynamicCaption.element,e))}onCalcSlideSize(t){const{slide:i}=t;let e,s;if(!i.dynamicCaption){i.dynamicCaption={element:void 0,type:!1,hidden:!1};const t=this.getCaptionHTML(i);if(!t)return;i.dynamicCaption.element=document.createElement("div"),i.dynamicCaption.element.className="pswp__dynamic-caption pswp__hide-on-close",i.dynamicCaption.element.innerHTML=t,this.pswp.dispatch("dynamicCaptionUpdateHTML",{captionElement:i.dynamicCaption.element,slide:i}),i.holderElement.appendChild(i.dynamicCaption.element)}if(!i.dynamicCaption.element)return;this.storeOriginalPanAreaSize(i),i.bounds.update(i.zoomLevels.initial),this.useMobileLayout()?(i.dynamicCaption.type="mobile",s=!0):"auto"===this.options.type?i.bounds.center.x>i.bounds.center.y?i.dynamicCaption.type="aside":i.dynamicCaption.type="below":i.dynamicCaption.type=this.options.type;const o=Math.ceil(i.width*i.zoomLevels.initial),n=Math.ceil(i.height*i.zoomLevels.initial);if(this.setCaptionType(i.dynamicCaption.element,i.dynamicCaption.type),"aside"===i.dynamicCaption.type){this.setCaptionWidth(i.dynamicCaption.element,!1),e=this.measureCaptionSize(i.dynamicCaption.element,t.slide);const s=e.x,n=o+i.bounds.center.x;i.panAreaSize.x-n<=s&&(i.panAreaSize.x-=s,this.recalculateZoomLevelAndBounds(i))}else if("below"===i.dynamicCaption.type||s){this.setCaptionWidth(i.dynamicCaption.element,s?this.pswp.viewportSize.x:o),e=this.measureCaptionSize(i.dynamicCaption.element,t.slide);const a=e.y;if(this.options.verticallyCenterImage)i.panAreaSize.y-=a,this.recalculateZoomLevelAndBounds(i);else{const t=n+i.bounds.center.y,e=i.panAreaSize.y-t,o=i.panAreaSize.y;if(e<=a){i.panAreaSize.y-=Math.min(2*(a-e),a),this.recalculateZoomLevelAndBounds(i);const t=i.panAreaSize.x*this.options.mobileCaptionOverlapRatio/2;s&&i.bounds.center.x>t&&(i.panAreaSize.y=o,this.recalculateZoomLevelAndBounds(i))}}}this.storeAdjustedPanAreaSize(i),this.updateCaptionPosition(i)}measureCaptionSize(t,i){const e=t.getBoundingClientRect();return this.pswp.dispatch("dynamicCaptionMeasureSize",{captionEl:t,slide:i,captionSize:{x:e.width,y:e.height}}).captionSize}recalculateZoomLevelAndBounds(t){t.zoomLevels.update(t.width,t.height,t.panAreaSize),t.bounds.update(t.zoomLevels.initial)}storeAdjustedPanAreaSize(t){t.dynamicCaption&&(t.dynamicCaption.adjustedPanAreaSize||(t.dynamicCaption.adjustedPanAreaSize={}),t.dynamicCaption.adjustedPanAreaSize.x=t.panAreaSize.x,t.dynamicCaption.adjustedPanAreaSize.y=t.panAreaSize.y)}storeOriginalPanAreaSize(t){t.dynamicCaption&&(t.dynamicCaption.originalPanAreaSize||(t.dynamicCaption.originalPanAreaSize={}),t.dynamicCaption.originalPanAreaSize.x=t.panAreaSize.x,t.dynamicCaption.originalPanAreaSize.y=t.panAreaSize.y)}getCaptionHTML(t){if("function"==typeof this.options.captionContent)return this.options.captionContent.call(this,t);const i=t.data.element;let e="";if(i){const t=i.querySelector(this.options.captionContent);if(t)e=t.innerHTML;else{const t=i.querySelector("img");t&&(e=t.getAttribute("alt"))}}return e}}}));

data/assets/theme/j1/modules/photoswipe/css/org/photoswipe.css

@@ -0,0 +1,420 @@
+/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */
+
+.pswp {
+  --pswp-bg: #000;
+  --pswp-placeholder-bg: #222;
+  
+
+  --pswp-root-z-index: 100000;
+  
+  --pswp-preloader-color: rgba(79, 79, 79, 0.4);
+  --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
+  
+  /* defined via js:
+  --pswp-transition-duration: 333ms; */
+  
+  --pswp-icon-color: #fff;
+  --pswp-icon-color-secondary: #4f4f4f;
+  --pswp-icon-stroke-color: #4f4f4f;
+  --pswp-icon-stroke-width: 2px;
+
+  --pswp-error-text-color: var(--pswp-icon-color);
+}
+
+
+/*
+	Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
+*/
+
+.pswp {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: var(--pswp-root-z-index);
+	display: none;
+	touch-action: none;
+	outline: 0;
+	opacity: 0.003;
+	contain: layout style size;
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+/* Prevents focus outline on the root element,
+  (it may be focused initially) */
+.pswp:focus {
+  outline: 0;
+}
+
+.pswp * {
+  box-sizing: border-box;
+}
+
+.pswp img {
+  max-width: none;
+}
+
+.pswp--open {
+	display: block;
+}
+
+.pswp,
+.pswp__bg {
+	transform: translateZ(0);
+	will-change: opacity;
+}
+
+.pswp__bg {
+  opacity: 0.005;
+	background: var(--pswp-bg);
+}
+
+.pswp,
+.pswp__scroll-wrap {
+	overflow: hidden;
+}
+
+.pswp__scroll-wrap,
+.pswp__bg,
+.pswp__container,
+.pswp__item,
+.pswp__content,
+.pswp__img,
+.pswp__zoom-wrap {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.pswp__img,
+.pswp__zoom-wrap {
+	width: auto;
+	height: auto;
+}
+
+.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
+	cursor: -webkit-zoom-in;
+	cursor: -moz-zoom-in;
+	cursor: zoom-in;
+}
+
+.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
+	cursor: move;
+	cursor: -webkit-grab;
+	cursor: -moz-grab;
+	cursor: grab;
+}
+
+.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  cursor: grabbing;
+}
+
+/* :active to override grabbing cursor */
+.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
+.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
+.pswp__img {
+	cursor: -webkit-zoom-out;
+	cursor: -moz-zoom-out;
+	cursor: zoom-out;
+}
+
+
+/* Prevent selection and tap highlights */
+.pswp__container,
+.pswp__img,
+.pswp__button,
+.pswp__counter {
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.pswp__item {
+	/* z-index for fade transition */
+	z-index: 1;
+	overflow: hidden;
+}
+
+.pswp__hidden {
+	display: none !important;
+}
+
+/* Allow to click through pswp__content element, but not its children */
+.pswp__content {
+  pointer-events: none;
+}
+.pswp__content > * {
+  pointer-events: auto;
+}
+
+
+/*
+
+  PhotoSwipe UI
+
+*/
+
+/*
+	Error message appears when image is not loaded
+	(JS option errorMsg controls markup)
+*/
+.pswp__error-msg-container {
+  display: grid;
+}
+.pswp__error-msg {
+	margin: auto;
+	font-size: 1em;
+	line-height: 1;
+	color: var(--pswp-error-text-color);
+}
+
+/*
+class pswp__hide-on-close is applied to elements that
+should hide (for example fade out) when PhotoSwipe is closed
+and show (for example fade in) when PhotoSwipe is opened
+ */
+.pswp .pswp__hide-on-close {
+	opacity: 0.005;
+	will-change: opacity;
+	transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);
+	z-index: 10; /* always overlap slide content */
+	pointer-events: none; /* hidden elements should not be clickable */
+}
+
+/* class pswp--ui-visible is added when opening or closing transition starts */
+.pswp--ui-visible .pswp__hide-on-close {
+	opacity: 1;
+	pointer-events: auto;
+}
+
+/* <button> styles, including css reset */
+.pswp__button {
+	position: relative;
+	display: block;
+	width: 50px;
+	height: 60px;
+	padding: 0;
+	margin: 0;
+	overflow: hidden;
+	cursor: pointer;
+	background: none;
+	border: 0;
+	box-shadow: none;
+	opacity: 0.85;
+	-webkit-appearance: none;
+	-webkit-touch-callout: none;
+}
+
+.pswp__button:hover,
+.pswp__button:active,
+.pswp__button:focus {
+  transition: none;
+  padding: 0;
+  background: none;
+  border: 0;
+  box-shadow: none;
+  opacity: 1;
+}
+
+.pswp__button:disabled {
+  opacity: 0.3;
+  cursor: auto;
+}
+
+.pswp__icn {
+  fill: var(--pswp-icon-color);
+  color: var(--pswp-icon-color-secondary);
+}
+
+.pswp__icn {
+  position: absolute;
+  top: 14px;
+  left: 9px;
+  width: 32px;
+  height: 32px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.pswp__icn-shadow {
+  stroke: var(--pswp-icon-stroke-color);
+  stroke-width: var(--pswp-icon-stroke-width);
+  fill: none;
+}
+
+.pswp__icn:focus {
+	outline: 0;
+}
+
+/*
+	div element that matches size of large image,
+	large image loads on top of it,
+	used when msrc is not provided
+*/
+div.pswp__img--placeholder,
+.pswp__img--with-bg {
+	background: var(--pswp-placeholder-bg);
+}
+
+.pswp__top-bar {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 60px;
+	display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+	z-index: 10;
+
+	/* allow events to pass through top bar itself */
+	pointer-events: none !important;
+}
+.pswp__top-bar > * {
+  pointer-events: auto;
+  /* this makes transition significantly more smooth,
+     even though inner elements are not animated */
+  will-change: opacity;
+}
+
+
+/*
+
+  Close button
+
+*/
+.pswp__button--close {
+  margin-right: 6px;
+}
+
+
+/*
+
+  Arrow buttons
+
+*/
+.pswp__button--arrow {
+  position: absolute;
+  top: 0;
+  width: 75px;
+  height: 100px;
+  top: 50%;
+  margin-top: -50px;
+}
+
+.pswp__button--arrow:disabled {
+  display: none;
+  cursor: default;
+}
+
+.pswp__button--arrow .pswp__icn {
+  top: 50%;
+  margin-top: -30px;
+  width: 60px;
+  height: 60px;
+  background: none;
+  border-radius: 0;
+}
+
+.pswp--one-slide .pswp__button--arrow {
+  display: none;
+}
+
+/* hide arrows on touch screens */
+.pswp--touch .pswp__button--arrow {
+  visibility: hidden;
+}
+
+/* show arrows only after mouse was used */
+.pswp--has_mouse .pswp__button--arrow {
+  visibility: visible;
+}
+
+.pswp__button--arrow--prev {
+  right: auto;
+  left: 0px;
+}
+
+.pswp__button--arrow--next {
+  right: 0px;
+}
+.pswp__button--arrow--next .pswp__icn {
+  left: auto;
+  right: 14px;
+  /* flip horizontally */
+  transform: scale(-1, 1);
+}
+
+/*
+
+  Zoom button
+
+*/
+.pswp__button--zoom {
+  display: none;
+}
+
+.pswp--zoom-allowed .pswp__button--zoom {
+  display: block;
+}
+
+/* "+" => "-" */
+.pswp--zoomed-in .pswp__zoom-icn-bar-v {
+  display: none;
+}
+
+
+/*
+
+  Loading indicator
+
+*/
+.pswp__preloader {
+  position: relative;
+  overflow: hidden;
+  width: 50px;
+  height: 60px;
+  margin-right: auto;
+}
+
+.pswp__preloader .pswp__icn {
+  opacity: 0;
+  transition: opacity 0.2s linear;
+  animation: pswp-clockwise 600ms linear infinite;
+}
+
+.pswp__preloader--active .pswp__icn {
+  opacity: 0.85;
+}
+
+@keyframes pswp-clockwise {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+
+/*
+
+  "1 of 10" counter
+
+*/
+.pswp__counter {
+  height: 30px;
+  margin-top: 15px;
+  margin-inline-start: 20px;
+  font-size: 14px;
+  line-height: 30px;
+  color: var(--pswp-icon-color);
+  text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
+  opacity: 0.85;
+}
+
+.pswp--one-slide .pswp__counter {
+  display: none;
+}

data/assets/theme/j1/modules/photoswipe/css/photoswipe-caption-plugin.css

@@ -0,0 +1,67 @@
+/*
+ # -----------------------------------------------------------------------------
+ # ~/assets/theme/j1/modules/photoswipe/css/photoswipe-caption-plugin.css
+ # Caption plugin for PhotoSwipe v5
+ # -----------------------------------------------------------------------------
+ #
+ # Product/Info:
+ # https://github.com/dimsemenov/photoswipe-dynamic-caption-plugin
+ # Copyright (C) 2021 Dmitry Semenov
+ #
+ # Caption plugin for PhotoSwipe is licensed under the MIT License.
+ # See: https://github.com/dimsemenov/photoswipe-dynamic-caption-plugin/blob/main/LICENSE
+ # -----------------------------------------------------------------------------
+*/
+
+.pswp__dynamic-caption {
+  color: #fff;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 0;
+  transition: opacity 120ms linear !important; /* override default */
+}
+
+.pswp-caption-content {
+  display: none;
+}
+
+.pswp__dynamic-caption a {
+  color: #fff;
+}
+
+.pswp__dynamic-caption--faded {
+  opacity: 0 !important;
+}
+
+.pswp__dynamic-caption--aside {
+  width: auto;
+  max-width: 300px;
+  padding: 20px 15px 20px 20px;
+  margin-top: 70px;
+}
+
+.pswp__dynamic-caption--below {
+  width: auto;
+  max-width: 700px;
+  padding: 15px 0 0;
+}
+
+.pswp__dynamic-caption--on-hor-edge {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.pswp__dynamic-caption--mobile {
+  width: 100%;
+  background: rgba(0,0,0,0.5);
+  padding: 10px 15px;
+
+  right: 0;
+  bottom: 0;
+
+  /* override styles that were set via JS.
+    as they interfere with size measurement */
+  top: auto !important; 
+  left: 0 !important;
+}

data/assets/theme/j1/modules/photoswipe/css/photoswipe-caption-plugin.min.css

@@ -0,0 +1,16 @@
+/*
+ # -----------------------------------------------------------------------------
+ # ~/assets/theme/j1/modules/photoswipe/css/photoswipe-caption-plugin.css
+ # Caption plugin for PhotoSwipe v5
+ # -----------------------------------------------------------------------------
+ #
+ # Product/Info:
+ # https://github.com/dimsemenov/photoswipe-dynamic-caption-plugin
+ # Copyright (C) 2021 Dmitry Semenov
+ #
+ # Caption plugin for PhotoSwipe is licensed under the MIT License.
+ # See: https://github.com/dimsemenov/photoswipe-dynamic-caption-plugin/blob/main/LICENSE
+ # -----------------------------------------------------------------------------
+*/
+
+.pswp__dynamic-caption{color:#fff;position:absolute;width:100%;left:0;top:0;transition:opacity .12s linear!important}.pswp-caption-content{display:none}.pswp__dynamic-caption a{color:#fff}.pswp__dynamic-caption--faded{opacity:0!important}.pswp__dynamic-caption--aside{width:auto;max-width:300px;padding:20px 15px 20px 20px;margin-top:70px}.pswp__dynamic-caption--below{width:auto;max-width:700px;padding:15px 0 0}.pswp__dynamic-caption--on-hor-edge{padding-left:15px;padding-right:15px}.pswp__dynamic-caption--mobile{width:100%;background:rgba(0,0,0,.5);padding:10px 15px;right:0;bottom:0;top:auto!important;left:0!important}