<!DOCTYPE html>
<html>
<head>
<title>Gallery Images</title>	
<style>
img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
  }

div.desc {
  margin: 5px;
  text-align: center;
  float: left;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 200px;
  }
  
</style>

</head>

<body class="container">

 <?php
 $siteName = basename($_SERVER['SERVER_NAME']) ;
 
 $files = glob('images/*'); //get all file names
 $m = count($files,GLOB_BRACE) ;
 echo "<h3>Total Images: $m <h3>" ;

 for ($x = 0; $x < $m; $x++) {
	
    /* echo $x . " -- " .$files[$x] . "<br>" ; */
	
	/* echo " <img src=\"$files[$x]\" > $files[$x] " ; */
	
	
	echo " <div class=\"desc\">
         <div> <a target=\"_blank\" href=\"$files[$x]\"> <img src=\"$files[$x]\" alt=\"Cinque Terre\" ></a>
         <div>
		 <input type=\"text\" id=\"$x\" value=\"http://$siteName/qodorate/app/user/icon/$files[$x]\">
		 <button onclick=\"myFunction($x)\">Copy text</button> 
		 </div> </div> </div> ";
		 

 }

?>
		 
<script>
function myFunction(idInput) {
  var copyText = document.getElementById(idInput);
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
  alert("Copied the text: " + copyText.value);
}
</script>


</body>
</html>