From ca698871ef38f07de1d26a85794c69d9b09e5443 Mon Sep 17 00:00:00 2001
From: Lars L <lars@lehmann.link>
Date: Mon, 21 Mar 2022 16:55:27 +0100
Subject: [PATCH] added lightbox for images

---
 app/themes/onepage_light/theme.css            | 45 ++++++++++
 app/themes/onepage_light/theme.js             | 89 +++++++++++--------
 app/themes/sidebar_dark/theme.css             | 46 +++++++++-
 app/themes/sidebar_dark/theme.js              | 89 +++++++++++--------
 app/themes/sidebar_dark_full_width/theme.css  | 46 +++++++++-
 app/themes/sidebar_dark_full_width/theme.js   | 89 +++++++++++--------
 app/themes/sidebar_light/theme.css            | 44 +++++++++
 app/themes/sidebar_light/theme.js             | 89 +++++++++++--------
 app/themes/sidebar_light_full_width/theme.css | 45 ++++++++++
 app/themes/sidebar_light_full_width/theme.js  | 89 +++++++++++--------
 10 files changed, 489 insertions(+), 182 deletions(-)

diff --git a/app/themes/onepage_light/theme.css b/app/themes/onepage_light/theme.css
index 2d9f674..66020e2 100644
--- a/app/themes/onepage_light/theme.css
+++ b/app/themes/onepage_light/theme.css
@@ -576,4 +576,49 @@ figure .source {
     background: #f1f1ef;
     border: none;
     box-shadow: 0 5px 20px #85858587;
+}
+
+
+.image,
+.lightbox-opened{
+    transition: all 0.3s ease;
+}
+.lightbox-opened {
+    background-color: #ffffffe6;
+    cursor: pointer;
+    height: 100%;
+    left: 0;
+    overflow-y: scroll;
+    padding: 24px;
+    position: fixed;
+    text-align: center;
+    top: 0;
+    width: 100%;
+    animation: lightbox-in 0.5s;
+}
+
+@keyframes lightbox-in {
+    0% {
+    opacity: 0.5;
+    padding: 100px;
+    }
+
+    100% {
+        opacity: 1;
+        padding: 24px;
+    }
+}
+
+.lightbox-opened img {
+    box-shadow:  0 0 6px 3px #33333352;;
+}
+
+.lightbox-opened img {
+    max-width: 100%;
+    border-radius: 10px;
+    max-height: calc(100% - 48px);
+}
+
+.no-scroll {
+    overflow: hidden;
 }
