Fotógaléria készítése – HTML5, CSS3, jQuery

Bár én másképp jelenítem meg a fotóim, Galleriffic jQuery scriptet használva, ennek ellenére tetszik a cikked, jó, részletes leírás, és adtál pár ötletet, hogyan fejleszthetném tovább a galériám.

Szép hosszú, tartalmas cikk. Csak második forráskódban a „footer” tag helyett is „header” lett írva.

Köszi, hogy szóltál a footer/header miatt, javítottam a cikkben.

Kár, hogy nem böngésző független :( Bár kidobná mindenki az IE-t.

A header/footer probléma miatt elnézést kérek – késő volt már amikor írtam.

Robert: igen, ez így valóban nem böngészőfüggetlen, de nem sok átalakítás kell hozzá hogy az legyen. Mint írtam is, a tutorial kiindulási alap, ötletet ad egy jobb elkészítéséhez. Ha tehát fogod ezt, és megcsinálod úgy, hogy minden böngészőben jól nézzen ki, és úgy teszed közzé, akkor mondhatni elértem vele a célomat – mert alapul vetted az én ötletemet, és továbbfejlesztetted a saját ötleteid szerint :).

Hi!

Nagyon tetszik a leírás.
Egy új honlapot akarok csinálni és oda szeretném berakni ezt a galériát, de filter és maszkolás nélkül. Tehát megjelennek a képek, és egyre rákattintok, akkor jelenjen meg a galéria. Mit kell kiszednem a javascriptből, hogy működjön?

Előre is köszi a segítséget!

Üdv
Ropesz

Ropesz, köszönöm, örülök hogy tetszik.
Hát ha csak a képeket akarod fancybox-al kinagyítani, akkor jó hírem van, mert a JavaScript-ből az utolsó soron kívül mindent ki lehet törölni :)
A kód legnagyobb része a maszkolással és a filterek beállításával foglalkozik.
Ha végigolvasod figyelmesen a tutorial-t, akkor egyébként sem nehéz kitalálni, hogy melyik részt kell meghagynod.

üdv, és sok sikert a honlapodhoz

Köszi a segítséget! Közben nekem is leesett, hogy csak a vége kell.
Csak az a bajom, ha most rákattintok egy kis képre, akkor a nagy kép az oldal alján jelenik meg, és nem úgy, ahogy a js szerint kellene.

Közben felmerült még egy probléma. Az alap .css fájlban a #wrappernek meg van adva egy háttér, ami mindenhol tökéletesen látszódik, kivéve a galeria.html-ben. Ott csak a header és a menu háttere látszik, a képek alatt nem jelenik meg a háttér, csak a body háttere. A galeria.html-nek is van egy külön .css fájl, amiben a képekhez tartozó formázások vannak. Ha ide próbálom beállítani a hátteret, akkor se látszik. Ha Dreamweaver-ben nézem, akkor látszik a háttér, ha pedig böngészőben akkor nem.

ööö, ezt most abszolút nem értem, bocs :)
– Milyen háttérről beszélünk, milyen oldalon?
– A demo-ban sem a body-nak, sem pedig #pagewrap-nek nincs megadva háttér…
– Mit értesz „alap .css” alatt?
Továbbá, ha megnézed a demót, a kinagyított kép az oldal közepén jelenik meg.

Vagy most a saját oldaladról van szó? mert ha igen, azzal én látatlanban nem sok mindent tudok kezdeni :)

üdv

Saját oldal. Parasztházat adunk ki, és oda szerettem volna a galériát átmenteni. Az oldal címe: hxxp://evahaus.atw.hu Az oldal még nincs teljesen kész.
Az egész oldalnak van egy háttere, erre jön maga a tartalom, aminek szintén van egy külön háttere. Az teljes.css-ben vannak az egész oldalra kiterjedő formázások, és egy gallery.css-ben vannak a galériára vonatkozó formázások.

Nos, megnéztem az oldalad forráskódját. Azt hiszem megtaláltam a megoldásokat.
Először is, a FancyBox:
Csak annyi lehet a baja, hogy az oldaladba nincs belinkelve a hozzá tartozó CSS fájl. Tehát írd be a HEAD-be:

<link rel="stylesheet" href="fancybox/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />

