Implementing a beta version of a lightbox

components/03_Organisms/imageGrid/_imageGrid.scss

@@ -56,4 +56,66 @@
 	&__Item>.LP-Link:hover + &__DeleteItem, &__DeleteItem:hover { 
 		visibility: visible;
 	}
+	
+	&__LightBox {
+		visibility: hidden;
+		display: none;
+		position: fixed;
+		pointer-events: none;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		background-color: rgba($-grey, .9);
+		padding: 2rem;
+		padding-bottom: 0;
+		width: 100vw;
+		height: 100vh;
+		z-index: 30;
+		top: 0;
+		left: 0;
+		box-sizing: border-box;
+		
+		&:target {
+			visibility: visible;
+			display: grid;
+			grid-template-areas: 'picture picture' 'previous next';
+			grid-template-rows: 1fr 4rem;
+			grid-template-columns: 1fr 1fr;
+			pointer-events: initial;
+		}
+	}
+	
+	&__FullSizeImage {
+		grid-area: picture;
+	}
+	
+	&__Previous{
+		grid-area: previous;
+		align-self: center;
+		justify-self: end;
+	}
+	
+	&__Next {
+		grid-area: next;
+		align-self: center;
+		justify-self: start;
+	}
+	
+	&__Previous, &__Next {
+		padding: 25px;
+		color: $-beige;
+		text-decoration: none;
+		font-family: $-primary-sans-serif-font;
+		font-weight: bold;
+		font-size: 20px;
+	}
+	
+	&__Close{
+		position: fixed;
+		right: 1rem;
+		top: 1rem;
+		left: unset;
+		visibility: visible;
+		opacity: 1;
+	}
 }

components/03_Organisms/imageGrid/imageGrid.config.json

@@ -1,11 +1,34 @@
 {
     "context": {
         "images": [
-            "/images/Bildschirmfoto_von_2020-07-13_11-03-07.png",
+			{
-            "/images/photo_2020-05-02_18-11-21.jpg",
+            	"url": "/images/Bildschirmfoto_von_2020-07-13_11-03-07.png",
-            "/images/Bildschirmfoto_von_2020-07-13_20-15-00.png",
+				"current_id": "image0",
-            "/images/photo_2020-05-02_18-11-21.jpg",
+				"next_id": "image1"
-            "/images/Bildschirmfoto_von_2020-07-13_11-03-07.png"
+			},
+			{
+            	"url": "/images/photo_2020-05-02_18-11-21.jpg",
+				"previous_id": "image0",
+				"current_id": "image1",
+				"next_id": "image2"
+			},
+			{
+            	"url": "/images/Bildschirmfoto_von_2020-07-13_20-15-00.png",
+				"previous_id": "image1",
+				"current_id": "image2",
+				"next_id": "image3"
+			},
+			{
+            	"url": "/images/photo_2020-05-02_18-11-21.jpg",
+				"previous_id": "image2",
+				"current_id": "image3",
+				"next_id": "image4"
+			},
+			{
+            	"url": "/images/Bildschirmfoto_von_2020-07-13_11-03-07.png",
+				"previous_id": "image3",
+				"current_id": "image4"
+			}
         ]
     }
 }

components/03_Organisms/imageGrid/imageGrid.hbs

@@ -3,14 +3,28 @@
     <ul class="LP-ImageGrid__Container">
         {{#each images}}
         <li class="LP-ImageGrid__Item">
-            <a href="#" class="LP-Link">
+            <a href="#{{this.current_id}}" class="LP-Link">
-                <img  class="LP-Image" src="{{this}}">
+                <img  class="LP-Image" src="{{this.url}}">
             </a>
             <span class="LP-ImageGrid__DeleteItem" title="Bild löschen">
                 <a href="#" class="LP-Link">
                     <img class="LP-Icon" src="/icons/cancel.svg"/>
                 </a>
             </span>
+			<div id="{{this.current_id}}" class="LP-ImageGrid__LightBox">
+				<img class="LP-ImageGrid__FullSizeImage" src="{{this.url}}" loading="lazy"/>
+				{{#if this.next_id}}
+				<a href="#{{this.next_id}}" class="LP-ImageGrid__Next">Next</a>
+				{{/if}}
+				{{#if this.previous_id}}
+				<a href="#{{this.previous_id}}" class="LP-ImageGrid__Previous">Previous</a>
+				{{/if}}
+				<span class="LP-ImageGrid__Close LP-ImageGrid__DeleteItem" title="Schließen">
+					<a href="#" class="LP-Link">
+						<img class="LP-Icon" src="/icons/cancel.svg"/>
+					</a>
+				</span>
+			</div>
         </li>
         {{/each}}
         <li class="LP-ImageGrid__Item LP-ImageGrid__Item--add" title="Bild hinzufügen">

public/main.css

@@ -723,6 +723,10 @@ body {
   margin: 0;
   padding: 0; }
 
+.LP-Figure {
+  padding: 0;
+  margin: 0; }
+
 .LP-Logo {
   max-width: 100%;
   max-height: 100%;
@@ -1704,6 +1708,54 @@ body {
       top: 7.8125px; }
   .LP-ImageGrid__Item > .LP-Link:hover + .LP-ImageGrid__DeleteItem, .LP-ImageGrid__DeleteItem:hover {
     visibility: visible; }
+  .LP-ImageGrid__LightBox {
+    visibility: hidden;
+    display: none;
+    position: fixed;
+    pointer-events: none;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(86, 86, 86, 0.9);
+    padding: 2rem;
+    padding-bottom: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 30;
+    top: 0;
+    left: 0;
+    box-sizing: border-box; }
+    .LP-ImageGrid__LightBox:target {
+      visibility: visible;
+      display: grid;
+      grid-template-areas: 'picture picture' 'previous next';
+      grid-template-rows: 1fr 4rem;
+      grid-template-columns: 1fr 1fr;
+      pointer-events: initial; }
+  .LP-ImageGrid__FullSizeImage {
+    grid-area: picture; }
+  .LP-ImageGrid__Previous {
+    grid-area: previous;
+    align-self: center;
+    justify-self: end; }
+  .LP-ImageGrid__Next {
+    grid-area: next;
+    align-self: center;
+    justify-self: start; }
+  .LP-ImageGrid__Previous, .LP-ImageGrid__Next {
+    padding: 25px;
+    color: #D7CEC7;
+    text-decoration: none;
+    font-family: "Montserrat", Helvetica, sans-serif;
+    font-weight: bold;
+    font-size: 20px; }
+  .LP-ImageGrid__Close {
+    position: fixed;
+    right: 1rem;
+    top: 1rem;
+    left: unset;
+    visibility: visible;
+    opacity: 1; }
 
 .LP-Map {
   margin-bottom: 25px; }