Javascript-forum - Funktion um ein Bild anzuzeigen

Javascipt kann Dinge, die PHP nicht kann. Und ich kann Javascript nicht. Darum frage ich hier um Hilfe:
Ich brauche eine Funktion, die eine Abbildung so anzeigt, wie HTML es mit der Anweisung "<img class='full' src='foto.jpg'>" tun würde.
Wie sollte ich den folgenden Code ergänzen, um das zu erreichen?

Code:
<style>

img.full {

  position:   fixed;

  object-fit: contain;

  width:      calc(100% - 80px);

  height:     100%;

  }

</style>

<script>

  function picture($pic)

  {

  }

</script>

<?php

  $file="foto.jpg";

  echo "<button onclick='picture($file)'>Click</button>";

?>

Moin Pilow,
leider sind da etliche Gedankenfehler drinne, aber ich werde das ganze mal für dich ordnen und Beisspielscripte basteln.

PHP-Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bild anzeigen</title>
    <style>
        img.full {
  position:   fixed;
  object-fit: contain;
  width:      calc(100% - 80px);
  height:     100%;
  }
    </style>
    <script>
        'use strict';
        var myButton;
        document.addEventListener('DOMContentLoaded', function() {
            myButton = document.getElementById('myButton');
            myButton.addEventListener('click', () => {
                let myPic = document.createElement('img');
                myPic.src = myButton.dataset.file;
                myPic.classList.add('full');
                document.body.appendChild(myPic);
            });
        });
    </script>
</head>
<body>
    <?php
        $file = "foto.jpg";
        echo "<button id=\"myButton\" data-file=\"".$file."\">";
    ?>
</body>
</html> 

VG

rzscout

Vielen Dank für die Hilfe. Ich habe nur eine kleine Änderung vorgenommen:

Code:
echo "<button id=\"myButton\" data-file=\"".$file."\">X</button>";   

Gefallen hat mir, dass ich den Image-Style außerhalb des Scripts ändern kann. Und so habe ich auch gleich ein Fade-in mittels Keyframes eingebaut.
Erstaunt hat mich allerdings, dass in Postscript so viele Anweisungen nötig sind.

Nun habe ich doch noch ein Problem entdeckt: Mehrere Klicks auf verschiedene Bilder funktioniert nicht. Ich hab's mit folgendem Code probiert, aber nur der Klick auf -1- zeigt ein Bild an:

PHP-Code:
  $file = "foto1.jpg";
  echo "<button id=\"myButton\" data-file=\"".$file."\">-1-</button>";
  $file = "foto2.jpg";
  echo "<button id=\"myButton\" data-file=\"".$file."\">-2-</button>"; 