Add close modal on cliking img

Hide link by default

index.php

@@ -62,8 +62,7 @@ if (!function_exists('exif_read_data') && $display_exif == 1) {
 //-----------------------
 // FUNCTIONS
 //-----------------------
-function padstring($name, $length)
+function padstring($name, $length) {
-{
     global $label_max_length;
     if (!isset($length)) {
         $length = $label_max_length;
@@ -74,8 +73,7 @@ function padstring($name, $length)
     return $name;
 }
 
-function getfirstImage($dirname)
+function getfirstImage($dirname) {
-{
     $imageName  = false;
     $extensions = array("jpg", "png", "jpeg", "gif", "bmp");
     if ($handle = opendir($dirname)) {
@@ -98,8 +96,7 @@ function getfirstImage($dirname)
     return $imageName;
 }
 
-function parse_fraction($v, $round = 0)
+function parse_fraction($v, $round = 0) {
-{
     list($x, $y) = array_map('intval', explode('/', $v));
     if (empty($x) || empty($y)) {
         return $v;
@@ -113,8 +110,7 @@ function parse_fraction($v, $round = 0)
     return round($x / $y, $round);
 }
 
-function readEXIF($file)
+function readEXIF($file) {
-{
     $exif_arr  = array();
     $exif_data = exif_read_data($file);
 
@@ -150,8 +146,7 @@ function readEXIF($file)
     return $exif_arr;
 }
 
-function checkpermissions($file)
+function checkpermissions($file) {
-{
     global $messages;
 
     if (!is_readable($file)) {
@@ -162,13 +157,12 @@ function checkpermissions($file)
     }
 }
 
-function guardAgainstDirectoryTraversal($path)
+function guardAgainstDirectoryTraversal($path) {
-{
     $pattern             = "/^(.*\/)?(\.\.)(\/.*)?$/";
     $directory_traversal = preg_match($pattern, $path);
 
     if ($directory_traversal === 1) {
-        die("ERROR: Could not open " . htmlspecialchars(stripslashes($current_dir)) . " for reading!");
+        die("ERROR: Could not open " . htmlspecialchars(stripslashes($path)) . " for reading!");
     }
 }
 
@@ -199,7 +193,7 @@ if (is_dir($current_dir) && $handle = opendir($current_dir)) {
     if (is_readable($caption_filename)) {
         $caption_handle = fopen($caption_filename, "rb");
         while (!feof($caption_handle)) {
-            $caption_line = fgetss($caption_handle);
+            $caption_line = fgets($caption_handle);
             if (empty($caption_line)) {
                 continue;
             }
@@ -363,7 +357,8 @@ if (is_dir($current_dir) && $handle = opendir($current_dir)) {
                 $imgParams = http_build_query(
                     array('filename' => "$thumbdir/$file", 'size' => $thumb_size),
                     '',
-                    '&');
+                    '&'
+                );
                 $imgUrl = GALLERY_ROOT . "createthumb.php?$imgParams";
                 if ($lazyload) {
                     $imgopts = "class=\"b-lazy\" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src=\"$imgUrl\"";
@@ -381,7 +376,8 @@ if (is_dir($current_dir) && $handle = opendir($current_dir)) {
                             <img ' . $imgopts . ' alt="' . $label_loading . '" class="w3-round" />
                         </a>' . $filename_caption . '
                     </p>
-                    </div>');
+                    </div>'
+                );
             }
             // Other filetypes
             $extension = "";
@@ -437,7 +433,8 @@ if (is_dir($current_dir) && $handle = opendir($current_dir)) {
                         <img src="' . GALLERY_ROOT . 'images/filetype_' . $extension . '.png" alt="' . $file . '" width="' . $thumb_size . '" height="' . $thumb_size . '"/>
                         </a>' . $filename_caption . '
                     </p>
-                    </div>');
+                    </div>'
+                );
             }
         }
     }
@@ -508,7 +505,6 @@ if (!$lazyload && $nbDir + $nbFile > $thumbs_pr_page) {
         if ($i != ceil(($nbFile + $nbDir) / $thumbs_pr_page)) {
             //$page_navigation .= " | ";
         }
-
     }
     //Insert link to view all images
     if ($_GET["page"] == "all") {

templates/NeoKT.html

@@ -134,7 +134,7 @@
 		#modal-content-img img,
 		#video01 video {
 			max-width: 98%;
-			max-height: 72vh;
+			max-height: 73vh;
 			padding: 4px;
 		}
 
@@ -145,14 +145,17 @@
 			box-shadow: 0px 5px rgba(89, 0, 46, 0.5);
 			text-align: left;
 			width: 85vw;
-			font-size: .9rem;
 		}
 
 		#comment01 span {
-			font-size: 1rem;
+			font-size: .8rem;
 			font-weight: bold;
 		}
 
+		.modal-content .w3-theme-d3 ul {
+			font-size: .9rem;
+		}
+
 		.fas {
 			font-size: 2.5em;
 		}
@@ -161,13 +164,17 @@
 			font-size: 2.5em;
 			font-weight: bolder;
 			text-align: right;
-			margin: 0;
+			margin: 0 1rem 0 0;
 			padding: 0;
 		}
 
 		.closeModal a {
 			text-decoration: none;
 		}
+
+		.toggle {
+			display: none;
+		}
 	</style>
 </head>
 
@@ -199,12 +206,13 @@
 	<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="modal-content-img" onclick="closeModal(); return false;"><img id="img01"></div>
 			<div id="video01"></div>
 			<div class="w3-theme-d3 w3-shadow">
 				<p id="comment01"></p>
 				<p>
-					<ul style="text-align: left;">
+					<a href="#" id="toggle">View sharelink</a>
+					<ul style="text-align: left;" id="shareLink">
 				<li id="thumburl"></li>
 				<li id="fullurl"></li>
 				<li id="markdown"></li>
@@ -226,9 +234,16 @@
 	<script src="<% gallery_root %>js/lazy.js"></script>
 	<script src="<% gallery_root %>js/script.js"></script>
 	<script>
+document.querySelector('#shareLink').classList.toggle('toggle');
+document.querySelector('#toggle').onclick = function() {
+	console.log('here');
+	document.querySelector('#shareLink').classList.toggle('toggle');
+}
+
 		function closeModal() {
 			document.getElementById("modal01").style.display = "none"
 			document.getElementById("video01").innerHTML = null;
+			document.getElementById("img01").src = null;
 		}
 
 		function onClick(element) {