Bildergalerie mit PHP/JavaScript

Klombert · 02.06.2003

Ich möchte eine Bildergalerie auf meiner Webseite erstellen, was mir zum Teil auch schon gelungen ist. Dabei lese ich mit PHP eine Datei aus und gebe die gefundenen Bilder als Thumbnails in einer Tabelle aus.
Jetzt möchte ich, wenn eines der Thumbs angeklickt wird oder beim mouseover, dass dieses Bild in der normalen Größe in einer anderen Tabellenzeile angezeigt wird. Das die Bilder in einem neuem Browserfenster angezeigt werden, habe ich schon hinbekommen. Ist aber nicht das was ich möchte und ich möchte nicht mit Frames arbeiten.

Danke

BeyondTheSilence · 02.06.2003

Setze auf die Thumb-Bilder ein->onmouseover'-Event und schreibe eine entsprechende JavaScript-Function, die das grosse Bild an der vorgesehenen Stelle öffnet:
z.b.

Code:

html>
<head>
<script language=JavaScript>
<!--
function showImg(BildName)
{
window.document.images[BigBild].src=./ + BildName;
}
// -->
</script>
</head>
<body>
<table width=100%>
<tr>
<td><img src=thumb1.jpg onmouseover=showImg('Bild1.jpg'); height=50></td>
<td><img src=thumb2.jpg onmouseover=showImg('Bild2.jpg'); height=50></td>
<td><img src=thumb3.jpg onmouseover=showImg('Bild3.jpg'); height=50></td>
<td><img src=thumb4.jpg onmouseover=showImg('Bild4.jpg'); height=50></td>
</tr>
<tr>
<td colspan=4><img src= name=BigBild></td>
</tr>
</table>
</body>
</html>

Das Script öffnet das angegebene Bild (BildName) im dafür vorgesehenen Bild (BigBild).

Klombert · 02.06.2003

Das Beispiel ist soweit ganz gut. Ich bekomme aber das zusammenspiel zwischen PHP und JavaScript nicht hin. Wie kann man das denn kombinieren? Der Aufruf der Funktion will nicht klappen. In folgender Zeile gebe ich die Thumbs aus:
echo <img width=\120\ height=\70\ src=\images/$datei\>\n;

Ich erzeuge ja eine dynamische Tabelle mit Thumbs, indem ich ein Verzeichnis auslese. Die Bilder sind nur einmal vorhanden, in der Originalgröße und werden lediglich verkleinert dargestellt.

BeyondTheSilence · 03.06.2003

Code:

echo <img width=\120\ height=\70\ src=\images/$datei\ onmouseover=\showImg('$datei')\>\n;

JavaScript hat auch mit PHP nichts zu tun. Die JS-Funktion wird wie der restliche HTML-Code mit PHP-Echo erzeugt.

Lenzi · 03.06.2003

schau mal ob du hier was findest...
http://www.dynamicdrive.com/dynamicindex14/index.html

Michael · 03.06.2003

Hi

Probier evtl. mal:

Code:

&lt;script language=JavaScript>
&lt;!--
function showImg(BildName)
{
   window.document.images[4].src=./ + BildName;
}
// -->
&lt;/script>

Gruß, Michael

Klombert · 06.06.2003

Soweit habe ich es hinbekommen und es funktioniert wunderbar. Allerdings habe ich jetzt ein anderes Problem bemerkt. Es können nicht alle Bilder angezeigt werden.
Gewisse Bilder werden nicht angezeit, egal in welchem Verzeichnis sie sind. Sie werden aber erkannt und als Platzhalter angezeigt. Unter Eigenschaften/rechte Maustaste wird auch der korrekte Link angezeigt. Selbst beim Mouseover. Folgendes Script habe ich genommen, ist dort ein Fehler?

<script language=JavaScript>

</script>

<form action=<? $PHP_SELF ?> method=post name=form1 target=_self>
<select name=select onChange=this.form>
<option selected>Auswahl1</option>
<option>Auswahl2</option>
<option>Auswahl3</option>
<option>Auswahl4</option >
<option>Auswahl5</option>
</select>
<input name=btn_Abschicken type=submit id=btn value=Abschicken>
</form>
<?
echo <table border=2 align=center>;
$verz = images\\;
$ausw1 = $select;
$ausw2 = $verz . $ausw1;

echo Es wurde $select gewählt!<br>;
// Der Ordner wird geöffnet
$inputdir = opendir ($ausw2);
$pattern = .|..;
// Eine Schleife - Alle Dateien werden gelesen
echo <tr>;
while ($datei = readdir ($inputdir))
{
// Ist die Prüfung durch den Filter erfolreich?
if (ereg($datei,$pattern))
{
echo <td>;
// Ausgabe des korrekt formatierten Links
echo <img width=\120\ height=\70\ src=\images/$datei\ onmouseover=\showImg('$datei')\>\n;
echo </td>;
}
} # end while
echo </tr>;
closedir ($inputdir);
echo </table>;
?>

<table border=4 align=center>
<tr>
<td colspan=4><img src=\images/ name=BigBild></td>
</tr>
</table>
</table>
</body>
</html>

BeyondTheSilence · 06.06.2003

Werden diese->gewissen Bilder' korrekt angezeigt, wenn du die URL direkt im Browser angibst ?
http:// ..... .... .... /images/...jpg

Klombert · 06.06.2003

Das Problem mit den Bildern ist gelöst, es saß mal wieder vor der Tastatur 8)
Das Problem ist jetzt nur noch, das ich im JavaScript Teil auch die Auswahl z.B. Auswahl2 übergeben muss. Daraus setzt sich die Verzeichnisstrucktur zusammen.

BeyondTheSilence · 10.06.2003

Da deine Bildergalerie pro Auswahl neu geladen wird, kannst du die->Auswahl' als globale JavaScript-Variable definieren:

Code:

echo var Auswahl=$ausw2

oder so ähnlich. Dann kannst du im JavaScript auf diese Variable zurückgreifen, ohne die Auswahl an die Funktion zu übergeben ...

Code:

<script language=JavaScript>
   <!--
   function showImg(BildName)
   {
      window.document.images[BigBild].src = Auswahl + BildName;
   }
   // -->
</script>

Bildergalerie mit PHP/JavaScript

Klombert

BeyondTheSilence

Klombert

BeyondTheSilence

Lenzi

Michael

Klombert

BeyondTheSilence

Klombert

BeyondTheSilence

Bildergalerie mit PHP/JavaScript

ANGEBOTE & SPONSOREN

Neueste Themen

Statistik des Forums