Ez a weboldal is elkészült. Ha ehez a szakaszhoz érkeztél, gondolom az oldal technikai részletei, létrejöttének lépései érdekelnek. Nem megyek nagyon mélyen a részletekbe, na nem azért mert szeretek titkolózni, különben is bárki bekukkinthat a weboldal kódjába.
A menü szerkesztéséhez használhatunk div-eket, táblázatot, vagy inline listaelemeket. Div-eket olyan menühöz használok ahol sok a dizájn és képet teszek háttérnek. Hogy szépen álljanak egy vonalba kétoldalt a menüsorok végei, táblázetot alkalmaztam méghozzá kettőt: a menühöz és az almenühöz, hogy mindkettő egyedien legyen felosztva. A megoldás optimális minden böngésző számára, amelyeken figyeltem a weboldalt készítés közben: IE, Firefox, Opera, Chrome.
A menü első sorában a látogató választhatja a képek nézegetését, a bemutatkozót, vagy a Fotóland születésének leírását (jé, pont itt vagyunk).
A nézegetőnek (rendes nevén galéria) alpontjai a második sorban állnak, ahol a megjelenítés változatait láthatjuk. Az almenübe beépített :hover efektus dinamikusabbá teszi a szájtot: gombként mozognak az elemek, klikkelésre ösztönözve a felhasználót. Menüpontoknál a szöveget a kerettel együtt foglaltam a linkbe, hogy könnyűszerrel lehessen kattintgatni. A sötétebb menügomb mutatja pillanatnyi helyzetünket.
A legtöbb látogató szeretné látni a képeket egy helyen ahonnan kiválszt egyet és kinagyítja. Erre való a "Minden kép" gomb és ezt választottam a szájt nyitóoldalának (index.php). Innen a Galériára kattintva egyetlen kép nagy megjelenítéséhez jutunk. Ugyanazt érjük el ha a "Minden kép" oldalon a kívánt képre klikkelünk. Hasonlóan, az "Albumok" egy adott album minden képét mutatja, és ha egzikre rákattintunk, nagyítva látjuk. Ugyanígy, a "Legjobb képek" felsorolja azokat a fotókat amelyek jó szavazatot értek el, 5-től 3,5-ig. Klikkeljünk az egyik képre, és máris látjuk azt teljes nagyságában.
Amikor kinagyítva nézünk egy képet, mellette látjuk kicsiben az előző és következő fényképet, valamint nyilakat a megfelelő irányokba. (Az egész szerkezetet navigátornak neveztem el, eredetileg ékezet nélkül és hol angolul, hol meg románul ejtve.) Sok fényképnézegető weboldalon a navigátor ugyanolyan: Nyomogasd a nyilat és látod kicsiben a fotókat egymás után. Kattints az egyik képre és megjelenik nagyban. Egy kis méricskéléssel és fontolgatással összehoztam, hogy a függőleges állású képek is összhangban táncoljanak a többiekkel. Amikor az utolsó pozícióhoz értünk (mintha a szikla szélére jutnánk) megjelenik egy angyal és figyelmeztet (hogy nehogy leessünk a szakadékba). Ez az utolsó pozíció lehet az összes kép közül az utolsó, vagy az adott album utolsó eleme, esetleg a legjobb képek közül a végső.
De honnan tudjuk, hogy a legjobbak? Nem mi döntünk, hanem a látogatók adják meg, melyik fotó tetszett nekik. Eredetileg a fotónak a szavazata vote=0 és nulla csillaggal láthatjuk. Ha valaki leadja a voksot, a képnek pont annyi csillagja lesz ahányat a látogató adott, ez az első szavazónak a szerencséje. De nem sokáig örülhet ennek, mert jön más és még ad egy jegyet, minekutána a php elkezdi kiszámolni az eredményt eképpen:
- Query által előveszi a vote értékét (az eddigi szavazatok médiája)
- Előveszi a num_votes értékét is (amely megmutatja, hogy hányan szavaztak)
- Aztán jön a matek: eredmény = média * num_votes / (num_votes+1) + value / (num_votes+1); ahol a value az a szavazat amelyet most kaptunk
- PHP-ban ez így néz ki: $media = $media * $num_votes++ / $num_votes + $value / $num_votes;
- Utána a media és a num_votes új értékeit tároljuk az adatbázisban
Természetesen mindezek előtt ellenőriztük a látogató session_id-jét, hogy ne szavazzon kétszer a képre.
A "Magamról" és "Hogyan készült?" cikkeknek arra is van opciójuk, hogy a betűméretet változtassuk. Itt segítségemre volt egy JavaScript funkció amely egy closure-t használ.
Meg vagyok győződve, hogy már az összes képet megtekintetted, de miután elolvastad irományomat, biztos kedvet kaptál hozzá hogy újraböngésszed a gyüjteményt. Ki tudja, lehet, hogy azóta újabb képek lettek feltöltve!