(Nyilván oda kell figyelni, hogy a helyes útvonalat írd be, ha máshol lenne a CSS fájl.)
Ha jobban megnézed a demó forráskódját, ott is látnod kell.

Második probléma:
Ha jól értelmeztem, nem jelenik meg a #wrapper mögötti ismétlődő fehér háttérkép. Ez a lebegtetés „hibája”, kell egy „clear”. Annyi a dolgod, hogy a #galeria és #footer DIV-ek közé beilleszted ezt:

<div style="clear:both;"> </div>

Remélem így működni fog a dolog :)

Köszi szépen!
Most már minden tökéletesen működik.

Szia! Fú, ez igazán jó galéria stílus. -volna számomra is, ha el tudnám készíteni. :( Azért vettem rá magam, hogy segítséget kérjek, mivel már második napja a gép előtt ülök. A helyzet az, hogy egy olyan weblapot kívánok készíteni, mely csupán képeket foglal magába. Már egészen jól ( gondoloom én, a magam tudása szerint) megoldottam a dolgokat: az oldal sílusa kész, akárcsak a hiperhivatkozások és a galéria. Ám, szeretném, ha a képeim íly módon jelennének meg -hogy kiugrik nagyobb méretben egy kattintás után.- És tudom, hogy ez így le van írva a html, css meg a több számomra ismeretlen kódokban, de nem tudom kibogarászni. Mit tegyek? Tudnál valami tanácsot adni nekem? rettentően sokat segítene… :)

Előre is köszönöm: Zoe

Zoe, szívesen segítek.
Ahogy a hozzászólásodból értelmezem, neked pont az a rész hiányzik, ahol kinagyítod a képeket. Ez a dolog legegyszerűbb része, ugyanis ezt egy külső JavaScript kód (FancyBox jQuery plugin) végzi, amihez nem kell hozzányúlnod, max. csak konfigurálni.
Először is (ha még nem tetted volna meg) töltsd le a tutorialhoz tartozó forrásanyagot, és másold át a fancybox-hoz tartozó JavaScript, ill. CSS fájlokat a saját tárhelyedre. Mindegy, hogy hová mented, a lényeg, hogy amikor hivatkozol rájuk, akkor jól add meg az elérési útvonalat.

A HTML forráskód erre vonatkozó részének valahogy így kell kinéznie:

<head>
 <link rel="stylesheet" href="fancybox/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 
 <script src="fancybox/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
 <script src="fancybox/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
 <script type="text/javascript">
    $(document).ready(function(){
      $('a.gallery').fancybox();
    });
 </script>
</head>
<body>
 <!-- HTML kód... -->
 
 
 
 <!-- HTML kód... -->
</body>

A HEAD-ben hívd meg a CSS-, ill. a két JavaScript fájlt, valamint a BODY-n belül a fönt látható mintára helyezd el a hivatkozásokat és képeket. A plugint, ami a nagyítást végzi pedig az ugyancsak fönt látható JavaScript kóddal lehet engedélyezni:
$(‘a.gallery’).fancybox();
A hivatkozásban látsz „class” illetve „rel” attribútumokat. A class attribútumra hívod meg a plugint (minden olyan linkre érvényes lesz, ami „gallery” class-al van ellátva).
A „rel” pedig azért kell, mert így a FancyBox az egyforma „rel”-lel ellátott hivatkozásokat egy galériába csoportosítja (ha kinagyítasz egy képet, akkor megjelennek a nyilak, hogy előző-, következő kép…).
Remélem tudtam segíteni, ha valami nem megy, akkor írj email-t az info{at}tommolnar{dot}hu címre, és megbeszéljük részletesebben.

Szia!
Nagyon jól sikerült a cikk. Élvezet volt olvasni számomra így tudás nélkül is mivel elmagyaráztál mindent, hogy mit miért kell tenni.
De lenne egy kérdésem. Hogyan lehetne megoldani hogy ne csak a három darab szűrés legyen benne Europa, Afrika, USA hanem további témaköröket szeretnék még belerakni. Ha jól értettem akkor ezt a JavaScript dönti el a # utáni érték alapján. Viszont itt véget ér a tudásom sajnos. Esetleg ha nem bonyolult tudnál segíteni? :)
Előre is köszönöm!

