Galerie mit Lightbox JS, Grundlagen

Mithilfe von Lightbox JS kann mit wenig Aufwand eine statische Galerie, in eine Dynamische verwandelt werden.
Wenig Code reich aus um das Script zu erweitern und an alle erdenklichen Lösungen anzupassen.
Auf den ersten Blick stechen drei verschiedene Lösungsansätze ins Auge:

Eine hart codierte Tabelle, in der von Hand, die Anzahl der Bilder eingetragen wird.
Eine Galerie, in der mittels einer codierten Anweisung, der Applikation die Anzahl der Bilder zählt und an die darstellende Tabelle übergibt. Bei dieser Lösung werden die Bilder mit einem HTTP-Upload-Formular in den Bilderordner hochgeladen.
Eine dynamische, datenbankabhängige Galerie inklusive einer kompletten Adminoberfläche.

Unabhängig davon, wie die Galerie aufgebaut wird, das Basisscript der Lightbox JS bleibt das Gleiche. Die korrekte Darstellung dynamischer Tabellen mithilfe des Modulo-Operators ist die einzige Hürde, die genommen werden muss.

Modulo-Operator
Der Modulo-Operator ist das Prozentzeichen %. Mit ihm lässt sich der ganzzahlige Rest einer Division bestimmen.
<?php
$rest = 20%7;
echo “Der Rest von 20 durch 7 ist: “.$rest;
// Der Rest ist 6, denn 20 = (2*7)+6 = 14+6
>
Mithilfe des Modulo-Operator kann festgestellt werde ob die Zahl gerade oder ungerade ist (modulo 2). Der Modulo-Operator wird verwendet um Tabellen aus einem Array zu rendern oder Tabellenzeilen abwechselnd einzufärben.

Download: Lightbox 2 JS

Grundcode für die Tabelle

<?php
$anz_bilder = 28; //Anzahl der Bilder in der Galerie
$anz_nebeneinander = 6; //Anzahl der Bilder nebeneinander

echo ‘<table border=”0″ cellpadding=”0″ cellspacing=”0″>’.”\n”;
for ($i = 0; $i < $anz_bilder; $i++); // füllt die Zeilen mit den Bilder
{
if ($i % $anz_nebeneinander == 0)
{
$zeile .= ‘<tr align=”center”>’;
}
$zeile .= ‘<td><img src=”bild.gif” width=”75″ height=”75″></td>’;
if (($i + 1) % $anz_nebeneinander == 0)
{
$zeile .= ‘</tr>’.”\n”;
}
}
// fehlende Zellen auffuellen, <tr> abschliessen
if ($i % $anz_nebeneinander > 0)
{
for ($j = $i % $anz_nebeneinander; $j < $anz_nebeneinander; $j++)
{
$zeile .= ‘<td> </td>’;
}
$zeile .= ‘</tr>’.”\n”;
}
echo $zeile; //Zeilen werden ausgeben
echo ‘</table>’.”\n”;
>

Popularity: unranked

Kommentar schreiben

« Zurück Weiter »

Gedankenblitze