OnClick: Bildwechsel

abiNullDreist

Grünschnabel
huhu!

Folgendes:
Ich habe eine Tabelle mit 2 Spalten. In der rechten, kleineren Spalte werden per PHP alle Bilder eines bestimmten Ordners gelesen, verkleinert ausgegeben und automatisch mit einem Link versehen, der diese Bilder dann per include in vergrößerter Form in der linken Spalte öffnet.
Jetzt ist meine Frage, ob es die Möglichkeit gibt, diesen Vorgang weiterhin vollkommen automatisiert ablaufen zu lassen, allerdings mit dem Unterschied, dass beim Klick auf ein Thumbnail der rechten Spalte nur das Bild in der linken Spalte und nicht die komplette Seite neu geladen wird.

Danke schonmal...
 
Jo, das geht.

Folgendes Beispiel sollte gehen:
PHP:
<img name="oBigImage" src="dummy.png">

[...]

<?php
$sDir        = "./images/";
$iDirHandler = opendir($sDir);

while ($sFileName = readdir($iDirHadler)) {
    if (!is_dir($sFileName) &&
        (substr($sFileName, 0, 6) != "_thumb")) {
        ?><a href="<?php echo $sDir.$sFileName; ?>"
             onClick="window.document.images['oBigImage'].src=<?php
                 echo echo $sDir.$sFileName;
             ?>; return false;"><img 
             src="<?php echo $sDir."_thumb".$sFileName; ?>"></a>
          <br>
        <?php
    }
}
?>

Erklärung: Im angegebenen Verzeichnis befinden sich zusätzlich zu allen Bildern noch Thubmnails von diesen. Um die Thumbnails zu erkennen, fangen deren Dateinamen mit _thumb an.
Wenn das Verzichnis ausgelesen wird, werden zu jedem Bild (ausser zu den Thumbnails) ein Link erstellt, der bei einem Klick das Bild mit dem Attribut name="iBigImage ändert.
Zusätzlich kann man die Bilder noch in einem neuen Fenster oder Tab öffnen.
 
Zuletzt bearbeitet von einem Moderator:
Mal ein gbisschen die javaScript-Fehler anschauen schadet nich!

Code:
//dummy text
        ?><a href="<?php echo $sDir.$sFileName; ?>"
             onClick="window.document.images['oBigImage'].src='<?php
                 echo echo $sDir.$sFileName;
             ?>'; return false;"><img 
             src="<?php echo $sDir."_thumb".$sFileName; ?>"></a>
          <br>
        <?php
 

Neue Beiträge

Zurück