Először is köszönöm, örülök, hogy tetszik a leírás. :)
Le is írtad a lényeget: „ezt a JavaScript dönti el a # utáni érték alapján”.
Tehát, a bővítéshez az kell, hogy megjeleníted az új képeket lista-elemekben (ugyanolyan mintára, mint az eddigiek), csak ezeknél a

1

<span class="help">

értéke az új filter kell hogy legyen. pl.:

1

<span class="help">japan</span>

Valamint, szükséged lesz a szűrő résznél egy új linkre, ahol tudsz Japánra szűrni:

1

<li><a href="#japan" rel="nofollow">Japán</a></li>

Ezzel kell kiegészítened a „filter” ID-jű listát, és elvileg működnie kell mindennek magától.
Ha mégsem, vagy valami nem világos, akkor szólj, és megpróbálom részletesebben leírni.

Szia!

Óóó nagy köszönöm! Hát nem gondoltam volna hogy ilyen egyszerű! Valamiért minden áron a Javascriptben akartam átírni! :))

Lenne még egy olyan kérdésem ha nem zargatlak hogy van a belső szerveren egy képek mappa több ezer képpel és jó pár almappában helyezkedik el. Erre kellene ráhúznom ezt a galériát. Most ez kézel felvinni izgi lesz :D Tudom hogy php ezt le tudja kezelni viszont nem tudom milyen kúlcsszó alapján kellene utánanénzem. Ebben tudsz segíteni ?:)
Ha bonyolult megcsinálni a dinamikus részt akkor inkább hagyom mert szépen apródonként megcsinálom könyvtárakra és kész :)

Mégegyszer nagyon köszönöm a segítséget!

Hát igen, ennyi az egész, pont azért jó, mert ha bővíted a tartalmat, a kódhoz nem kell nyúlni.

A több ezer képet meg egyértelműen valami php program segítségével kellene. Gyorsabb egy olyat megírni/megíratni, mint annyi képet kézzel rendezgetni, vagy nem is tudom hogy gondoltad.
Igazság szerint, az lenne a legjobb, ha adatbázisban lennének eltárolva a képadatok (nem a képek..), úgy később sokkal egyszerűbben és gyorsabban lehetne őket megjeleníteni. Lehetne pl. kategóriákban csoportosítani, címet, leírást adni nekik, stb. Lehetne őket össze-vissza rendezgetni (abc sorrendben, feltöltés ideje szerint, fájlméret szerint), stb. stb.

Ezt annyira nem is bonyolult megcsinálni. Első lépésben szükséged lesz egy PHP programra, ami „végignézi” a fő mappa tartalmát, és ha talál almappákat, azokon is végigmegy. Ha csak egy főmappa van, és azon belül is csak 1-1 almappa, akkor nem annyira bonyolult a dolog. Ez esetben olvasd el, hogyan működik az opendir() és readdir() PHP függvény (php.net).
Ha egy könyvtárszerkezetről beszélünk, akkor se kell más hozzá, de akkor viszont rekurzív függvényekkel kell megoldanod a dolgot – ami ugye annyit tesz, hogy írsz egy függvényt, ami újra meghívja önmagát, egészen addig, amíg szükséges, vagy amíg hamis nem lesz egy adott feltétel.
Ilyen leírás rengeteg van, én most pl. erre kerestem google-ben:
„php recursive directory listing”
Először csináld azt, hogy csak kiíratod a fájlneveket, és a szinteket (hogy hanyadik almappában van). Ha ez megvan, és jól működik, és van adatbázisban egy táblád ehhez, akkor az echo-t csak ki kell cserélni egy SQL INSERT-re és kész is.

Remélem érthető voltam (most keltem fel :)). Ha nem, írj nyugodtan.
üdv.

Szia!
Köszi szépen ismét az infókat!
Visszaolvasva tényleg értelmetlen amit írtam illetve hülyeség.
Vagyis nem egyesével akarom azért felvinni :) Van egy egy soros php-m ami szimplán annyit tesz hogy berakja for ciklussal egymás alá a képeket és a kép elérését/nevét.

A te galériád meg nagyon tetszik (meg főnökömnek is és ez igen erős érv :D) és most próbálom majd összerakni a két forrást.

Nagyon jó leírás! Köszi!
Neki is látok tréningezni! ;) :)

