lightbox: switch to CSS-only solution #451

McShelby · Jan 29, 2023 · f2bfdce · f2bfdce
1 parent a07e90b
commit f2bfdce
Show file tree

Hide file tree

Showing 13 changed files with 54 additions and 40 deletions.
diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md
@@ -18,6 +18,16 @@ This document shows you what's new in the latest release. For a detailed list of
 
 ---
 
+## 5.11.0 (not yet released)
+
+- {{% badge style="note" title=" " %}}Change{{% /badge %}} The JavaScript code for handling image lightboxes (was [Featherlight](https://noelboss.github.io/featherlight)) was replaced by a CSS-only solution.
+
+  This also changed the [lightbox effects]({{% relref "cont/markdown#lightbox" %}}) parameter from `featherlight=false` to `lightbox=false`. Nevertheless you don't need to change anything as the old name will be used as a fallback.
+
+  As a further advantage, the image inside the lightbox now has its own URL and is therefore linkable.
+
+---
+
 ## 5.10.0 (2023-01-25)
 
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The [`attachments`]({{% relref "shortcodes/attachments" %}}), [`badge`]({{% relref "shortcodes/badge" %}}), [`button`]({{% relref "shortcodes/button" %}}) and [`notice`]({{% relref "shortcodes/notice" %}}) shortcodes have a new parameter `color` to set arbitrary CSS color values.

diff --git a/exampleSite/content/cont/markdown.en.md b/exampleSite/content/cont/markdown.en.md
@@ -666,12 +666,12 @@ Add a query parameter `classes` to the link image to add CSS classes. Add some o
 
 #### Lightbox
 
-Add the query parameter `featherlight=false` to the image link to disable the lightbox.
+Add the query parameter `lightbox=false` to the image link to disable the lightbox.
 
 ````markdown
-![Homercat](https://octodex.github.com/images/homercat.png?featherlight=false)
+![Homercat](https://octodex.github.com/images/homercat.png?lightbox=false)
 ````
 
 {{% notice style="secondary" icon="eye" title="Result" %}}
-![Homercat](https://octodex.github.com/images/homercat.png?width=20vw&featherlight=false&classes=bg-white)
+![Homercat](https://octodex.github.com/images/homercat.png?width=20vw&lightbox=false&classes=bg-white)
 {{% /notice %}}
diff --git a/exampleSite/content/more/credits/_index.en.md b/exampleSite/content/more/credits/_index.en.md
@@ -15,7 +15,6 @@ Many thanks to [Andy Miller](https://github.com/rhukster) for initially creating
 
 - [autoComplete](https://github.com/Pixabay/JavaScript-autoComplete) - A lightweight and powerful vanilla JavaScript completion suggester
 - [clipboard.js](https://clipboardjs.com) - A modern approach to copy text to clipboard
-- [Featherlight](https://noelboss.github.io/featherlight) - A lightweight jQuery lightbox plugin
 - [Font Awesome](https://fontawesome.com) - The internet's icon library and toolkit
 - [jQuery](https://jquery.com) - The "Write less, do more" JavaScript library
 - [jquery-svg-zoom-pan](https://github.com/DanielHoffmann/jquery-svg-pan-zoom) - A jQuery plugin to enable pan and zoom in SVG images

diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
@@ -3,4 +3,5 @@
   "url" .Destination
   "title" .Title
   "alt" .Text
+  "ordinal" 0
 ) }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -6,7 +6,6 @@
 {{- partial "output-partial.hugo" (dict "base" "menu" "page" . "parameter" . "outputFormat" $outputFormat) }}
     <script src="{{"js/clipboard.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
     <script src="{{"js/perfect-scrollbar.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
-    <script src="{{"js/featherlight.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
 {{- $wantsMathJax := or (.Page.Store.Get "hasMathJax") (and (.Page.Store.Get (printf "%sIsNested" $outputFormat)) (.Page.Store.Get "nestedHasMathJax")) }}
 {{- if $wantsMathJax }}
   {{- if isset .Params "mathjaxinitialize" }}

diff --git a/layouts/partials/shortcodes/image.html b/layouts/partials/shortcodes/image.html
@@ -2,8 +2,9 @@
 {{- $url := .url }}
 {{- $title := .title }}
 {{- $alt := .alt }}
+{{- $ordinal := .ordinal }}
 {{- $classes := slice }}
-{{- $featherlight := true }}
+{{- $lightbox := true }}
 {{- $height := "auto" }}
 {{- $width := "auto" }}
 {{- $dest_url := urls.Parse $url }}
@@ -25,18 +26,22 @@
 	{{- if $dest_url.Query.Get "classes" }}
 		{{- $classes = $classes | append (split ($dest_url.Query.Get "classes") ",") }}
 	{{- end }}
-	{{- $featherlight = (ne ($dest_url.Query.Get "featherlight") "false") }}
+	{{- $lightbox = and (ne ($dest_url.Query.Get "lightbox") "false") (ne ($dest_url.Query.Get "featherlight") "false") }}
 	{{- with $dest_url.Query.Get "height" }}
 		{{ $height = . }}
 	{{- end }}
 	{{- with $dest_url.Query.Get "width" }}
 		{{ $width = . }}
 	{{- end }}
 {{- end }}
-{{- if $featherlight }}
-<a href="{{ $url | safeURL }}" data-featherlight="image">
+{{- $fragment := printf "%d-%s" $ordinal ((trim (replace (replace (replace (replace (replace $url "=" "-") "&" "-") "?" "-") "." "-") "/" "-") "-") | safeURL | anchorize) }}
+{{- if $lightbox }}
+<a href="#{{ $fragment }}">
 {{- end }}
 <img src="{{ $url | safeURL }}" alt="{{ $alt }}"{{ with $title }} title="{{ . }}"{{ end }}{{ if len ($classes) }} class="{{ delimit $classes " " }}"{{ end }} style="height: {{ $height }}; width: {{ $width }};" loading="lazy">
-{{- if $featherlight }}
+{{- if $lightbox }}
+</a>
+<a href="javascript:history.back();" class="lightbox" id="{{ $fragment }}">
+<img src="{{ $url | safeURL }}" alt="{{ $alt }}"{{ with $title }} title="{{ . }}"{{ end }}loading="lazy">
 </a>
 {{- end }}
diff --git a/layouts/partials/stylesheet.html b/layouts/partials/stylesheet.html
@@ -8,7 +8,6 @@
     {{- $assetBusting := not .Site.Params.disableAssetsBusting }}
     {{ "<!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->" | safeHTML }}
     <link href="{{"css/fontawesome-all.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="{{"css/fontawesome-all.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"></noscript>
-    <link href="{{"css/featherlight.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="{{"css/featherlight.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"></noscript>
     <link href="{{"css/auto-complete.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="{{"css/auto-complete.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"></noscript>
     <link href="{{"css/perfect-scrollbar.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
     <link href="{{"css/nucleus.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">

diff --git a/static/css/featherlight.min.css b/static/css/featherlight.min.css
diff --git a/static/css/ie.css b/static/css/ie.css
@@ -329,7 +329,7 @@
 		background-color: #ffffff; /* var(--INTERNAL-MAIN-BG-color) */
 	}
 
-	div.featherlight .featherlight-content{
+	.lightbox img{
 		background-color: #ffffff /* var(--INTERNAL-MAIN-BG-color); */
 	}
 

diff --git a/static/css/theme.css b/static/css/theme.css
@@ -77,7 +77,6 @@ dd {
     max-width: 300px;
     position: fixed;
     width: 300px;
-    z-index: 80;
 }
 
 #header-wrapper {
@@ -807,14 +806,6 @@ td {
     position: relative;
 }
 
-.lightbox-active #body {
-    overflow: visible;
-}
-
-.featherlight img {
-    margin: 0 !important;
-}
-
 #topbar {
     min-height: 3rem;
     position: relative;
@@ -1717,3 +1708,30 @@ article ul li input[type="checkbox"]::before {
 article ul li input[type="checkbox"]:checked::before {
     transform: scale(1);
 }
+
+/* CSS Lightbox https://codepen.io/gschier/pen/kyRXVx */
+.lightbox {
+    align-items: center;
+    background: rgba(0, 0, 0, 0.8);
+    bottom: 0;
+    display: none;
+    justify-content: center;
+    left: 0;
+    position: fixed;
+    right: 0;
+    text-align: center;
+    top: 0;
+    white-space: nowrap;
+    z-index: 1999;
+}
+
+.lightbox:target {
+    display: flex;
+}
+
+.lightbox img {
+    max-height: 95%;
+    max-width: 95%;
+    overflow: auto;
+    padding: min(2vh, 2vw);
+}
diff --git a/static/css/variant.css b/static/css/variant.css
@@ -332,7 +332,7 @@ table {
     background-color: var(--INTERNAL-MAIN-BG-color);
 }
 
-div.featherlight .featherlight-content{
+.lightbox img{
     background-color: var(--INTERNAL-MAIN-BG-color);
 }
 

diff --git a/static/js/featherlight.min.js b/static/js/featherlight.min.js
diff --git a/static/js/theme.js b/static/js/theme.js
@@ -757,7 +757,7 @@ function scrollToFragment() {
 function mark(){
     // mark some additonal stuff as searchable
     $('#topbar a:not(:has(img)):not(.btn)').addClass('highlight');
-    $('#body-inner a:not(:has(img)):not(.btn):not(a[rel="footnote"])').addClass('highlight');
+    $('#body-inner a:not(:has(img)):not(.btn):not(.lightbox):not(a[rel="footnote"])').addClass('highlight');
 
     var value = sessionStorage.getItem(baseUriFull+'search-value');
     $(".highlightable").highlight(value, { element: 'mark' });