Jestli s internetovými stránkami pracujete častěji, zajisté jste se už setkali s automaticky generovanými galeriemi obrázků, ať už to byla pěkná auta, obrázky přírody nebo i jiných „objektů“. Tento článek má dva díly. V tom dnešním si popíšeme, jak vygenerovat HTML kód, který bude obsahovat tabulku s obrázky. Neřeší však úpravy obrázků, prostě je budete muset zmenšit a upravit jejich velikost v programech jako Paint Shop Pro, Photoshop apod. Ale pokud je tato činnost na vás příliš namáhavá (stejně tak jako pro mě,) bude se vám líbit pokračování tohoto miniseriálku, kde si uděláme skript, který veškeré problémy s velikostí obrázku vyřeší za nás.

Vraťme se ale na úplný začátek. S čím budeme pracovat? Aby náš skript fungoval, předpokládáme, že ve stejném adresáři, kde je umístěn skript, jsou i adresáře s galeriemi. V adresáři s galerií (tj. obrázky) je ještě adresář „small“, kde jsou zmenšené verze obrázků galerie, tzv. náhledy (thumbnaily). N8hledy mají stejný název jako jejich větší bráškové, ale před jejich jméno je ještě vloženi „small_“. Takže pokud máme například obrázek 01.gif, tak jeho zmenšenina se bude nazývat small_01.gif. Samozřejmě, všechna tato drobná nastavení je možné jednoduše ve skriptu změnit.

Skript, který bude umístěn v souboru funkce.php, budu uvádět po ucelených částech, které budu postupně vysvětlovat. Budete tedy muset jednotlivé části spojit dohromady a umístit je do zmiňovaného souboru funkce.php.

<?
Function ZobrazGalerii($cesta, $cesta_male, $strana = 1, $sirka_tabulky = „100%“, $pocetH = 3, $pocetV = 3)
{
$adresar = OpenDir($cesta); // otevre adresar
$soubor = Array(); // zinicializuje pole
while ($zaznam = ReadDir($adresar)) { // nacte nazev souboru
if (!Is_Dir(„$cesta/$zaznam“)) { // zkontroluje zda neni nazev adresar
$soubor[] = $zaznam; // ulozi do pole soubor
}
}
CloseDir($adresar); // uzavre adresar
Sort($soubor); // srovna nazvy souboru

V této první části si nadefinujeme proměnné a načteme soubory v adresáři. $cesta je název adresáře, ve kterém jsou obrázky určité galerie. $cesta_male je adresář se zmenšenými obrázky. $strana je proměnná, určující číslo stránky, která se má zobrazit. $sirka_tabulky definuje samozřejmě šířku tabulky, buď v procentech nebo v pixelech. $pocetH a $pocetV udává kolik bude sloupců ($pocetH) a kolik bude řádků ($pocetV). OpenDir() otevře adresář, pak postupně pomocí ReadDir() načítáme jména souborů. Ještě než uložíme do pole $soubor název souboru, musíme si být jisti ,že neuložíme nějaký z adresářů, které v aktualním adresáři jsou. Poslední v této části je funkce Sort(), srovná nám názvy podle abecedy.

echo „<table width=$sirka_tabulky class=tabulkagalerie>\n<tr>\n“;
$sloupec = 0;$radka = 1;
$sirka = Floor(100 / $pocetH); // procentualni sirka jednoho sloupce
$obrazek_cislo = ($strana – 1) * $pocetH * $pocetV; // ktery obrazek bude prvni
while ($obrazek = $soubor[$obrazek_cislo]) { // opakuj dokud nevycerpame vsechny obrazky
$sloupec++;
if ($sloupec > $pocetH) { // pokud sloupec prekroci pocet cloupcu,
$sloupec = 1; $radka++; echo „</tr><tr>\n“; // .., tak se vytvori nova radka
}
if ($radka > $pocetV) break; // pokud prekrocime pocet radku, skoncime cyklus
echo „<td width=\“$sirka%\“>“;
echo „<a href=\“$cesta/$obrazek\“>“;
echo „<img src=\“$cesta_male/small_$obrazek\“></a>“;
echo „</td>\n“;
$obrazek_cislo++;
}

Předtím jsme si načetli jména adresářů, teď si je zpracujeme. Vypočítáme šířku sloupce, budeme ji uvádět v procentech, takže stačí vydělit 100 počtem sloupců. Dále vypočítáme číslo prvního obrázku, který budeme zobrazovat, uložíme jej do $obrazek_cislo. Nastupuje cyklus while(), ten zobrazí vlastní tabulku. Vidíme, že jsou v těle cyklu dvě podmínky, které kontrolují jestli počet sloupců a řádků nepřekročil limit. Pokud sloupec překročí svůj limit, nastavíme jeho hodnotu na 1 a začneme nový řádek ( $radka++; ). Pokud počet řádků překročí limit, ukončíme cyklus příkazem break;.

echo „</tr><tr><td colspan=$pocetH align=center>\n“;
$pocet_stran = Ceil( Count($soubor) / ($pocetH * $pocetV) ); // spocitame pocet stran galerie
for ($i=1; $i<=$pocet_stran; $i++) { // cyklus pro zobrazeni navigacni listy
if ($i!=$strana) {
echo „<a href=?strana=$i>$i</a> | „;
} else {
echo „$i | „;
}
}
echo „</td></tr></table>\n“;
}
?>

Poslední část skriptu zobrazí dolní navigační pruh s čísly stránky. Spočítáme $pocet_stran a cyklus for() nám je zobrazí. Podmínka zajišťuje, že se nám nevytvoří odkaz na stránku, na které se právě nacházíme.

Abychom vyzkoušeli funkčnost skriptu, vytvoříme soubor galerie.php:

<html>
<head><title>Galerie</title></head>
<body>
<?
include „funkce.php“; // nacteme knihovnu s funkci
if (!isset($strana)) $strana = 1;
ZobrazGalerii(„galerie1″,“galerie1/small“,$strana); // zobrazi galerii
?>
</body> </html>

No a máme to zasebou, ještě bych rád řekl že styl a parametry tabulky můžeme snadno měnit pomocí CSS kaskádových stylů, v tabulce je definován styl tabulkagalerie, takže můžete do hlavičky HTML přidat: <style> .tabulkagalerie { font-color: #0000FF } </style> apod.

V druhém pokračování tohoto článku si povíme, jak si udělat skript, který nám naši galerii upraví a ubere nám spousty práce se zmenšováním a přejmenováváním obrázků.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

Žádný příspěvek v diskuzi

Odpovědět