Koppintsuk le az "index7.php" fájlt "index8.php", valamint a "main7.css" fájlt "main8.css" néven és természetesen javítsuk át a rá való hivatkozást!
Szúrjunk be egy új stílusfájl az előző stílusbejegyzés alá! Ebben a fájlban vannak az új menü stílusjegyei:
<link rel='stylesheet' href='css/dropdown-menu.css' />
Helyezzünk el két javascript segédprogramot (pontosabban még csak a rájuk való hivatkozásokat) és a lenyíló menü (dropdown-menu.js) beállításait a </style> alá:
<script type='text/javascript' src='js/jquery-1.10.2.min.js'></script> <script type='text/javascript' src='js/dropdown-menu.js'></script> <script type='text/javascript'> $(function() { $('#menu .dropdown-menu').dropdown_menu({ sub_indicators : true, drop_shadows : true, vertical : true }); }); </script>
Ezek vezérlik a lenyíló menü pontos működését, pl. az egérkurzor ráhelyezésére kinyílik az almenü, az aktuális menüsor más színű lesz (a színt nyilván a "dropdown-menu.css" stílusfájl), stb.
Töröljük ki az <aside> és a </aside> közti részt (minden sort) és helyettesítsük az alábbi sorokkal:
<?php
include('incl/menu8.inc');
?>
<h3>Naptár</h3>
<h3>Névnapok</h3>
<h3>Látogatottság</h3>
A "menu8.inc" tartalmazni fogja a korábbi menürendszert (idevesszük a képlinkeken levő menüelemeket is), alatta pedig előkészítjük a további bővítéseket (csak a címeiket),
Itt az összes fenti (pirossal kiemelt) fájl egybe csomagolva. Bontsuk ki és helyezzük el ezeket a megfelelő könyvtárakba (ha nincs ilyen könyvtár, hozzuk létre a "suli"-n belül)! Katt ide (lecke8.zip)!
Ezután a menüben szereplő menüelemek nagy része működik (kivételek: Kezdőoldal, Tudáspróba, Fényképgaléria).
Nézzük meg a "http://burcsi.hu/" weboldalon egy képkönyvtár felépítését (a fájlnevet írjuk utána): http://burcsi.hu/album/4novenyek/gombak/
A baloldali kép a "gombak" könyvtár tartalmát mutatja:
Utóbbi kicsit részletesebben:
Hozzuk létre az album könyvtárat a "suli"-n belül, ezen belül a "vegyes" könyvtárat, s ezen belül a "00thu" könyvtárat!
Itt egy galéria fájljai egybe csomagolva. Bontsuk ki és helyezzük el ezeket a megfelelő könyvtárakba! Katt ide!
Szúrjuk be a következő PHP programrészletet az "if ($kod=='or') { // Órarendek ... }" modul alá!
if (($kod=='gn') or ($kod=='gl')) {
if ($kod=='gn') $pth = 'http://burcsi.hu/album/4novenyek'; // Fényképgaléria a netről
if ($kod=='gl') $pth = 'album'; // Fényképgaléria a saját gépről
$big = "$pth/$txt"; // nagy képek
$thu = "$pth/$txt/00thu"; // bélyegképek
$sr = file("$big/00.txt"); $db = count($sr); $cim = chop($sr[0]); list($focim,$alcim,$fotos) = explode("|",$cim);
echo"<h2>$focim<br><span style='font-size:80%;'>($alcim)</span></h2>";
for ( $i=1; $i<$db; $i++ ) {
$sor = chop($sr[$i]); list($kn,$ka) = explode("|",$sor); // képnév, képaláírás
echo"<a href='$big/$kn.jpg'><img src='$thu/$kn.jpg' title='$ka' height='125'></a>\n";
}
echo"<p style='padding-right:40px;text-align:right;'>$fotos</p>";
}
Látszik (első három sor), hogy ez a modul kétféleképpen hívható hiszen a fényképalbum képei vagy a neten vagy a saját gépen vannak. Itt dől el a "$kod" alapján a "$pth" alapkönyvtár értéke, majd "$txt" megadja a képek ezen belüli könyvtárát.
A "menu8.inc" fájl egy részlete:
<li>
<a href='#'>Fényképgaléria</a>
<ul>
<li><a href='index8.php?kod=gn&txt=gombak'>Gombák</a></li>
<li><a href='#'>Erdei, mezei virágok</a>
<ul>
<li><a href='index8.php?kod=gn&txt=erdei'>Erdei, mezei virágok</a></li>
<li><a href='index8.php?kod=gn&txt=tozike'>Tőzike a Bakonyban</a></li>
</ul>
</li>
...
<li><a href='index8.php?kod=gl&txt=vegyes'>Vegyes képek</a></li>
</ul>
</li>
A felső kiemelt sorban (index8.php?kod=gn&txt=gombak) a "http://burcsi.hu/album/4novenyek/gombak" képkönyvtár, az alsóban (index8.php?kod=gl&txt=vegyes) a lokális/saját gépen pedig az "album/vegyes" képkönyvtár lesz a kiválasztott fényképalbum.
A nagyképek itt vannak, lásd a "$big = ..." kezdetű sor.
A bélyegképek helye ezen belül a "00thu" képkönyvtár ($thu = ...).
A következő sor ($sr = ...) beolvassa az "$sr" tömbbe a "00.txt" sorait ($db sort), és az elsőt (0.) szétdarabolja a "$focim,$alcim,$fotos" változókba.
Az 'echo"<h2> ...' sor ezekből kiírja a fő- és az alcímet (utóbbit kisebb betűkkel - a "span" egy általános tag, most csak a méretcsökkentés miatt használtuk).
A megszámlálható/for ciklus szétszedi a sorban lévő két adatot képnévre és képaláírásra, s az alatta lévő sor generálja a látható kisképet (<img ...), amelyre kattintva (<a href= ...) megjelenik a nagykép. A kisképre téve az egérkurzort, láthatjuk a képaláírást (title=...).
Ezzel készen van, és működőképes a "Fényképgaléria". Természetesen lehet ennél okosabbat is csinálni, de ahhoz bonyolultabb PHP kód kellene.
Az eredeti album (képaláírással, lapozhatósággal): http://burcsi.hu/lbox.php?dir=4novenyek/gombak