Na přání jednoho z čtenářů jsem se rozhodl naši obrázkovou galerii trochu vylepšit. Účelem tohoto vylepšení bude změna zobrazení náhledů z nynějšího stylu "pod sebou" na styl "3x3" (tři řady fotografií ve třech sloupcích). Celé vylepšení se týká pouze změny html kódu a změny způsobu výpisu údajů do jednotlivých buňek tabulky.
Začnu základním principem, na němž bude skript postaven. Na žádost se z databáze vybere 9 fotografií + údaje, které se následně v cyklu while() uloží do polí. Pro html kód s obrázky bude pole $pic[] a pro údaje o obrázcích pole $dat[]. Indexy budou začínat od nuly - kvůli tomu si vytvoříme proměnnou $th s počáteční hodnotou 0, kterou umístíme před samotný cyklus. Při každém průchodu cyklem se tato proměnná zvětší o 1 a tím je zajištěno přiřazování indexů prvkům polí.
Náš skript má však zatím jeden nedostatek. Je nutné, aby vždy existovalo 9 prvků v poli. Pokud ale nebude v databázi dostatek obrázků, může se stát, že některé prvky nebudou zastoupeny (nebudou mít hodnotu) a v takovém případě nám skript při pokusu o jejich vypsání ohlásí chybu. Takový případ ošetříme jednoduchým cyklem s podmínkou. Cyklus bude uzpůsoben pro 9 průchodů (pro kontrolu devíti prvků v poli). Podmínka uvnitř říká: "Pokud chybí proměnná s daným indexem, vytvoř ji a dej jí hodnotu (znak pro mezeru)."
Pokud máme všechny proměnné zinicializovány, zbývá už jen navrhnout strukturu tabulky a vypsat do ní obsahy proměnných.
$th = 0;
while ($zaznam = MySQL_Fetch_Array($sql)):
if (($zaznam[hlasovalo] == "0") || ($zaznam[hlasy] == "0")):
$write_width = "0";
else:
$write_width = Round($zaznam[hlasy]/$zaznam[hlasovalo], 2);
endif;
$pic[$th] = "<p style=\"margin-left: 0px; margin-right: 0px;\"><a href=\"#\" onClick=\"op('".$zaznam[src]."', ".$zaznam[wb].", ".$zaznam[hb].");\"><img src=\"images_small/".$zaznam[src]."\" alt=\"\" width=\"".$zaznam[ws]."\" height=\"".$zaznam[hs]."\" border=\"0\"></a></p>";
$dat[$th] = "<p>Width: ".$zaznam[wb]."<br>Height: ".$zaznam[hb]."<br>Size: ".$zaznam[size]." kb</p>\n<!-- Begin Table --><TABLE BORDER=\"0\" CELLPADDING=\"0\" CELLSPACING=\"0\" WIDTH=\"91\" HEIGHT=\"19\">
......
......
......
$th++;
endwhile;
for ($m=0;$m<9;$m++):
if(!$pic[$m] || !$dat[$m]):
$pic[$m] = " ";
$dat[$m] = " ";
endif;
endfor;
echo "<tr><td width=\"150\">".$pic[0]."</td><td width=\"150\">".$pic[1]."</td><td width=\"150\">".$pic[2]."</td></tr>";
echo "<tr><td>".$dat[0]."</td><td>".$dat[1]."</td><td>".$dat[2]."</td></tr>";
echo "<tr><td width=\"150\">".$pic[3]."</td><td width=\"150\">".$pic[4]."</td><td width=\"150\">".$pic[5]."</td></tr>";
echo "<tr><td>".$dat[3]."</td><td>".$dat[4]."</td><td>".$dat[5]."</td></tr>";
echo "<tr><td width=\"150\">".$pic[6]."</td><td width=\"150\">".$pic[7]."</td><td width=\"150\">".$pic[8]."</td></tr>";
echo "<tr><td>".$dat[6]."</td><td>".$dat[7]."</td><td>".$dat[8]."</td></tr>";
|
Těmito úpravami zajistíme, že se obrázky budou vypisovat ve stylu 3x3. Pokud byste chtěli mít na stránce 16 fotografií, jediné co byste museli udělat, je vybrat 16 obrázků z databáze, změnit cyklus for() na 16 průchodů a přidat do tabulky 2 řádky (jeden pro obrázek a druhý pro informace). Dejte si ovšem pozor, aby se vám celá stránka neroztáhla. Nejspíš to bude chtít dělat menší náhledy.
Soubor index.php je ke stažení ZDE.
Pokud si někdo myslíte, že vám na galerii přeci jen ještě něco chybí, můžete mi napsat a já se pokusím seriál rozšířit o další díl. Naschledanou u dalších článků.
Čevelíček Marek
|
