|
|
|
[Code] {PHP&Javascript} Einfaches Fotoalbum IMPROVED
Zurück zur Übersicht
So hier kommt die verbesserte Version des Fotoalbums.
Wichtig hierbei: Es sammelt alle bilder in einem album.
Das es verschiedene Alben gibt, kommt später, und auch nur wenn es die Nachfrage dafür gibt.
------gallery.php-----
Als erstes müssen wir in die Datei einen config Bereich einbauen.
Der kommt vor allem anderen in das Dokument.
| 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:
|
<?php
//***************************************//
// Config bereich //
//***************************************//
if(!isset($_GET["seite"]))//Wenn man keine Seite angegeben hat, ist man automatisch auf Seite 1
{
$seite = 1;
}
else
{
$seite = $_GET["seite"]; //Abfrage auf welcher Seite man ist
}
//***************************************//
require_once ('dbconnect.php');
$link = mysql_connect("$host","$dbuser","$dbpw") or die ("Keine Verbindung moeglich");
mysql_select_db("$dbnum") or die ("Die Datenbank existiert nicht");
//***************************************//
//Einträge pro Seite: Hier 12 pro Seite
$eintraege_pro_seite = 12;
//Verzeichnis in denen sich die Bilder befinden
$dir = "pictures";
//Zählwert auf 0 setzen
$count = 0;
$count_max = 4;
//***************************************//
?>
|
|
Das erste ist wichtig, für die Blätterfunktion des Fotoalbums. Als zweites wird die Datenbank verbindung eingebunden. Und als drittes werden einige Variablen festgelegt.
Nun kommt der HTML Bereich bis zum Bodytag.
Dieser Abschnitt ist wichtig, da er die Javascripte und CSS Dateien enthält.
| Code |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="milkbox/mootools-1.2.1-core-yc.js"></script>
<script type="text/javascript" src="milkbox/mootools-1.2-more.js"></script>
<script type="text/javascript" src="milkbox/milkbox.js"></script>
<link rel="stylesheet" type="text/css" href="milkbox/milkbox.css" />
<title>Little Gallery</title>
</head> |
|
Wie ihr seht, braucht ihr einen Ordner namens milkbox und die dazugehörigen Dateien.
Keine Angst, die gibt es am Ende dieses Tutorials zum runterladen.
Einmal als einzelpaket und einmal als Komplettes Script paket.
Nun kommt der Body Teil des Dokumentes. Ich werde erstmal nur den Fotoalbum-Ausschnitt hier posten.
| 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:
76:
|
<body>
<div class="highslide-gallery" style="margin: auto">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<?php
//**************************************//
// Rechnungen //
//**************************************//
$start = $seite * $eintraege_pro_seite - $eintraege_pro_seite; //Ausrechen welche Spalte man zuerst ausgeben muss
//**************************************//
//**************************************//
// Abfragen & Ausgabe //
//**************************************//
$abfrage = "SELECT * FROM images ORDER BY id ASC LIMIT $start, $eintraege_pro_seite";
$ergebnis = mysql_query($abfrage) OR die("Error: $abfrage <br>".mysql_error());
while($row = mysql_fetch_object($ergebnis))
{
if ($count == 0)
{
echo '<tr>'."\r\n";
}
echo '<td>'."\r\n";
//Hier wird der String erstellt der, den Kern ausmacht.
//Er ist in mehrere Abschnitte unterteilt, damit er leichter editierbar ist.
$display = '<a href="';
$display .= $dir;
$display .= '/';
$display .= $row->name;
$display .= '" rel="milkbox[gall1]"';
$display .= ' title="';
$display .= $row->beschreibung;
$display .= '">'."\r\n";
$display .= '<img src="';
$display .= $dir;
$display .= '/';
$display .= $row->name;
$display .= '"';
$display .= ' width="100"';
$display .= ' height="100"';
$display .= ' alt="';
$display .= $row->alt;
$display .= '"></a>'."\r\n";
echo $display;//Den gesamten String ausgeben
$display = "";//Display wieder auf "leer" setzen
echo '</td>'."\r\n"; //Die Ausgabe eines Bildes beenden
$count = $count + 1; //Den Zähler um 1 erhöhen
if ($count == $count_max) //Wenn der Zähler $count_max erreicht erhält, soll er einen Umbruch machen und den Zähler wieder auf 0 setzen.
{
echo '</tr>'."\r\n";
$count = 0;
}
}//Ende der Whileschleife
if ($count != 0 OR $count != $count_max) //Wichtig, falls die Angaben nicht exakt aufgehen
{
echo '</tr>'."\r\n";
echo '<!-- frühzeitiger Umbruch -->'."\r\n";
}
echo '</table>'.'<br>'."\r\n"; //Ende der Tabelle
?>
|
|
Das mag jetzt ein wenig wuchtig aussehen, ist aber ansich sehr leicht.
Erst wird kurz der Inhalt der Seite näher struckturiert und dann wird das Fotoalbum generiert.
Als erstes wird eine kurze Rechnung durchgeführt. Die benötigen wir aber erst am Ende.
Dann kommen die Abfragen. Hier wird über einen Zähler ($count) die Anzeige gesteuert. Dieser Zähler ist von Nöten um die einzelnen Elemente des Bodys richtig anzuzeigen.
Die Kommentare sollten den Rest erklären. Ansonsten einfach nachfragen.
Nun kommt noch das Inhaltsverzeichnis des Bodys.
Dieser Teil ist aus einem anderem Codeschnipsel von dieser Seite übernommen.
| 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:
|
<?php
//Jetzt kommt das "Inhaltsverzeichnis",
//sprich dort steht jetzt: Seite: 1 2 3 4 5
//Wieviele Einträge gibt es überhaupt
//Wichtig! Hier muss die gleiche Abfrage sein, wie bei der Ausgabe der Daten
//also der gleiche Text wie in der Variable $abfrage, bloß das hier das LIMIT fehlt
//Sonst funktioniert die Blätterfunktion nicht richtig,
//und hier kann nur 1 Feld abgefragt werden, also id
$result = mysql_query("SELECT id FROM images");
$menge = mysql_num_rows($result);
//Errechnen wieviele Seiten es geben wird
$wieviel_seiten = $menge / $eintraege_pro_seite;
//Ausgabe der Seitenlinks:
echo "<div align=\"center\">";
echo "<b>Seite:</b> ";
//Ausgabe der Links zu den Seiten
for($a=0; $a < $wieviel_seiten; $a++)
{
$b = $a + 1;
//Wenn der User sich auf dieser Seite befindet, keinen Link ausgeben
if($seite == $b)
{
echo " <b>$b</b> ";
}
//Aus dieser Seite ist der User nicht, also einen Link ausgeben
else
{
echo " <a href=\"?seite=$b\">$b</a> ";
}
}
echo "</div>";
?>
|
|
Als letztes wird nun noch der HTML Teil geschlossen und fertig ist das Dokument.
| Code |
1:
2:
3:
4:
|
</div>
</body>
</html> |
|
So jetzt merken einige vielleicht, das noch was fehlt.
Nämlich die dbconnect.php
| PHP |
1:
2:
3:
4:
5:
6:
7:
8:
|
<?php
$host = "localhost";
$dbuser = "root"; //benutzername
$dbpw = ""; //Passwort
$dbnum = "local"; //Datenbank
?>
|
|
Das ist alles.
Und nun braucht ihr noch die Datenbank.
Wenn man sich den Code oben anguckt, würde man schon drauf kommen.
Die Datenbank heist 'images' diese hat insgesamt 4 Felder.
-'id'
-'name'
-'beschreibung'
-'alt'
Die ID wird benötigt um das Inhaltsverzeichnis und das Fotoalbum sortiert anzuzeigen.
Der name ist der name der Datei. WICHTIG: bsp. „sun.jpg“ wäre ein eintrag. Also immer die Endung mit dazu schreiben.
Die Beschreibung taucht hier bei den einzelnen Bildern, als Bildunterschrift auf.
Wie im Beispiel wäre es dann. „Die wunderschöne Sonne über den Bergen“
'alt' ist der Text, falls ein Bild nicht gefunden wird oder Leute mit einer behinderung sich eure Seite ansehen wollen.
---
So, damit ist auch das geklärt.
Abschließend kommen noch ein paar wichtige Informationen.
1)Wenn ihr Fragen stellt, bitte NICHT einfach euren veränderten Code hinklatschen, sondern ihn uns auch erklären.
2)Wenn einer hier meckert und sagt 'öh wie scheiße' oder so, soll er es besser machen und einen eigenen Thread eröffnen.
3)Ansonsten nehme ich Fragen und Anregungen gerne auf und freue mich über eure Kommentare.
Demo:
http://vielgeist.bplaced.net
Download:
http://vielgeist.bplaced.net/fotoalbum_vielgeist.rar
Also,
VIEL SPAß
Kommentare
Zurück zur Übersicht
Autor Vielgeist
|
|
|
|
