From eefa03f3f1040a691343b2aa356cb963398717c0 Mon Sep 17 00:00:00 2001 From: Jan-Lukas Else Date: Thu, 13 Feb 2020 17:20:09 +0100 Subject: [PATCH] Remove photoswipe, add pure css lightbox --- assets/css/photoswipe.css | 179 -------- assets/css/pswp-skin/default-skin.css | 482 --------------------- assets/css/style.scss | 90 ++-- assets/js/load-photoswipe.js | 33 -- assets/js/photoswipe-ui-default.min.js | 4 - assets/js/photoswipe.min.js | 4 - layouts/_default/_markup/render-image.html | 7 +- layouts/_default/photosummary.html | 3 +- layouts/shortcodes/load-photoswipe.html | 58 --- layouts/shortcodes/pswp-figure.html | 13 - layouts/shortcodes/pswp-gallery.html | 3 - 11 files changed, 36 insertions(+), 840 deletions(-) delete mode 100644 assets/css/photoswipe.css delete mode 100644 assets/css/pswp-skin/default-skin.css delete mode 100644 assets/js/load-photoswipe.js delete mode 100644 assets/js/photoswipe-ui-default.min.js delete mode 100644 assets/js/photoswipe.min.js delete mode 100644 layouts/shortcodes/load-photoswipe.html delete mode 100644 layouts/shortcodes/pswp-figure.html delete mode 100644 layouts/shortcodes/pswp-gallery.html diff --git a/assets/css/photoswipe.css b/assets/css/photoswipe.css deleted file mode 100644 index 0ca0f80..0000000 --- a/assets/css/photoswipe.css +++ /dev/null @@ -1,179 +0,0 @@ -/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */ -/* - Styles for basic PhotoSwipe functionality (sliding area, open/close transitions) -*/ -/* pswp = photoswipe */ -.pswp { - display: none; - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - overflow: hidden; - -ms-touch-action: none; - touch-action: none; - z-index: 1500; - -webkit-text-size-adjust: 100%; - /* create separate layer, to avoid paint on window.onscroll in webkit/blink */ - -webkit-backface-visibility: hidden; - outline: none; } - .pswp * { - -webkit-box-sizing: border-box; - box-sizing: border-box; } - .pswp img { - max-width: none; } - -/* style is added when JS option showHideOpacity is set to true */ -.pswp--animate_opacity { - /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */ - opacity: 0.001; - will-change: opacity; - /* for open/close transition */ - -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); - transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } - -.pswp--open { - display: block; } - -.pswp--zoom-allowed .pswp__img { - /* autoprefixer: off */ - cursor: -webkit-zoom-in; - cursor: -moz-zoom-in; - cursor: zoom-in; } - -.pswp--zoomed-in .pswp__img { - /* autoprefixer: off */ - cursor: -webkit-grab; - cursor: -moz-grab; - cursor: grab; } - -.pswp--dragging .pswp__img { - /* autoprefixer: off */ - cursor: -webkit-grabbing; - cursor: -moz-grabbing; - cursor: grabbing; } - -/* - Background is added as a separate element. - As animating opacity is much faster than animating rgba() background-color. -*/ -.pswp__bg { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - background: #000; - opacity: 0; - -webkit-transform: translateZ(0); - transform: translateZ(0); - -webkit-backface-visibility: hidden; - will-change: opacity; } - -.pswp__scroll-wrap { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - overflow: hidden; } - -.pswp__container, -.pswp__zoom-wrap { - -ms-touch-action: none; - touch-action: none; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; } - -/* Prevent selection and tap highlights */ -.pswp__container, -.pswp__img { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-tap-highlight-color: transparent; - -webkit-touch-callout: none; } - -.pswp__zoom-wrap { - position: absolute; - width: 100%; - -webkit-transform-origin: left top; - -ms-transform-origin: left top; - transform-origin: left top; - /* for open/close transition */ - -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); - transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); } - -.pswp__bg { - will-change: opacity; - /* for open/close transition */ - -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); - transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } - -.pswp--animated-in .pswp__bg, -.pswp--animated-in .pswp__zoom-wrap { - -webkit-transition: none; - transition: none; } - -.pswp__container, -.pswp__zoom-wrap { - -webkit-backface-visibility: hidden; } - -.pswp__item { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - overflow: hidden; } - -.pswp__img { - position: absolute; - width: auto; - height: auto; - top: 0; - left: 0; } - -/* - stretched thumbnail or div placeholder element (see below) - style is added to avoid flickering in webkit/blink when layers overlap -*/ -.pswp__img--placeholder { - -webkit-backface-visibility: hidden; } - -/* - div element that matches size of large image - large image loads on top of it -*/ -.pswp__img--placeholder--blank { - background: #222; } - -.pswp--ie .pswp__img { - width: 100% !important; - height: auto !important; - left: 0; - top: 0; } - -/* - Error message appears when image is not loaded - (JS option errorMsg controls markup) -*/ -.pswp__error-msg { - position: absolute; - left: 0; - top: 50%; - width: 100%; - text-align: center; - font-size: 14px; - line-height: 16px; - margin-top: -8px; - color: #CCC; } - -.pswp__error-msg a { - color: #CCC; - text-decoration: underline; } diff --git a/assets/css/pswp-skin/default-skin.css b/assets/css/pswp-skin/default-skin.css deleted file mode 100644 index c961632..0000000 --- a/assets/css/pswp-skin/default-skin.css +++ /dev/null @@ -1,482 +0,0 @@ -/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */ -/* - - Contents: - - 1. Buttons - 2. Share modal and links - 3. Index indicator ("1 of X" counter) - 4. Caption - 5. Loading indicator - 6. Additional styles (root element, top bar, idle state, hidden state, etc.) - -*/ -/* - - 1. Buttons - - */ -/* - - - - - -
-
-
-
-
-
-
- -
- -
- - -
-
-
- - - -{{ end }} diff --git a/layouts/shortcodes/pswp-figure.html b/layouts/shortcodes/pswp-figure.html deleted file mode 100644 index 02c55a9..0000000 --- a/layouts/shortcodes/pswp-figure.html +++ /dev/null @@ -1,13 +0,0 @@ -{{ $src := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }} -{{ $thumb := $src.Fill "500x500" }} -
-
-
- -
- - {{ with .Get "caption" }} -

{{ . | markdownify }}

- {{ end }} -
-
\ No newline at end of file diff --git a/layouts/shortcodes/pswp-gallery.html b/layouts/shortcodes/pswp-gallery.html deleted file mode 100644 index 6d46aac..0000000 --- a/layouts/shortcodes/pswp-gallery.html +++ /dev/null @@ -1,3 +0,0 @@ -
- {{ .Inner }} -
\ No newline at end of file