Én köszönöm, örülök, hogy tetszik!
Hajrá! :-)

Szia!

Köszönöm ezt az igen csak kitűnő leírást. Épp a napokban kellett egy új galériát összedobnom és ez rendkívül jó alapokat adott hozzá és nagyon megkönnyítette a dolgomat. :)

köszönöm még1x! :)

Szia!

Olyanban kérném a segítséged hogy hogy lehet az megoldani hogy IE alatt is ugyan úgy működjön mint firefoxban? IE-ben nem lehet bezárni a nagyított képeket és a galéria teljes háttere fehér, nem átlátszó.

Előre is köszönöm a választ.

szia!
persze, hogy nekem is rögtön megtetszett a galériád, le is nyúlta :) felraktam a szerverre, de nem működik, mert e netről behívott js-ekben van exec, ami a szerveren tiltott. mivel nem értek annyira a jscripthez, nem tudok belenyúlni. kénytelen leszek lemondani erről a szép galériáról?
köszi!

kuruczp: melyik IE-re gondolsz? Megnéztem 7-es és 8-as alatt a demót, mindkettőnél jól működött. 6ossal meg már nem nagyon érdemes foglalkozni.

andrea: köszi, örülök, hogy tetszik. „a netről behívott js-ekben van exec, ami a szerveren tiltott”… ezt nem egészen értem. A JavaScript kliens oldalon fut le. A szervernek semmi köze a kód értelmezéséhez, mert a böngésző értelmezi. A szervernek csak akkor lenne köze ehhez, ha ajax-kérés lenne a kódban, de ez esetben az nincsen.

Szia mrMiller!

Nekem is az lenne a problémám, hogy IE alatt sajnos nem látszanak a gombok. :(
Nekem IE 8.0 van fent és habár én nem használom azért biztos vannak még akik igen. :(

Esetleg nincs valami tipped, hogy mit csináljak? :)

Köszi

bergkam.x360@gmail.com, úgy érted a szűrés-linkek (gombok) nem jelennek meg rendesen? Nincsenek lekerekített sarkak, árnyékok, stb…?
Mindenki kedvenc böngészője (IE) csak a 9-es verziótól támogatja a CSS3-at (tudtommal). Tehát a fenti CSS3-as beállításokat egyszerűen figyelmen kívül hagyja, mert nem tudja értelmezni.
De ezt a problémát viszonylag egyszerűen meg lehet oldani háttérképekkel, sprite-okkal, stb.
Mint azt a tutorialban is írtam, ez egy alap, ahhoz hogy „el tudd adni” a galériát, sokat kell rajta gyúrni.
Hajrá! :-)

mrMiller, köszi a választ – de nem erre gondoltam. :) Az nem probléma, hogy nincs lekerekített háttér. Az a probléma, hogy mikor rákattintunk egy képre az szépen be is tölt ahogy kell. Azonban az X gomb illetve a nyilak amikkel a képeket navigálhatjuk nem látszanak. :( És nem nagyon tudom, hogy miért … :(

Hm. Érdekes. Talán az lehet a baj, hogy rossz helyen vannak ezek a képek a szerveren. Másra most hirtelen nem tudok gondolni.

de ha rossz helyen lennének akkor elvileg a többi böngészőben sem kellene mennie nem? :)

http://fancybox.net/
próbáld meg innen letölteni a legfrissebb verziót, és megnézni, hogy azzal működik-e.
Ha csak explorerben nem látszódik, és máshol igen, akkor a fancybox ezen verziójában van valami bug. (Én letöltöttem a kb. 2-3 héttel ezelőtti legfrissebb verziót múltkor, az teljesen jól működött IE-ben…)

Köszi! A frissítéssel működik most már szépen IE alatt is! :)

