Add close link

patches/firefox-lightbox-image-autorotation.patch

@@ -1,96 +0,0 @@
-diff --git a/css/mediaboxBlack.css b/css/mediaboxBlack.css
-index 9213688..752c704 100644
---- a/css/mediaboxBlack.css
-+++ b/css/mediaboxBlack.css
-@@ -38,9 +38,21 @@
- 	-khtml-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
- 	-moz-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
- 	box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
-+	width: 100%;
-+	height: 100%;
- }
- #mbCenter img{
-+	width:auto;
-+	height:auto;
-+	max-width:100%;
-+	max-height:95%;
- 	border-radius: 4px;
-+	image-orientation: from-image;
-+	position: absolute;
-+	margin: auto;
-+	top: 0;
-+	left: 0;
-+	right: 0;
- }
- 
- #mbCenter.mbLoading {
-diff --git a/css/mediaboxWhite.css b/css/mediaboxWhite.css
-index de9d439..832911e 100644
---- a/css/mediaboxWhite.css
-+++ b/css/mediaboxWhite.css
-@@ -38,10 +38,22 @@
- 	-khtml-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
- 	-moz-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
- 	box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
-+	width: 100%;
-+	height: 100%;
- }
- 
- #mbCenter img{
-+	width:auto;
-+	height:auto;
-+	max-width:100%;
-+	max-height:95%;
- 	border-radius: 4px;
-+	image-orientation: from-image;
-+	position: absolute;
-+	margin: auto;
-+	top: 0;
-+	left: 0;
-+	right: 0;
- }
- 
- #mbCenter.mbLoading {
-diff --git a/js/mediabox1.5.4.js b/js/mediabox1.5.4.js
-index 821e599..e47a138 100644
---- a/js/mediabox1.5.4.js
-+++ b/js/mediabox1.5.4.js
-@@ -815,6 +815,16 @@ var Mediabox;
- 		if (mediaType == "img"){
- 			mediaWidth = preload.width;
- 			mediaHeight = preload.height;
-+
-+		// Hack jn@hz6.de: make lightbox squared to make room for the image (that will be properly rotated by the browser [at least FF since v26])
-+		if (mediaWidth > mediaHeight) {
-+                	mediaHeight = mediaWidth
-+		}
-+
-+                if (mediaWidth < mediaHeight) {
-+                	mediaWidth = mediaHeight
-+		}
-+
- 			if (options.imgBackground) {
- 				media.setStyles({backgroundImage: "url("+URL+")", display: ""});
- 			} else {	// Thanks to Dusan Medlin for fixing large 16x9 image errors in a 4x3 browser
-@@ -827,11 +837,14 @@ var Mediabox;
- 					mediaHeight = preload.height = parseInt((mediaWidth/preload.width)*mediaHeight, 10);
- 					preload.width = mediaWidth;
- 				}
-+
- 				if (Browser.ie) preload = document.id(preload);
- 				if (options.clickBlock) preload.addEvent('mousedown', function(e){ e.stop(); }).addEvent('contextmenu', function(e){ e.stop(); });
-+
- 				media.setStyles({backgroundImage: "none", display: ""});
- 				preload.inject(media);
- 			}
-+
- //			mediaWidth += "px";
- //			mediaHeight += "px";
- 		} else if (mediaType == "inline") {
-@@ -973,4 +986,4 @@ Mediabox.scanPage = function() {
- 	});
- };
- 
--window.addEvents({domready: Mediabox.scanPage, resize: Mediabox.recenter}); // to recenter the overlay while scrolling, add "scroll: Mediabox.recenter" to the object
-\ No newline at end of file
-+window.addEvents({domready: Mediabox.scanPage, resize: Mediabox.recenter}); // to recenter the overlay while scrolling, add "scroll: Mediabox.recenter" to the object

patches/firefox-lightbox-image-autorotation.readme

@@ -1,11 +0,0 @@
-You access your MinigalNano exclusively with firefox >v26 (for example 
-on your home server)?
-
-If you apply this patch, the images in the lightbox are properly rotated 
-by the browser itself using the information from the EXIF data.
-
-To fit the images, I made the lightbox squared so there are white 
-stripes either on the sides or the top and the bottom.
-
-Jan
-(jn@hz6.de)

templates/NeoKT.html

@@ -153,6 +153,18 @@
 		.fas {
 			font-size: 2.5em;
 		}
+
+		.closeModal {
+			font-size: 2.5em;
+			font-weight: bolder;
+			text-align: right;
+			margin: 0;
+			padding: 0;
+		}
+
+		.closeModal a {
+			text-decoration: none;
+		}
 	</style>
 </head>
 
@@ -181,7 +193,8 @@
 		<% page_navigation %>
 	</div>
 
-	<div id="modal01" class="w3-modal w3-animate-zoom" onclick="this.style.display='none'">
+	<div id="modal01" class="w3-modal w3-animate-zoom">
+		<p class="closeModal"><a href="#" onclick="closeModal(); return false;">X</a></p>
 		<div class="modal-content">
 			<div id="modal-content-img"><img id="img01"></div>
 			<div id="video01"></div>
@@ -205,13 +218,18 @@
 	<script src="<% gallery_root %>js/lazy.js"></script>
 	<script src="<% gallery_root %>js/script.js"></script>
 	<script>
+		function closeModal() {
+			document.getElementById("modal01").style.display = "none"
+			document.getElementById("video01").innerHTML = null;
+		}
+
 		function onClick(element) {
 			document.getElementById("img01").src = null;
 			document.getElementById("comment01").innerHTML = null;
 			document.getElementById("video01").innerHTML = null;
 			document.getElementById("comment01").innerHTML = element.dataset.desc;
-			document.getElementById("thumburl").innerHTML = "Thumbnail : "+element.firstElementChild.currentSrc;
-			document.getElementById("fullurl").innerHTML = "Full : "+element.href;
+			document.getElementById("thumburl").innerHTML = "Thumbnail : " + element.firstElementChild.currentSrc;
+			document.getElementById("fullurl").innerHTML = "Full : " + element.href;
 
 			if (typeof element.dataset.video !== 'undefined') {
 				document.getElementById("img01").style.display = "none";