diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md
index 6a9db29848..c0fdd7554e 100644
--- 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
index 3692ef82fa..630fc547dc 100644
--- 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
index e652704c70..6e10c462b9 100644
--- 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
index 500fc908ed..f7d656fa5a 100644
--- 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
) }}
\ No newline at end of file
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index cc25494770..5246e0b87e 100644
--- 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) }}
-
{{- $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
index 49d8421769..1807b8b00b 100644
--- 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,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 }}
-
+{{- $fragment := printf "%d-%s" $ordinal ((trim (replace (replace (replace (replace (replace $url "=" "-") "&" "-") "?" "-") "." "-") "/" "-") "-") | safeURL | anchorize) }}
+{{- if $lightbox }}
+
{{- end }}
-{{- if $featherlight }}
+{{- if $lightbox }}
+
+
+
{{- end }}
\ No newline at end of file
diff --git a/layouts/partials/stylesheet.html b/layouts/partials/stylesheet.html
index b6d28a1ee5..38d92287fc 100644
--- a/layouts/partials/stylesheet.html
+++ b/layouts/partials/stylesheet.html
@@ -8,7 +8,6 @@
{{- $assetBusting := not .Site.Params.disableAssetsBusting }}
{{ "" | safeHTML }}
-
diff --git a/static/css/featherlight.min.css b/static/css/featherlight.min.css
deleted file mode 100644
index 058487f916..0000000000
--- a/static/css/featherlight.min.css
+++ /dev/null
@@ -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}}
\ No newline at end of file
diff --git a/static/css/ie.css b/static/css/ie.css
index 83d52d3f66..c6dce21117 100644
--- 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
index 983f100cd1..ada1b073f3 100644
--- 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
index ed15e53490..e80559c613 100644
--- 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
deleted file mode 100644
index 062e823ff0..0000000000
--- a/static/js/featherlight.min.js
+++ /dev/null
@@ -1,9 +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.
-**/
-// Modified by OZ -> https://github.com/noelboss/featherlight/issues/317
-!function(u){"use strict";if(void 0!==u)if(u.fn.jquery.match(/-ajax/))"console"in window&&window.console.info("Featherlight needs regular jQuery, not the slim version.");else{var r=[],i=function(t){return r=u.grep(r,function(e){return e!==t&&0','
','",'
'+n.loading+"
","
",""].join("")),o="."+n.namespace+"-close"+(n.otherClose?","+n.otherClose:"");return n.$instance=i.clone().addClass(n.variant),n.$instance.on(n.closeTrigger+"."+n.namespace,function(e){if(!e.isDefaultPrevented()){var t=u(e.target);("background"===n.closeOnClick&&t.is("."+n.namespace)||"anywhere"===n.closeOnClick||t.closest(o).length)&&(n.close(e),e.preventDefault())}}),this},getContent:function(){if(!1!==this.persist&&this.$content)return this.$content;var t=this,e=this.constructor.contentFilters,n=function(e){return t.$currentTarget&&t.$currentTarget.attr(e)},r=n(t.targetAttr),i=t.target||r||"",o=e[t.type];if(!o&&i in e&&(o=e[i],i=t.target&&r),i=i||n("href")||"",!o)for(var a in e)t[a]&&(o=e[a],i=t[a]);if(!o){var s=i;if(i=null,u.each(t.contentFilters,function(){return(o=e[this]).test&&(i=o.test(s)),!i&&o.regex&&s.match&&s.match(o.regex)&&(i=s),!i}),!i)return"console"in window&&window.console.error("Featherlight: no content filter found "+(s?' for "'+s+'"':" (no target specified)")),!1}return o.process.call(t,i)},setContent:function(e){return this.$instance.removeClass(this.namespace+"-loading"),this.$instance.toggleClass(this.namespace+"-iframe",e.is("iframe")),this.$instance.find("."+this.namespace+"-inner").not(e).slice(1).remove().end().replaceWith(u.contains(this.$instance[0],e[0])?"":e),this.$content=e.addClass(this.namespace+"-inner"),this},open:function(t){var n=this;if(n.$instance.hide().appendTo(n.root),!(t&&t.isDefaultPrevented()||!1===n.beforeOpen(t))){t&&t.preventDefault();var e=n.getContent();if(e)return r.push(n),s(!0),n.$instance.fadeIn(n.openSpeed),n.beforeContent(t),u.when(e).always(function(e){n.setContent(e),n.afterContent(t)}).then(n.$instance.promise()).done(function(){n.afterOpen(t)})}return n.$instance.detach(),u.Deferred().reject().promise()},close:function(e){var t=this,n=u.Deferred();return!1===t.beforeClose(e)?n.reject():(0===i(t).length&&s(!1),t.$instance.fadeOut(t.closeSpeed,function(){t.$instance.detach(),t.afterClose(e),n.resolve()})),n.promise()},resize:function(e,t){if(e&&t&&(this.$content.css("width","").css("height",""),this.$content.parent().width()');return n.onload=function(){r.naturalWidth=n.width,r.naturalHeight=n.height,t.resolve(r)},n.onerror=function(){t.reject(r)},n.src=e,t.promise()}},html:{regex:/^\s*<[\w!][^<]*>/,process:function(e){return u(e)}},ajax:{regex:/./,process:function(e){var n=u.Deferred(),r=u("").load(e,function(e,t){"error"!==t&&n.resolve(r.contents()),n.fail()});return n.promise()}},iframe:{process:function(e){var t=new u.Deferred,n=u(""),r=function(e,t){var n={},r=new RegExp("^"+t+"([A-Z])(.*)");for(var i in e){var o=i.match(r);o&&(n[(o[1]+o[2].replace(/([A-Z])/g,"-$1")).toLowerCase()]=e[i])}return n}(this,"iframe"),i=function(e,t){var n={};for(var r in e)r in t&&(n[r]=e[r],delete e[r]);return n}(r,o);return n.hide().attr("src",e).attr(i).css(r).on("load",function(){t.resolve(n.show())}).appendTo(this.$instance.find("."+this.namespace+"-content")),t.promise()}},text:{process:function(e){return u("