nagyon köszi a válaszod, ami már rég volt, de sajna nagyon ritkán van időm foglalkozni a munkám és az itthoni dolgokon kívül olyanokkal, ami érdekel :))
szóval a szerveren, amire a honlapot csinálom, vannak tiltott jsscriptek, köztük az exec is. mivel localhost-ból tökéletesen működött a galéria, gondoltam ez lehet az oka annak, h szerverre töltve a nagy kép külön ablakban jelenik meg, a maszkolás sem megy:(((

Én még mindig azt mondom (úgy tudom – de lehet én vagyok tudatlan), hogy szerver oldalon csak a szerver oldali scripteket tudják tiltani/engedélyezni (PHP például).
A JavaScript kódokat csak és kizárólag a böngésző értelmezi, így ennek semmi köze a webszerverhez.
Az általad említett exec() függvény JavaScript-ben reguláris kifejezésekkel használatos – lehet vele tesztelni egy megadott string-ben az egyezést.
PHP esetében viszont az exec() függvénnyel egy másik, külső programot lehet futtatni. Erről viszont már hallottam, hogy előszeretettel tiltják webtárhely-szolgáltatók.

Mindenesetre, csak azt tudom Neked javasolni, győződj meg róla, hogy minden külső fájlt (javascript, css) jó helyre másoltál-e a szerveren, jó helyre mutat-e a link, amikor meghívod ezeket az oldaladban.
Az, hogy nem működik a galéria, lehet attól is, hogy elírtál pl. egy CSS class nevet, így a javascript kód nem működik megfelelően.

Ha végképp nem működik, akkor küldd el a forráskód erre vonatkozó részét nekem az info[kukac]tommolnar[pont]hu email címre, aztán gyorsan megnézem.

Tök jó a cikk csak egy dolgot hiányolok. Szerintem elfelejtetted azt, hogy a fancybox-nak is van css része amit nem ártana még belenyomni a html-be

Köszönöm, hogy szóltál a hibáról, nem is értem, hogy felejthettem ki.
Szóltam Harder-nek, és már ki is javította.

Hello!
A geléria készítőjétől szeretnék segítséget kérni, hogy lehetne megoldani, hogy IE 9-ben ez működjön? Mert itt a demó szépen megy a böngészőmben, de a saját készítésűmben nem szűr abszolút, sőt még a fejlécet egy kicsit változtattam css-ben és az sem látszódik, csak firefoxban… :(

Szia Szandra!
Néztem az itteni demót IE9-ben, nálam működik rendesen.
Azt, hogy a saját kódodban miért nem működik a dolog, nem tudom így látatlanban megmondani.
Javaslom, hogy kezdésként az eredeti változatból indulj ki, és folyamatos tesztelés mellett alakítsd át a saját igényeid szerint. Így lépésről lépésre le tudod tesztelni, hogy van-e hiba, és ha igen akkor hol.
Mindig figyelj oda, hogy jól hivatkozol a külső css és javascript fájlokra.
Vagy ha publikusan elérhető tartalomról van szó, akkor linkeld be ide, és szivesen megnézem neked.

Elvileg ugyanaz, mert a tiéd változtattam át, azért még átnézem, ha tudnál segíteni abban, hogy belenézz, nagyon örülnék neki! :$ Nincs fent sehol sem,sajnos, és egyelőre még nem is lesz, szakdogának készül.Privátban küldenél egy üzenetet, hogy tudjam mi a mail címed? Köszönöm a választ! :)

Hello!
Elvileg működnie kellene, mert a tiédet változtattam át; még átnézem, hátha találok benne valamit…
Sajnos nincs fel sehol, szakdolgozatnak készül, majd a suli szerverén lesz csak a vizsgán…. :S Esetleg, ha megkérhetlek írj egy mailt a címemre(elvileg te tudod az enyémet), és ott tudnál segíteni, ha ez nem gond! Nagyon boldog lennék, kellemetlen lenne úgy bemutatni, hogy most az url-t akkor kimásolom firefoxba… :S :”D

Szia
Most kezdtem csak foglalkozni a HTML5-el, és bevallom egyből elnyerte a tetszésem a te galériád. Mivel még hadi lábon állok a CSS3-al is, ezért az a nagy kérdésem, hogy hol és mit kellene változtani a kódon, hogy a navigáció, ne a képek felett jelenjen meg hanem a képektől balra pl igy:

—————————————
header
—————————————
Összes | kép kép kép
Európa | kép kép kép
Afrika | kép kép kép
Egyesült Államok |
—————————————

köszi előre is a segítséged :)

üdv.LostMind

Szia!

Lenne egy olyan kérdésem, hogy lehetne megoldani azt hogy a kinagyított kép mellett jelenjen meg egy szöveges rész. Bemutatkozásos rész!
Előre is köszönöm a segítséges