images aus Ordner per js handler einzeln vergrössert anzeigen lassen

rernanded

rernanded

Erfahrenes Mitglied
Hi
hier mein derzeitiger Code:
PHP: 
<head>
<style>
.statementsimgs{
width: 300px;
height: 424px;
</style>
<script>
function bigger() {
    document.getElementById('statementimg').style.cssText = 'width:600px;height:848px;';
}
</script>

</head>
<body>
<?php
    $pfad = "images/{*.jpg,*.png,*.gif}";
    $imgarray = glob($pfad, GLOB_BRACE);
    shuffle($imgarray); // ZUFALLSGENERIERUNG
    foreach ($imgarray as $img) {
       echo '<a href="#" onclick="bigger();"><img class="statementsimgs" id="statementimg" src="' . $img . '" alt=""></a>';
    }
?>
</body>

Beim onclick wird lediglich immer nur das erste Bild vergrössert. Wie krieg ich es hin, dass ich jedes Bild mit onclick vergrössern kann? Liegt die Lösung im js oder im php?

MONI
 
Du vergibst die ID "statementimg" mehrfach, was nicht valide ist.
Außerdem suchst du in der Funktion "bigger" das Element mit getElementById was nur immer das erste Element mit der gesuchten ID zurück gibt.

Es gibt nun einige Möglichkeiten, den Code zu fixen. Ein einfacher Weg wäre es, document.getElementById('statementimg') durch this.querySelector(".statementsimgs") zu ersetzen und damit das Element relativ zu dem geklickten Element zu suchen.
 
@rernanded
Stimmt. Ich hatte mich gestern geirrt. Entschuldigung. In einer Funktion, die durch einen inline event Handler aufgerufen wird, zeigt this auf das Window Objekt.
Wenn du deine Inline Handler nicht umbauen möchtest, könntest du den Call so umschreiben:
bigger(this) (Hier ist this das aktuelle Objekt.) und deine Funktion so umschreiben:
Javascript: 
function bigger(aElement) {
    aElement.querySelector('.statementsimgs').style.cssText = 'width:600px;height:848px;';
}
(das Argument this aus dem Aufruf wird hier als aElement wieder aufgenommen.)

Ich würde dir allerdings empfehlen, deinen Handler mit addEventListener zu registrieren. Damit hast du viel mehr Möglichkeiten und musst die Handler nicht in PHP hinzufügen.
 
Du verwendest als "Button" ein LInk mit href="#" da hier das Sprungziel leer ist, landest du oben auf der Seite.
Schau' dir mal diese Seite an: Seiten interne verweise

wenn du hier keinen Link benötigst, verwende einfach einen <button> mit type="button"
 
Hi Moni,

du kannst das onClick-Event auch direkt auf dem Bild ausführen. Damit entfällt das nicht notwendige umschließende Element und das Bildobjekt kann der Funktion bigger als Argument übergeben werden.

Beispiel (ungetestet):
HTML: 
<head>
<style>
.statementsimgs{
    width: 300px;
    height: 424px;
}
</style>
<script>
function bigger(img) {
   img.style.cssText = 'width:600px;height:848px;';
}
</script>

</head>
<body>
<?php
    $pfad = "images/{*.jpg,*.png,*.gif}";
    $imgarray = glob($pfad, GLOB_BRACE);
    shuffle($imgarray); // ZUFALLSGENERIERUNG
    foreach ($imgarray as $img) {
       echo '<img class="statementsimgs" onclick="bigger(this);" src="' . $img . '" alt="" />';
    }
?>
</body>
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück