lightbox: switch to CSS-only solution #451

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.

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 %}}

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

layouts/_default/_markup/render-image.html

@@ -3,4 +3,5 @@
   "url" .Destination
   "title" .Title
   "alt" .Text
+  "ordinal" 0
 ) }}

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" }}

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,7 +26,7 @@
 	{{- 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 }}
@@ -33,10 +34,14 @@
 		{{ $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 }}

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">

static/css/featherlight.min.css

@@ -1,8 +0,0 @@
-/**
- * Featherlight - ultra slim jQuery lightbox
- * Version 1.7.13 - http://noelboss.github.io/featherlight/
- *
- * Copyright 2018, Noël Raoul Bossart (http://www.noelboss.com)
- * MIT Licensed.
-**/
-html.with-featherlight{overflow:hidden}.featherlight{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483647;text-align:center;white-space:nowrap;cursor:pointer;background:#333;background:rgba(0,0,0,0)}.featherlight:last-of-type{background:rgba(0,0,0,.8)}.featherlight:before{content:'';display:inline-block;height:100%;vertical-align:middle}.featherlight .featherlight-content{position:relative;text-align:left;vertical-align:middle;display:inline-block;overflow:auto;padding:25px 25px 0;border-bottom:25px solid transparent;margin-left:5%;margin-right:5%;max-height:95%;background:#fff;cursor:auto;white-space:normal}.featherlight .featherlight-inner{display:block}.featherlight link.featherlight-inner,.featherlight script.featherlight-inner,.featherlight style.featherlight-inner{display:none}.featherlight .featherlight-close-icon{position:absolute;z-index:9999;top:0;right:0;line-height:25px;width:25px;cursor:pointer;text-align:center;font-family:Arial,sans-serif;background:#fff;background:rgba(255,255,255,.3);color:#000;border:0;padding:0}.featherlight .featherlight-close-icon::-moz-focus-inner{border:0;padding:0}.featherlight .featherlight-image{width:100%}.featherlight-iframe .featherlight-content{border-bottom:0;padding:0;-webkit-overflow-scrolling:touch}.featherlight iframe{border:0}.featherlight *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}@media only screen and (max-width:1024px){.featherlight .featherlight-content{margin-left:0;margin-right:0;max-height:98%;padding:10px 10px 0;border-bottom:10px solid transparent}}@media print{html.with-featherlight>*>:not(.featherlight){display:none}}

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); */
 	}
 

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);
+}

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);
 }
 

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' });