PHP / Tipps / PHP-JavaScript Diashow 1 2 3

von: Werner Zenk

Diese Diashow liest die Bilder aus einem Verzeichnis aus.

• Mit Links kann man Vorwärts- und Rückwärtsblättern.
• Es erscheint ein Ladehinweis wenn die Bilder geladen werden.
• Anzahl der Bilder und Bildbeschreibung für jedes Bild.

Beispiel anzeigen

Zum herunterladen: diashow.zip

Siehe auch: Bilder hochladen - Manuelle Diashow.

Quelltext: „diashow3.php”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75		 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>Diashow 3 (Manuell)</title>

<style type="text/css">
#Ladehinweis{
 font-weight: Bold;
 background-color: #FFFFC6;
 border: Solid 1px #000000;
 padding: 10px;
 width: 320px;
}
</style>

<?php
// Diashow 3 (Manuell)

# Verzeichnis der Bilder
$verzeichnis = "bilder_txt/";

# Dateiendung der Bilder (.jpg, .gif, .png)
$dateiendung = ".jpg";

# Bildbeschreibung
$bildbeschreibung = "bilder_txt/bildbeschreibung.txt";

echo "<script type=\"text/javascript\">
// Diashow 3 (Manuell)
var Bild = new Array();
var Beschreibung = new Array();";

$beschreibung = file($bildbeschreibung);
$anzahl = count($beschreibung);

foreach (glob($verzeichnis . "*" . $dateiendung) as $zaehler => $datei) {
 $info = getImageSize($datei);
 echo "\nBild[$zaehler] = new Image($info[0], $info[1]); Bild[$zaehler].src=\"" . $datei . "\";
Beschreibung[$zaehler]=\"<b>" . ($zaehler+1) . "/$anzahl<\/b> - " . trim($beschreibung[$zaehler]) . "\";\n";
}

echo "
var aktuell = 0, ende = " . $anzahl . ";
function blaettern(richtung) {
 if (aktuell+richtung >= 0 && aktuell+richtung < ende) {
  aktuell += richtung;
  document.getElementById(\"dummy\").src=Bild[aktuell].src;
  document.getElementById(\"dummy\").width=Bild[aktuell].width;
  document.getElementById(\"dummy\").height=Bild[aktuell].height;
  document.getElementById(\"beschreibung\").innerHTML = Beschreibung[aktuell];
 }
 else if (aktuell+richtung >= ende) {
  aktuell = 0;
  document.getElementById(\"dummy\").src=Bild[aktuell].src;
  document.getElementById(\"beschreibung\").innerHTML = Beschreibung[aktuell];
 }
 document.getElementById(\"Ladehinweis\").style.display=\"none\";
}
</script>
";
?>

 </head>
<body onLoad="blaettern(0);">

<div id="Ladehinweis">Die Bilder werden geladen...</div>
<a href="javascript:blaettern(-1);">Zur&uuml;ck</a> &mdash; 
<a href="javascript:blaettern(1);">Vorw&auml;rts</a><br><br>
<!-- Erstes Bild hier eintragen -->
<img src="bilder/001.jpg" id="dummy" border="1" />
<div id="beschreibung"></div>

</body>
</html>


Natürlich funktioniert die Diashow auch ohne PHP, nur mit JavaScript.

Quelltext: „diashow4.htm”   Quelltext anzeigen


Siehe auch » Bildauswahl mit Textanzeige
    Und Ihre Meinung?
      Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?  
Kommentare: 8 » aufmachen   
Sebastian:
Das Bild 003.jpg scheint kaputt zu sein! Man könnte noch einbauen, dass man von 1 Rückwärts geht man zum Bild 7 kommt. Aber vllt. verwirrt das dann auch nur. Sebastian

Werner:
Ich habe das JavaScript entsprechend geändert - Vielen Dank für den Tipp

Casi:
Echt super! Nur schade das man die diashow3.zip nicht runterladen kann. Ich bekomme immer nur 1-2 ( die laufen auch) aber ich möchte doch 3.Kann mir einer Helfen???

Werner:
Upps, das war ein kleiner Fehler von mir (habe den falschen Link eingebaut).

Casi:
Danke! Jetzt habe ich noch eine Frage, haut alles hin bis auf das er Bild 1 nicht anzeigt er schreibt nur Die Bilder werden geladen... drückt man auf Vorwärts und wieder Zurück dann ist das erste Bild da. Was kann ich da machen?MfG Casi

Werner:
Ich habe die Diashow nochmals angepasst. Im Script muss jetzt zusätzlich das erste Bild eingetragen werden.

Casi:
Danke hat super geklappt!Eine Frage habe ich noch, die Diashow 1 oder 2 konnte ich in einen Layer machen, warum geht das bei der Diashow 3 nicht mehr? Geht das überhaupt? Danke nochmal für deine Geduld! MfG Casi

Werner:
Das geht sicherlich, vielleicht hast du einen Fehler drin

Svenni:
Wie kann ich gif und jpg mischen? Ich habe schon rummprobiert, aber es läuft nur jeweils eine Art, oder es geht garnichts mehr.

Werner:
Am besten mit einem Bildbearbeitungsprogramm im .jpg oder gif formatieren.

Jürgen:
Habe die diashow3 auch problemlos auf meiner Seite eingebaut, allerdings bekomme ich die Validierung als XHTML 1.0 Transitional leider nicht ganz hin. In dieser Zeile: if (aktuell+richtung >= 0 && aktuell+richtung ! ende) { gibt er mir 3 Fehler und 3 Warnungen aus. Hoffe Ihr könnt mir weiterhelfen. MfG Jürgen.

Werner:
Und welche Fehler gibt er denn aus?? Der Valitator von http://validator.w3.org/ zeigt nur drei Warnungen an.

Alter Schwede:
Hallo Werner, danke! Das hat mir sehr weitergeholfen. Ich werde dich als Urheber der Diashow auf meiner Seite erwähnen und verlinken.Gruß aus Schweden!

Oliver:
Wolle gerade Dein Beispiel herunterladen. Die Datei 'diashow3.zip' kann leider nicht runterladen werden. Falsche Verlinkung.

Werner:
Ich habe die Falsche Verlinkung geändert - Vielen Dank!
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!  
 Das könnte Sie interessieren:
Datei mit der höchsten Nummer in einem Verzeichnis ermitteln  IP-Sperre  Datumsformat in ein deutsches Datum umwandeln  Datum ab einem bestimmten Tag ausgeben  Mit PHP schreiben und lesen (11) - Erster Eintrag in eine MySQL-Datenbank - Ein einfaches Beispiel wie sich eine Linkliste mit einer MySQL-Datenbank realisieren lässt. Mit Demo zum herunterladen.  PHP-Version überprüfen - Oft gibt es in neueren PHP-Versionen neue Befehle und Funktionen, diese führen bei älteren PHP-Versionen zu Fehlermeldungen. Mit diesem Script kann man eine Umleitung einbauen.  Fehlermeldungen - Vermeidung von PHP-Fehlermeldungen. Liste von Fehlermeldungen und Warnungen.  Array in einer Datei speichern und wieder auslesen  Gästebuch  Cookie Sperre  Begrüßung der Besucher - Begrüßung der Besucher nach der Tageszeit.  Datei Löschen  …mehr
© 2000-2012 Homepage-Total.de Kontakt - Impressum - Banner