\ No newline at end of file
diff --git a/app/themes/onepage_light/theme.js b/app/themes/onepage_light/theme.js
index f9cdd78..734a6f8 100644
--- a/app/themes/onepage_light/theme.js
+++ b/app/themes/onepage_light/theme.js
@@ -15,21 +15,21 @@ $(document).ready(function () {
         // jump to selected page in sidebar
         document.getElementById(elementid).scrollIntoView();
 
-        if(cl_splithash.length > 1){
+        if (cl_splithash.length > 1) {
             // when internal jumo mark clicked also jump to this position
             let elementid2 = cl_splithash[1];
             document.getElementById(elementid2).scrollIntoView();
             $('#' + elementid2).addClass('n2web_jumpmark_selected');
         }
     }
-    	
-    $( ".n2web_group" ).first().addClass('opened');
-    $( ".n2web_file.has_children" ).first().addClass('opened');
+
+    $(".n2web_group").first().addClass('opened');
+    $(".n2web_file.has_children").first().addClass('opened');
 
 
     // menu functionality
     $(".n2web_show_children").click(function () {
-        let n2webid = $(this).data( "n2webid" );
+        let n2webid = $(this).data("n2webid");
         toggleMenuOpen(n2webid, true);
     });
     $("a.table_of_contents-link").click(function () {
@@ -37,65 +37,82 @@ $(document).ready(function () {
         let element = $(n2webid);
         highlightJumpMark(element);
     });
-    $(".n2web_header_mobile_menu_button").click(function (){
-        var element =   $(".n2web_header_menu.menu_right");
-        if($(element).hasClass('opened')){
+    $(".n2web_header_mobile_menu_button").click(function () {
+        var element = $(".n2web_header_menu.menu_right");
+        if ($(element).hasClass('opened')) {
             $(element).removeClass('opened');
             $(element).removeClass('opened');
-        }else{
+        } else {
             $(element).addClass('opened');
             $(element).addClass('opened');
         }
     })
 
+
+
+    // Open Lightbox
+    $(".image a").on("click", function (e) {
+        e.preventDefault();
+        var image = $(this).attr("href");
+        $("html").addClass("no-scroll");
+        $("body").append(
+            '<div class="lightbox-opened"><img src="' + image + '"></div>'
+        );
+    });
+
+    // Close Lightbox
+    $("body").on("click", ".lightbox-opened", function () {
+        $("html").removeClass("no-scroll");
+        $(".lightbox-opened").remove();
+    });
 });
 
 
 
-function toggleMenuOpen(n2webid, manual){
+function toggleMenuOpen(n2webid, manual) {
     var cl = '';
-    if (manual == true){
-        $('#'+n2webid+'_dir').addClass('manual');
-        $('#'+n2webid+'_file').addClass('manual');
-    }else{
+    if (manual == true) {
+        $('#' + n2webid + '_dir').addClass('manual');
+        $('#' + n2webid + '_file').addClass('manual');
+    } else {
         // cl = 'opened';
     }
 
-    if($('#'+n2webid+'_dir').hasClass('opened')){
-        $('#'+n2webid+'_dir').removeClass('opened');
-        $('#'+n2webid+'_file').removeClass('opened');
-    }else{
-        $('#'+n2webid+'_dir').addClass('opened');
-        $('#'+n2webid+'_file').addClass('opened');
+    if ($('#' + n2webid + '_dir').hasClass('opened')) {
+        $('#' + n2webid + '_dir').removeClass('opened');
+        $('#' + n2webid + '_file').removeClass('opened');
+    } else {
+        $('#' + n2webid + '_dir').addClass('opened');
+        $('#' + n2webid + '_file').addClass('opened');
     }
 }
 
-function openParentMenu(element, manual){
-    if ($(element).hasClass('n2web_group')){
-        let n2webid = $(element).data( "n2webid" );
+function openParentMenu(element, manual) {
+    if ($(element).hasClass('n2web_group')) {
+        let n2webid = $(element).data("n2webid");
         toggleMenuOpen(n2webid, manual);
         openParentMenu($(element).parent(), manual);
     }
 }
 
-function highlightJumpMark(element){
+function highlightJumpMark(element) {
     $('a').removeClass('n2web_jumpmark_selected');
     $(element).addClass('n2web_jumpmark_selected');
 }
 
 //Smooth-Scrolling
-$(function() {
-    $('a[href*="#"]:not([href="#"])').click(function() {
-      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
-        var target = $(this.hash);
-        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
-        if (target.length) {
-          $('html, body').animate({
-            scrollTop: target.offset().top
-          }, 1000);
-          return false;
+$(function () {
+    $('a[href*="#"]:not([href="#"])').click(function () {
+        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
+            var target = $(this.hash);
+            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+            if (target.length) {
+                $('html, body').animate({
+                    scrollTop: target.offset().top
+                }, 1000);
+                return false;
+            }
         }
-      }
     });
-  });
+});
 
diff --git a/app/themes/sidebar_dark/theme.css b/app/themes/sidebar_dark/theme.css
index a33fb6d..d01ac94 100644
--- a/app/themes/sidebar_dark/theme.css
+++ b/app/themes/sidebar_dark/theme.css
@@ -18,4 +18,48 @@ html, body { font-family: inter-var, -apple-system, BlinkMacSystemFont, "Segoe U
 }@keyframes opacity-fade { 
   0% { opacity: 0; }
   100% { opacity: 1; }
-}.n2web_menu_item { float: left; padding: 6px 8px; margin: 10px 3px; border-radius: 5px; }.menu_right { float: right; }.n2web_menu_item:hover { background: rgba(0, 0, 0, 0.06); color: rgb(191, 191, 191); }a .n2web_menu_item { color: rgb(191, 191, 191); text-decoration: none; transition: all 0.3s ease 0s; }.footer_menu .n2web_menu_item { font-size: 14px; }.table_of_contents { float: right; padding: 15px; margin-left: 15px; border-radius: 5px; transition: all 0.8s ease 0s; }.table_of_contents:hover { background: rgb(33, 33, 33); }.n2web_header_main_logo { float: left; }.n2web_header_main_logo img, .n2web_header_main_logo a { height: 40px; margin-top: 5px; }.n2web_header_main_title { float: right; }.n2web_header_main_title h1 { color: rgb(191, 191, 191); font-weight: 200; font-size: 28px; padding: 8px; }.n2web_sidebar ul, .n2web_sidebar ul ul, .n2web_sidebar li { font-size: 12px; }li.n2web_file { list-style: none; padding: 2px 5px; margin: 2px 5px; border-radius: 3px; }li.n2web_file a { color: rgba(191, 191, 191, 0.6); font-size: 15px; line-height: 22px; text-decoration: none; font-weight: 430; padding: 0px 4px; border-radius: 3px; display: inline-block; }article a, summary { transition: all 0.3s ease 0s; }article a { background: rgb(65, 48, 16); }article figure.image a, article a.bookmark { background: transparent; }article a { padding: 3px 4px; margin: 0px -4px; border-radius: 3px; color: rgb(191, 191, 191); }article img.page-cover-image { border-radius: 5px; box-shadow: rgb(86, 80, 67) 0px 2px 4px; width: calc(100% - 6px); margin: 3px; }article .table_of_contents-link { opacity: 1; }li.n2web_file a:hover, article a:hover, summary:hover, a.table_of_contents-link:hover { color: rgb(191, 191, 191); background: rgba(0, 0, 0, 0.06); }figure.image a:hover { background: transparent; }article img { opacity: 0; }article { animation: 0.5s ease 0s 1 normal none running opacity-fade; }article img { animation: 1s ease 0s 1 normal none running opacity-fade; }article img { opacity: 1; }.callout a:hover { color: rgb(191, 191, 191); background: rgb(28, 28, 28); }li.n2web_file a, .n2web_file.has_children a { max-width: calc(100% - 22px); transition: background 0.3s ease 0s, color 0.3s ease 0s; }li.n2web_file.selected a, .n2web_file.has_children.opened a { font-weight: 600; color: rgb(191, 191, 191); }figure:not(.image) a[target="_blank"]:not(.bookmark-image):not(.bookmark)::after { content: " ↗"; left: 0px; }article .code, article code { font-size: 100%; }article li, article ul, article p, .callout { line-height: 24px; }article p { margin-top: 0px; margin-bottom: 15px; }article .code, article .bookmark-info { overflow: scroll; }summary { cursor: pointer; padding: 3px 3px 3px 6px; margin: -3px -3px -3px -6px; border-radius: 3px; }article ul.toggle > li { list-style: none; overflow: scroll; }article figure.image img { border-radius: 5px; box-shadow: rgb(86, 80, 67) 0px 2px 4px; }article a span.icon { line-height: 18px; }article .block-color-red_background, article .block-color-blue_background, article .block-color-teal_background { border-radius: 5px; padding: 5px; }
\ No newline at end of file
+}.n2web_menu_item { float: left; padding: 6px 8px; margin: 10px 3px; border-radius: 5px; }.menu_right { float: right; }.n2web_menu_item:hover { background: rgba(0, 0, 0, 0.06); color: rgb(191, 191, 191); }a .n2web_menu_item { color: rgb(191, 191, 191); text-decoration: none; transition: all 0.3s ease 0s; }.footer_menu .n2web_menu_item { font-size: 14px; }.table_of_contents { float: right; padding: 15px; margin-left: 15px; border-radius: 5px; transition: all 0.8s ease 0s; }.table_of_contents:hover { background: rgb(33, 33, 33); }.n2web_header_main_logo { float: left; }.n2web_header_main_logo img, .n2web_header_main_logo a { height: 40px; margin-top: 5px; }.n2web_header_main_title { float: right; }.n2web_header_main_title h1 { color: rgb(191, 191, 191); font-weight: 200; font-size: 28px; padding: 8px; }.n2web_sidebar ul, .n2web_sidebar ul ul, .n2web_sidebar li { font-size: 12px; }li.n2web_file { list-style: none; padding: 2px 5px; margin: 2px 5px; border-radius: 3px; }li.n2web_file a { color: rgba(191, 191, 191, 0.6); font-size: 15px; line-height: 22px; text-decoration: none; font-weight: 430; padding: 0px 4px; border-radius: 3px; display: inline-block; }article a, summary { transition: all 0.3s ease 0s; }article a { background: rgb(65, 48, 16); }article figure.image a, article a.bookmark { background: transparent; }article a { padding: 3px 4px; margin: 0px -4px; border-radius: 3px; color: rgb(191, 191, 191); }article img.page-cover-image { border-radius: 5px; box-shadow: rgb(86, 80, 67) 0px 2px 4px; width: calc(100% - 6px); margin: 3px; }article .table_of_contents-link { opacity: 1; }li.n2web_file a:hover, article a:hover, summary:hover, a.table_of_contents-link:hover { color: rgb(191, 191, 191); background: rgba(0, 0, 0, 0.06); }figure.image a:hover { background: transparent; }article img { opacity: 0; }article { animation: 0.5s ease 0s 1 normal none running opacity-fade; }article img { animation: 1s ease 0s 1 normal none running opacity-fade; }article img { opacity: 1; }.callout a:hover { color: rgb(191, 191, 191); background: rgb(28, 28, 28); }li.n2web_file a, .n2web_file.has_children a { max-width: calc(100% - 22px); transition: background 0.3s ease 0s, color 0.3s ease 0s; }li.n2web_file.selected a, .n2web_file.has_children.opened a { font-weight: 600; color: rgb(191, 191, 191); }figure:not(.image) a[target="_blank"]:not(.bookmark-image):not(.bookmark)::after { content: " ↗"; left: 0px; }article .code, article code { font-size: 100%; }article li, article ul, article p, .callout { line-height: 24px; }article p { margin-top: 0px; margin-bottom: 15px; }article .code, article .bookmark-info { overflow: scroll; }summary { cursor: pointer; padding: 3px 3px 3px 6px; margin: -3px -3px -3px -6px; border-radius: 3px; }article ul.toggle > li { list-style: none; overflow: scroll; }article figure.image img { border-radius: 5px; box-shadow: rgb(86, 80, 67) 0px 2px 4px; }article a span.icon { line-height: 18px; }article .block-color-red_background, article .block-color-blue_background, article .block-color-teal_background { border-radius: 5px; padding: 5px; }
+
+.image,
+.lightbox-opened{
+    transition: all 0.3s ease;
+}
+.lightbox-opened {
+    background-color: #ffffffe6;
+    cursor: pointer;
+    height: 100%;
+    left: 0;
+    overflow-y: scroll;
+    padding: 24px;
+    position: fixed;
+    text-align: center;
+    top: 0;
+    width: 100%;
+    animation: lightbox-in 0.5s;
+}
+
+@keyframes lightbox-in {
+    0% {
+    opacity: 0.5;
+    padding: 100px;
+    }
+
+    100% {
+        opacity: 1;
+        padding: 24px;
+    }
+}
+
+.lightbox-opened img {
+    box-shadow:  0 0 6px 3px #33333352;;
+}
+
+.lightbox-opened img {
+    max-width: 100%;
+    border-radius: 10px;
+    max-height: calc(100% - 48px);
+}
+
+.no-scroll {
+    overflow: hidden;
+}
\ No newline at end of file
diff --git a/app/themes/sidebar_dark/theme.js b/app/themes/sidebar_dark/theme.js
index f9cdd78..734a6f8 100644
--- a/app/themes/sidebar_dark/theme.js
+++ b/app/themes/sidebar_dark/theme.js
@@ -15,21 +15,21 @@ $(document).ready(function () {
         // jump to selected page in sidebar
         document.getElementById(elementid).scrollIntoView();
 
-        if(cl_splithash.length > 1){
+        if (cl_splithash.length > 1) {
             // when internal jumo mark clicked also jump to this position
             let elementid2 = cl_splithash[1];
             document.getElementById(elementid2).scrollIntoView();
             $('#' + elementid2).addClass('n2web_jumpmark_selected');
         }
     }
-    	
-    $( ".n2web_group" ).first().addClass('opened');
-    $( ".n2web_file.has_children" ).first().addClass('opened');
+
+    $(".n2web_group").first().addClass('opened');
+    $(".n2web_file.has_children").first().addClass('opened');
 
 
     // menu functionality
     $(".n2web_show_children").click(function () {
-        let n2webid = $(this).data( "n2webid" );
+        let n2webid = $(this).data("n2webid");
         toggleMenuOpen(n2webid, true);
     });
     $("a.table_of_contents-link").click(function () {
@@ -37,65 +37,82 @@ $(document).ready(function () {
         let element = $(n2webid);
         highlightJumpMark(element);
     });
-    $(".n2web_header_mobile_menu_button").click(function (){
-        var element =   $(".n2web_header_menu.menu_right");
-        if($(element).hasClass('opened')){
+    $(".n2web_header_mobile_menu_button").click(function () {
+        var element = $(".n2web_header_menu.menu_right");
+        if ($(element).hasClass('opened')) {
             $(element).removeClass('opened');
             $(element).removeClass('opened');
-        }else{
+        } else {
             $(element).addClass('opened');
             $(element).addClass('opened');
         }
     })
 
+
+
+    // Open Lightbox
+    $(".image a").on("click", function (e) {
+        e.preventDefault();
+        var image = $(this).attr("href");
+        $("html").addClass("no-scroll");
+        $("body").append(
+            '<div class="lightbox-opened"><img src="' + image + '"></div>'
+        );
+    });
+
+    // Close Lightbox
+    $("body").on("click", ".lightbox-opened", function () {
+        $("html").removeClass("no-scroll");
+        $(".lightbox-opened").remove();
+    });
 });
 
 
 
-function toggleMenuOpen(n2webid, manual){
+function toggleMenuOpen(n2webid, manual) {
     var cl = '';
-    if (manual == true){
-        $('#'+n2webid+'_dir').addClass('manual');
-        $('#'+n2webid+'_file').addClass('manual');
-    }else{
+    if (manual == true) {
+        $('#' + n2webid + '_dir').addClass('manual');
+        $('#' + n2webid + '_file').addClass('manual');
+    } else {
         // cl = 'opened';
     }
 
-    if($('#'+n2webid+'_dir').hasClass('opened')){
-        $('#'+n2webid+'_dir').removeClass('opened');
-        $('#'+n2webid+'_file').removeClass('opened');
-    }else{
-        $('#'+n2webid+'_dir').addClass('opened');
-        $('#'+n2webid+'_file').addClass('opened');
+    if ($('#' + n2webid + '_dir').hasClass('opened')) {
+        $('#' + n2webid + '_dir').removeClass('opened');
+        $('#' + n2webid + '_file').removeClass('opened');
+    } else {
+        $('#' + n2webid + '_dir').addClass('opened');
+        $('#' + n2webid + '_file').addClass('opened');
     }
 }
 
-function openParentMenu(element, manual){
-    if ($(element).hasClass('n2web_group')){
-        let n2webid = $(element).data( "n2webid" );
+function openParentMenu(element, manual) {
+    if ($(element).hasClass('n2web_group')) {
+        let n2webid = $(element).data("n2webid");
         toggleMenuOpen(n2webid, manual);
         openParentMenu($(element).parent(), manual);
     }
 }
 
-function highlightJumpMark(element){
+function highlightJumpMark(element) {
     $('a').removeClass('n2web_jumpmark_selected');
     $(element).addClass('n2web_jumpmark_selected');
 }
 
 //Smooth-Scrolling
-$(function() {
-    $('a[href*="#"]:not([href="#"])').click(function() {
-      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
-        var target = $(this.hash);
-        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
-        if (target.length) {
-          $('html, body').animate({
-            scrollTop: target.offset().top
-          }, 1000);
-          return false;
+$(function () {
+    $('a[href*="#"]:not([href="#"])').click(function () {
+        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
+            var target = $(this.hash);
+            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+            if (target.length) {
+                $('html, body').animate({
+                    scrollTop: target.offset().top
+                }, 1000);
+                return false;
+            }
         }
-      }
     });
-  });
+});
 
diff --git a/app/themes/sidebar_dark_full_width/theme.css b/app/themes/sidebar_dark_full_width/theme.css
index 5f4a10f..49fe26f 100644
--- a/app/themes/sidebar_dark_full_width/theme.css
+++ b/app/themes/sidebar_dark_full_width/theme.css
@@ -18,4 +18,48 @@ html, body { font-family: inter-var, -apple-system, BlinkMacSystemFont, "Segoe U
 }@keyframes opacity-fade { 
   0% { opacity: 0; }
   100% { opacity: 1; }
-}.n2web_menu_item { float: left; padding: 6px 8px; margin: 10px 3px; border-radius: 5px; }.menu_right { float: right; }.n2web_menu_item:hover { background: rgba(0, 0, 0, 0.06); color: rgb(191, 191, 191); }a .n2web_menu_item { color: rgb(191, 191, 191); text-decoration: none; transition: all 0.3s ease 0s; }.footer_menu .n2web_menu_item { font-size: 14px; }.table_of_contents { float: right; padding: 15px; margin-left: 15px; border-radius: 5px; transition: all 0.8s ease 0s; }.table_of_contents:hover { background: rgb(33, 33, 33); }.n2web_header_main_logo { float: left; }.n2web_header_main_logo img, .n2web_header_main_logo a { height: 40px; margin-top: 5px; }.n2web_header_main_title { float: right; }.n2web_header_main_title h1 { color: rgb(191, 191, 191); font-weight: 200; font-size: 28px; padding: 8px; }.n2web_sidebar ul, .n2web_sidebar ul ul, .n2web_sidebar li { font-size: 12px; }li.n2web_file { list-style: none; padding: 2px 5px; margin: 2px 5px; border-radius: 3px; }li.n2web_file a { color: rgba(191, 191, 191, 0.6); font-size: 15px; line-height: 22px; text-decoration: none; font-weight: 430; padding: 0px 4px; border-radius: 3px; display: inline-block; }article a, summary { transition: all 0.3s ease 0s; }article a { background: rgb(65, 48, 16); }article figure.image a, article a.bookmark { background: transparent; }article a { padding: 3px 4px; margin: 0px -4px; border-radius: 3px; color: rgb(191, 191, 191); }article img.page-cover-image { border-radius: 5px; box-shadow: rgb(86, 80, 67) 0px 2px 4px; width: calc(100% - 6px); margin: 3px; }article .table_of_contents-link { opacity: 1; }li.n2web_file a:hover, article a:hover, summary:hover, a.table_of_contents-link:hover { color: rgb(191, 191, 191); background: rgba(0, 0, 0, 0.06); }figure.image a:hover { background: transparent; }article img { opacity: 0; }article { animation: 0.5s ease 0s 1 normal none running opacity-fade; padding-right: 15px; }article img { animation: 1s ease 0s 1 normal none running opacity-fade; }article img { opacity: 1; }.callout a:hover { color: rgb(191, 191, 191); background: rgb(28, 28, 28); }li.n2web_file a, .n2web_file.has_children a { max-width: calc(100% - 22px); transition: background 0.3s ease 0s, color 0.3s ease 0s; }li.n2web_file.selected a, .n2web_file.has_children.opened a { font-weight: 600; color: rgb(191, 191, 191); }figure:not(.image) a[target="_blank"]:not(.bookmark-image):not(.bookmark)::after { content: " ↗"; left: 0px; }article .code, article code { font-size: 100%; }article li, article ul, article p, .callout { line-height: 24px; }article p { margin-top: 0px; margin-bottom: 15px; }article .code, article .bookmark-info { overflow: scroll; }summary { cursor: pointer; padding: 3px 3px 3px 6px; margin: -3px -3px -3px -6px; border-radius: 3px; }article ul.toggle > li { list-style: none; overflow: scroll; }article figure.image img { border-radius: 5px; box-shadow: rgb(86, 80, 67) 0px 2px 4px; }article a span.icon { line-height: 18px; }article .block-color-red_background, article .block-color-blue_background, article .block-color-teal_background { border-radius: 5px; padding: 5px; }
\ No newline at end of file
+}.n2web_menu_item { float: left; padding: 6px 8px; margin: 10px 3px; border-radius: 5px; }.menu_right { float: right; }.n2web_menu_item:hover { background: rgba(0, 0, 0, 0.06); color: rgb(191, 191, 191); }a .n2web_menu_item { color: rgb(191, 191, 191); text-decoration: none; transition: all 0.3s ease 0s; }.footer_menu .n2web_menu_item { font-size: 14px; }.table_of_contents { float: right; padding: 15px; margin-left: 15px; border-radius: 5px; transition: all 0.8s ease 0s; }.table_of_contents:hover { background: rgb(33, 33, 33); }.n2web_header_main_logo { float: left; }.n2web_header_main_logo img, .n2web_header_main_logo a { height: 40px; margin-top: 5px; }.n2web_header_main_title { float: right; }.n2web_header_main_title h1 { color: rgb(191, 191, 191); font-weight: 200; font-size: 28px; padding: 8px; }.n2web_sidebar ul, .n2web_sidebar ul ul, .n2web_sidebar li { font-size: 12px; }li.n2web_file { list-style: none; padding: 2px 5px; margin: 2px 5px; border-radius: 3px; }li.n2web_file a { color: rgba(191, 191, 191, 0.6); font-size: 15px; line-height: 22px; text-decoration: none; font-weight: 430; padding: 0px 4px; border-radius: 3px; display: inline-block; }article a, summary { transition: all 0.3s ease 0s; }article a { background: rgb(65, 48, 16); }article figure.image a, article a.bookmark { background: transparent; }article a { padding: 3px 4px; margin: 0px -4px; border-radius: 3px; color: rgb(191, 191, 191); }article img.page-cover-image { border-radius: 5px; box-shadow: rgb(86, 80, 67) 0px 2px 4px; width: calc(100% - 6px); margin: 3px; }article .table_of_contents-link { opacity: 1; }li.n2web_file a:hover, article a:hover, summary:hover, a.table_of_contents-link:hover { color: rgb(191, 191, 191); background: rgba(0, 0, 0, 0.06); }figure.image a:hover { background: transparent; }article img { opacity: 0; }article { animation: 0.5s ease 0s 1 normal none running opacity-fade; padding-right: 15px; }article img { animation: 1s ease 0s 1 normal none running opacity-fade; }article img { opacity: 1; }.callout a:hover { color: rgb(191, 191, 191); background: rgb(28, 28, 28); }li.n2web_file a, .n2web_file.has_children a { max-width: calc(100% - 22px); transition: background 0.3s ease 0s, color 0.3s ease 0s; }li.n2web_file.selected a, .n2web_file.has_children.opened a { font-weight: 600; color: rgb(191, 191, 191); }figure:not(.image) a[target="_blank"]:not(.bookmark-image):not(.bookmark)::after { content: " ↗"; left: 0px; }article .code, article code { font-size: 100%; }article li, article ul, article p, .callout { line-height: 24px; }article p { margin-top: 0px; margin-bottom: 15px; }article .code, article .bookmark-info { overflow: scroll; }summary { cursor: pointer; padding: 3px 3px 3px 6px; margin: -3px -3px -3px -6px; border-radius: 3px; }article ul.toggle > li { list-style: none; overflow: scroll; }article figure.image img { border-radius: 5px; box-shadow: rgb(86, 80, 67) 0px 2px 4px; }article a span.icon { line-height: 18px; }article .block-color-red_background, article .block-color-blue_background, article .block-color-teal_background { border-radius: 5px; padding: 5px; }
+
+.image,
+.lightbox-opened{
+    transition: all 0.3s ease;
+}
+.lightbox-opened {
+    background-color: #ffffffe6;
+    cursor: pointer;
+    height: 100%;
+    left: 0;
+    overflow-y: scroll;
+    padding: 24px;
+    position: fixed;
+    text-align: center;
+    top: 0;
+    width: 100%;
+    animation: lightbox-in 0.5s;
+}
+
+@keyframes lightbox-in {
+    0% {
+    opacity: 0.5;
+    padding: 100px;
+    }
+
+    100% {
+        opacity: 1;
+        padding: 24px;
+    }
+}
+
+.lightbox-opened img {
+    box-shadow:  0 0 6px 3px #33333352;;
+}
+
+.lightbox-opened img {
+    max-width: 100%;
+    border-radius: 10px;
+    max-height: calc(100% - 48px);
+}
+
+.no-scroll {
+    overflow: hidden;
+}
\ No newline at end of file
diff --git a/app/themes/sidebar_dark_full_width/theme.js b/app/themes/sidebar_dark_full_width/theme.js
index f9cdd78..734a6f8 100644
--- a/app/themes/sidebar_dark_full_width/theme.js
+++ b/app/themes/sidebar_dark_full_width/theme.js
@@ -15,21 +15,21 @@ $(document).ready(function () {
         // jump to selected page in sidebar
         document.getElementById(elementid).scrollIntoView();
 
-        if(cl_splithash.length > 1){
+        if (cl_splithash.length > 1) {
             // when internal jumo mark clicked also jump to this position
             let elementid2 = cl_splithash[1];
             document.getElementById(elementid2).scrollIntoView();
             $('#' + elementid2).addClass('n2web_jumpmark_selected');
         }
     }
-    	
-    $( ".n2web_group" ).first().addClass('opened');
-    $( ".n2web_file.has_children" ).first().addClass('opened');
+
+    $(".n2web_group").first().addClass('opened');
+    $(".n2web_file.has_children").first().addClass('opened');
 
 
     // menu functionality
     $(".n2web_show_children").click(function () {
-        let n2webid = $(this).data( "n2webid" );
+        let n2webid = $(this).data("n2webid");
         toggleMenuOpen(n2webid, true);
     });
     $("a.table_of_contents-link").click(function () {
@@ -37,65 +37,82 @@ $(document).ready(function () {
         let element = $(n2webid);
         highlightJumpMark(element);
     });
-    $(".n2web_header_mobile_menu_button").click(function (){
-        var element =   $(".n2web_header_menu.menu_right");
-        if($(element).hasClass('opened')){
+    $(".n2web_header_mobile_menu_button").click(function () {
+        var element = $(".n2web_header_menu.menu_right");
+        if ($(element).hasClass('opened')) {
             $(element).removeClass('opened');
             $(element).removeClass('opened');
-        }else{
+        } else {
             $(element).addClass('opened');
             $(element).addClass('opened');
         }
     })
 
+
+
+    // Open Lightbox
+    $(".image a").on("click", function (e) {
+        e.preventDefault();
+        var image = $(this).attr("href");
+        $("html").addClass("no-scroll");
+        $("body").append(
+            '<div class="lightbox-opened"><img src="' + image + '"></div>'
+        );
+    });
+
+    // Close Lightbox
+    $("body").on("click", ".lightbox-opened", function () {
+        $("html").removeClass("no-scroll");
+        $(".lightbox-opened").remove();
+    });
 });
 
 
 
-function toggleMenuOpen(n2webid, manual){
+function toggleMenuOpen(n2webid, manual) {
     var cl = '';
-    if (manual == true){
-        $('#'+n2webid+'_dir').addClass('manual');
-        $('#'+n2webid+'_file').addClass('manual');
-    }else{
+    if (manual == true) {
+        $('#' + n2webid + '_dir').addClass('manual');
+        $('#' + n2webid + '_file').addClass('manual');
+    } else {
         // cl = 'opened';
     }
 
-    if($('#'+n2webid+'_dir').hasClass('opened')){
-        $('#'+n2webid+'_dir').removeClass('opened');
-        $('#'+n2webid+'_file').removeClass('opened');
-    }else{
-        $('#'+n2webid+'_dir').addClass('opened');
-        $('#'+n2webid+'_file').addClass('opened');
+    if ($('#' + n2webid + '_dir').hasClass('opened')) {
+        $('#' + n2webid + '_dir').removeClass('opened');
+        $('#' + n2webid + '_file').removeClass('opened');
+    } else {
+        $('#' + n2webid + '_dir').addClass('opened');
+        $('#' + n2webid + '_file').addClass('opened');
     }
 }
 
-function openParentMenu(element, manual){
-    if ($(element).hasClass('n2web_group')){
-        let n2webid = $(element).data( "n2webid" );
+function openParentMenu(element, manual) {
+    if ($(element).hasClass('n2web_group')) {
+        let n2webid = $(element).data("n2webid");
         toggleMenuOpen(n2webid, manual);
         openParentMenu($(element).parent(), manual);
     }
 }
 
-function highlightJumpMark(element){
+function highlightJumpMark(element) {
     $('a').removeClass('n2web_jumpmark_selected');
     $(element).addClass('n2web_jumpmark_selected');
 }
 
 //Smooth-Scrolling
-$(function() {
-    $('a[href*="#"]:not([href="#"])').click(function() {
-      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
-        var target = $(this.hash);
-        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
-        if (target.length) {
-          $('html, body').animate({
-            scrollTop: target.offset().top
-          }, 1000);
-          return false;
+$(function () {
+    $('a[href*="#"]:not([href="#"])').click(function () {
+        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
+            var target = $(this.hash);
+            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+            if (target.length) {
+                $('html, body').animate({
+                    scrollTop: target.offset().top
+                }, 1000);
+                return false;
+            }
         }
-      }
     });
-  });
+});
 
diff --git a/app/themes/sidebar_light/theme.css b/app/themes/sidebar_light/theme.css
index 3582a02..b713fd7 100644
--- a/app/themes/sidebar_light/theme.css
+++ b/app/themes/sidebar_light/theme.css
@@ -550,4 +550,48 @@ article .block-color-orange_background {
 article .block-color-gray {
     color: #706f6f;
     fill: #706f6f;
+}
+
+.image,
+.lightbox-opened{
+    transition: all 0.3s ease;
+}
+.lightbox-opened {
+    background-color: #ffffffe6;
+    cursor: pointer;
+    height: 100%;
+    left: 0;
+    overflow-y: scroll;
+    padding: 24px;
+    position: fixed;
+    text-align: center;
+    top: 0;
+    width: 100%;
+    animation: lightbox-in 0.5s;
+}
+
+@keyframes lightbox-in {
+    0% {
+    opacity: 0.5;
+    padding: 100px;
+    }
+
+    100% {
+        opacity: 1;
+        padding: 24px;
+    }
+}
+
+.lightbox-opened img {
+    box-shadow:  0 0 6px 3px #33333352;;
+}
+
+.lightbox-opened img {
+    max-width: 100%;
+    border-radius: 10px;
+    max-height: calc(100% - 48px);
+}
+
+.no-scroll {
+    overflow: hidden;
 }
\ No newline at end of file
diff --git a/app/themes/sidebar_light/theme.js b/app/themes/sidebar_light/theme.js
index f9cdd78..734a6f8 100644
--- a/app/themes/sidebar_light/theme.js
+++ b/app/themes/sidebar_light/theme.js
@@ -15,21 +15,21 @@ $(document).ready(function () {
         // jump to selected page in sidebar
         document.getElementById(elementid).scrollIntoView();
 
-        if(cl_splithash.length > 1){
+        if (cl_splithash.length > 1) {
             // when internal jumo mark clicked also jump to this position
             let elementid2 = cl_splithash[1];
             document.getElementById(elementid2).scrollIntoView();
             $('#' + elementid2).addClass('n2web_jumpmark_selected');
         }
     }
-    	
-    $( ".n2web_group" ).first().addClass('opened');
-    $( ".n2web_file.has_children" ).first().addClass('opened');
+
+    $(".n2web_group").first().addClass('opened');
+    $(".n2web_file.has_children").first().addClass('opened');
 
 
     // menu functionality
     $(".n2web_show_children").click(function () {
-        let n2webid = $(this).data( "n2webid" );
+        let n2webid = $(this).data("n2webid");
         toggleMenuOpen(n2webid, true);
     });
     $("a.table_of_contents-link").click(function () {
@@ -37,65 +37,82 @@ $(document).ready(function () {
         let element = $(n2webid);
         highlightJumpMark(element);
     });
-    $(".n2web_header_mobile_menu_button").click(function (){
-        var element =   $(".n2web_header_menu.menu_right");
-        if($(element).hasClass('opened')){
+    $(".n2web_header_mobile_menu_button").click(function () {
+        var element = $(".n2web_header_menu.menu_right");
+        if ($(element).hasClass('opened')) {
             $(element).removeClass('opened');
             $(element).removeClass('opened');
-        }else{
+        } else {
             $(element).addClass('opened');
             $(element).addClass('opened');
         }
     })
 
+
+
+    // Open Lightbox
+    $(".image a").on("click", function (e) {
+        e.preventDefault();
+        var image = $(this).attr("href");
+        $("html").addClass("no-scroll");
+        $("body").append(
+            '<div class="lightbox-opened"><img src="' + image + '"></div>'
+        );
+    });
+
+    // Close Lightbox
+    $("body").on("click", ".lightbox-opened", function () {
+        $("html").removeClass("no-scroll");
+        $(".lightbox-opened").remove();
+    });
 });
 
 
 
-function toggleMenuOpen(n2webid, manual){
+function toggleMenuOpen(n2webid, manual) {
     var cl = '';
-    if (manual == true){
-        $('#'+n2webid+'_dir').addClass('manual');
-        $('#'+n2webid+'_file').addClass('manual');
-    }else{
+    if (manual == true) {
+        $('#' + n2webid + '_dir').addClass('manual');
+        $('#' + n2webid + '_file').addClass('manual');
+    } else {
         // cl = 'opened';
     }
 
-    if($('#'+n2webid+'_dir').hasClass('opened')){
-        $('#'+n2webid+'_dir').removeClass('opened');
-        $('#'+n2webid+'_file').removeClass('opened');
-    }else{
-        $('#'+n2webid+'_dir').addClass('opened');
-        $('#'+n2webid+'_file').addClass('opened');
+    if ($('#' + n2webid + '_dir').hasClass('opened')) {
+        $('#' + n2webid + '_dir').removeClass('opened');
+        $('#' + n2webid + '_file').removeClass('opened');
+    } else {
+        $('#' + n2webid + '_dir').addClass('opened');
+        $('#' + n2webid + '_file').addClass('opened');
     }
 }
 
-function openParentMenu(element, manual){
-    if ($(element).hasClass('n2web_group')){
-        let n2webid = $(element).data( "n2webid" );
+function openParentMenu(element, manual) {
+    if ($(element).hasClass('n2web_group')) {
+        let n2webid = $(element).data("n2webid");
         toggleMenuOpen(n2webid, manual);
         openParentMenu($(element).parent(), manual);
     }
 }
 
-function highlightJumpMark(element){
+function highlightJumpMark(element) {
     $('a').removeClass('n2web_jumpmark_selected');
     $(element).addClass('n2web_jumpmark_selected');
 }
 
 //Smooth-Scrolling
-$(function() {
-    $('a[href*="#"]:not([href="#"])').click(function() {
-      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
-        var target = $(this.hash);
-        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
-        if (target.length) {
-          $('html, body').animate({
-            scrollTop: target.offset().top
-          }, 1000);
-          return false;
+$(function () {
+    $('a[href*="#"]:not([href="#"])').click(function () {
+        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
+            var target = $(this.hash);
+            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+            if (target.length) {
+                $('html, body').animate({
+                    scrollTop: target.offset().top
+                }, 1000);
+                return false;
+            }
         }
-      }
     });
-  });
+});
 
diff --git a/app/themes/sidebar_light_full_width/theme.css b/app/themes/sidebar_light_full_width/theme.css
index 8b7b079..d6fa07d 100644
--- a/app/themes/sidebar_light_full_width/theme.css
+++ b/app/themes/sidebar_light_full_width/theme.css
@@ -539,3 +539,48 @@ article .block-color-teal_background {
     border-radius: 5px;
     padding: 5px;
 }
+
+
+.image,
+.lightbox-opened{
+    transition: all 0.3s ease;
+}
+.lightbox-opened {
+    background-color: #ffffffe6;
+    cursor: pointer;
+    height: 100%;
+    left: 0;
+    overflow-y: scroll;
+    padding: 24px;
+    position: fixed;
+    text-align: center;
+    top: 0;
+    width: 100%;
+    animation: lightbox-in 0.5s;
+}
+
+@keyframes lightbox-in {
+    0% {
+    opacity: 0.5;
+    padding: 100px;
+    }
+
+    100% {
+        opacity: 1;
+        padding: 24px;
+    }
+}
+
+.lightbox-opened img {
+    box-shadow:  0 0 6px 3px #33333352;;
+}
+
+.lightbox-opened img {
+    max-width: 100%;
+    border-radius: 10px;
+    max-height: calc(100% - 48px);
+}
+
+.no-scroll {
+    overflow: hidden;
+}
\ No newline at end of file
diff --git a/app/themes/sidebar_light_full_width/theme.js b/app/themes/sidebar_light_full_width/theme.js
index f9cdd78..734a6f8 100644
--- a/app/themes/sidebar_light_full_width/theme.js
+++ b/app/themes/sidebar_light_full_width/theme.js
@@ -15,21 +15,21 @@ $(document).ready(function () {
         // jump to selected page in sidebar
         document.getElementById(elementid).scrollIntoView();
 
-        if(cl_splithash.length > 1){
+        if (cl_splithash.length > 1) {
             // when internal jumo mark clicked also jump to this position
             let elementid2 = cl_splithash[1];
             document.getElementById(elementid2).scrollIntoView();
             $('#' + elementid2).addClass('n2web_jumpmark_selected');
         }
     }
-    	
-    $( ".n2web_group" ).first().addClass('opened');
-    $( ".n2web_file.has_children" ).first().addClass('opened');
+
+    $(".n2web_group").first().addClass('opened');
+    $(".n2web_file.has_children").first().addClass('opened');
 
 
     // menu functionality
     $(".n2web_show_children").click(function () {
-        let n2webid = $(this).data( "n2webid" );
+        let n2webid = $(this).data("n2webid");
         toggleMenuOpen(n2webid, true);
     });
     $("a.table_of_contents-link").click(function () {
@@ -37,65 +37,82 @@ $(document).ready(function () {
         let element = $(n2webid);
         highlightJumpMark(element);
     });
-    $(".n2web_header_mobile_menu_button").click(function (){
-        var element =   $(".n2web_header_menu.menu_right");
-        if($(element).hasClass('opened')){
+    $(".n2web_header_mobile_menu_button").click(function () {
+        var element = $(".n2web_header_menu.menu_right");
+        if ($(element).hasClass('opened')) {
             $(element).removeClass('opened');
             $(element).removeClass('opened');
-        }else{
+        } else {
             $(element).addClass('opened');
             $(element).addClass('opened');
         }
     })
 
+
+
+    // Open Lightbox
+    $(".image a").on("click", function (e) {
+        e.preventDefault();
+        var image = $(this).attr("href");
+        $("html").addClass("no-scroll");
+        $("body").append(
+            '<div class="lightbox-opened"><img src="' + image + '"></div>'
+        );
+    });
+
+    // Close Lightbox
+    $("body").on("click", ".lightbox-opened", function () {
+        $("html").removeClass("no-scroll");
+        $(".lightbox-opened").remove();
+    });
 });
 
 
 
-function toggleMenuOpen(n2webid, manual){
+function toggleMenuOpen(n2webid, manual) {
     var cl = '';
-    if (manual == true){
-        $('#'+n2webid+'_dir').addClass('manual');
-        $('#'+n2webid+'_file').addClass('manual');
-    }else{
+    if (manual == true) {
+        $('#' + n2webid + '_dir').addClass('manual');
+        $('#' + n2webid + '_file').addClass('manual');
+    } else {
         // cl = 'opened';
     }
 
-    if($('#'+n2webid+'_dir').hasClass('opened')){
-        $('#'+n2webid+'_dir').removeClass('opened');
-        $('#'+n2webid+'_file').removeClass('opened');
-    }else{
-        $('#'+n2webid+'_dir').addClass('opened');
-        $('#'+n2webid+'_file').addClass('opened');
+    if ($('#' + n2webid + '_dir').hasClass('opened')) {
+        $('#' + n2webid + '_dir').removeClass('opened');
+        $('#' + n2webid + '_file').removeClass('opened');
+    } else {
+        $('#' + n2webid + '_dir').addClass('opened');
+        $('#' + n2webid + '_file').addClass('opened');
     }
 }
 
-function openParentMenu(element, manual){
-    if ($(element).hasClass('n2web_group')){
-        let n2webid = $(element).data( "n2webid" );
+function openParentMenu(element, manual) {
+    if ($(element).hasClass('n2web_group')) {
+        let n2webid = $(element).data("n2webid");
         toggleMenuOpen(n2webid, manual);
         openParentMenu($(element).parent(), manual);
     }
 }
 
-function highlightJumpMark(element){
+function highlightJumpMark(element) {
     $('a').removeClass('n2web_jumpmark_selected');
     $(element).addClass('n2web_jumpmark_selected');
 }
 
 //Smooth-Scrolling
-$(function() {
-    $('a[href*="#"]:not([href="#"])').click(function() {
-      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
-        var target = $(this.hash);
-        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
-        if (target.length) {
-          $('html, body').animate({
-            scrollTop: target.offset().top
-          }, 1000);
-          return false;
+$(function () {
+    $('a[href*="#"]:not([href="#"])').click(function () {
+        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
+            var target = $(this.hash);
+            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+            if (target.length) {
+                $('html, body').animate({
+                    scrollTop: target.offset().top
+                }, 1000);
+                return false;
+            }
         }
-      }
     });
-  });
+});