This forum uses cookies

Pilow · 08.03.2023, 13:03 - Wörter:

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?

<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>";
?>

***rzscout*** · 09.03.2023, 13:39 - Wörter:

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

<!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

Pilow · 11.03.2023, 13:41 - Wörter:

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

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.

Pilow · 14.03.2023, 12:55 - Wörter:

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:

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

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken