Window to select image of a location on the server

Question

My problem is this: I have a page where I must select an image to be displayed on the screen. These images are in a specific directory that will stay on the server. Currently, I am calling the images randomly and displaying on the screen, however, I want to call these images in a way that opens a window displaying the images from that directory so that I can choose the image and click on the screen. The code of the js page is these:

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <h1 class="page-header">
        <table width="400px" border="0">
            <tr>
                <td>
                    <input type="image" name="selectImage" src="../layout/imagens/Abrir.png" onClick="image()">
                </td>
            </tr>
        </table>
    </h1>
    <div id="image"></div>

The js:

function image() {
global_points = new Array();
global_effects = new Array();

random = Math.floor(Math.random() * (17 - 1) + 1);
img = new Image();
img.src = "../radiografias/" + random + ".jpg";
document.getElementById('image').innerHTML = "<img style=\" 
cursor:crosshair\" id='logo' href=\"#\" onmousedown= \"coordenadas(event)\" 
src=\"" +
    img.src + "\" width= 1050 />";
reset();
}

If anyone can help me, I’d really appreciate it.

Answer 1

You will need to create a function that will open the window that will display the images. By clicking on an image, the src will be sent to the function image().

1º. Create the function

function abreJanela(){
   window.open("janela.php", "_blank", "width=600, height=400");
}

You can adjust the properties of the window as you see fit ("width=600, height=400").

2º. Amend the onClick of input to open the window function:

onClick="abreJanela()"

3º. Change the function image() to receive as parameter the image clicked in the window and assign to img.src:

The function should look like this:

function image(imagem) {
   global_points = new Array();
   global_effects = new Array();

   img = new Image();
   img.src = imagem;
   document.getElementById('image').innerHTML = "<img style=\" cursor:crosshair\" id='logo' href=\"#\" onmousedown= \"coordenadas(event)\" src=\"" +       img.src + "\" width= 1050 />";
   reset();
}

Window

Create a file .php (in the example I named janela.php, but you use whatever name you want).

The window file should only have the contents below. The image styles (size, border color etc. vc can adjust as you see fit):

<style>
img{
   height: 100px;
   margin: 5px;
   border: 2px solid #fff;
   cursor: pointer;
}

img:hover{
   border-color: #36F86A;
}
</style>


<?php
// loop para exibir as 17 imagens
for($x=1; $x<=17; $x++){
?>

<img src="../radiografias/<?php echo $x ?>.jpg">

<?php
}
?>

<script>
var imgs = document.querySelectorAll("img");

for(var x=0; x<imgs.length; x++){
   imgs[x].addEventListener("click", function(){

      window.opener.image(this.src); // envia para a função a imagem escolhida
      window.close(); // fecha a janela ao escolher uma imagem

   });
}
</script>