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


Sziasztok, üdvözlök mindenkit!

Az alábbi leírás bemutatja, hogyan (is) lehet egy igényes, egyedi, “interaktív” fotógaléria-felületet készíteni – háttérképek nélkül.

Használt technikák/kiegészítők:

A végeredmény a demó oldalon látható, valamint a demó teljes tartalma (forráskódok, képek) letölthetők innen (4760kb).

Rögtön az elején megemlíteném, hogy a leírás csak a front-end elkészítését mutatja be, a szerver-oldallal nem foglalkozik. Nem volt továbbá célom az IE-re történő optimalizálás – bár nyilván, éles helyzetben erre is oda kell figyelni.

Rendben, lássunk is hozzá…

1. lépés: HTML

Először létre kell hoznunk az oldal alap vázát:

<!DOCTYPE html>
<html>
  <head>
	<title>Fotógaléria demó - HTML5, CSS3, jQuery</title>
	<meta charset="utf-8">
  </head>
  <body>
	<!-- ... -->
  </body>
</html>

A HTML5-nek köszönhetően végre megszabadultunk a (számomra legalábbis) megjegyezhetetlen doctype-októl, amint látható, az új jóval barátságosabb.
Az oldal karakterkódolását is sokkal egyszerűbben állíthatjuk be a lerövidült meta deklaráció segítségével.
Következő lépésként, készítsük el a HTML dokumentum törzsét:

<body>
  <div id="pagewrap">
	<header>
	  <!-- fejléc -->
	</header>
	<section id="content">
	  <!-- tartalom -->
	</section>
	<footer>
	  <!-- lábléc -->
	</footer>
  </div>
</body>

Az oldal 3 fő részből épül fel: egy fejlécből, egy tartalomból és egy lábjegyzetből.

A HTML5 sokkal több tag-gel rendelkezik elődjénél, ezért végre célravezető neveket írhatunk a forráskódba, ezzel azok sokkal átláthatóbbá válnak – mind az emberi szemnek, mind pedig a keresőrobotoknak.

A HTML5 tag-ek teljes listája és azok leírása megtekinthető többek között ezen az oldalon: http://www.w3schools.com/html5/.

A header tag tartalma jelenleg mindössze egy h1 címsor lesz, benne a galéria címével – ami nagyon találóan “Galéria címe”…

<header>
  <h1>Galéria címe</h1>
</header>

A lényeg a section-ön belülre kerül:

<section id="content">
  <ul id="filter"> </ul>
  <div class="clear"> </div>
 
  <ul id="photos"> </ul>
  <div class="clear"> </div>
</section>

A filter fogja tartalmazni a szűrő-linkeket, a photos pedig értelemszerűen a képeket.
A clear div-ek a lebegtetés miatt kellenek – erről majd később, a css-résznél…

<ul id="filter">
  <li><a href="#all">Összes</a></li>
  <li><a href="#europe">Európa</a></li>
  <li><a href="#africa">Afrika</a></li>
  <li><a href="#usa">Egyesült Államok</a></li>
</ul>

A szűrőben tehát a lista-elemekbe hivatkozásokat írunk, amelyek csak horgonyokra mutatnak – ezeket dolgozzuk fel később javascript segítségével.

<ul id="photos">
  <li>
	<a rel="gal" class="gallery" href="images/europe1.jpg">
	  <img src="images/europe1_thumb.jpg" alt="Európa 1" title="Európa 1" />
	</a>
	<span class="help">europe</span>
	<div class="mask"> </div>
  </li>
 
  <li>
	<a rel="gal" class="gallery" href="images/usa1.jpg">
	  <img src="images/usa1_thumb.jpg" alt="USA 1" title="USA 1" />
	</a>
	<span class="help">usa</span>
	<div class="mask"> </div>
  </li>
 
  <!-- stb... -->
</ul>

A photos lista-elemei kicsit több dolgot tartalmaznak.
Első lépésben kell egy hivatkozással ellátott bélyegkép, amelynél a link a nagy méretű képre mutat. A hivatkozásban látható még rel és class attribútum, ezeket majd a FancyBox képnézegető fogja használni.
Látható még egy help span, valamint egy mask div – őket ugyancsak a CSS illetve JavaScript résznél taglalom bővebben.
Nos, a weboldal fő tartalmával meg is volnánk, már csak a footer tartalma maradt:

  <footer>
	&copy;Galéria 2010.
  </footer>

Semmi különös, tetszés szerint kitölthető a szokásos lábléc-tartalommal.

2. lépés: CSS

Első dolgunk, hogy létrehozzunk egy .css fájlt, és meghívjuk az oldalunk head-jében:

<head>
  <link rel="stylesheet" href="gallery.css" type="text/css" media="screen" />
</head>

Először hozzuk létre az alapértelmezett stílusokat:

/* html5 */
header,footer,section{ display:block; }
 
/* alapértelmezett */
h1,ul{ margin:0; padding:0; }
ul{ list-style:none; }
img{ border:none; }
 
body{
  margin:0;
  padding:0;
  text-align:center;
  color:#333;
  font-family:"Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;
  font-size:13px;
  letter-spacing:-1px;
}

Az új HTML5 elemeknek adunk egy display:block; beállítást – ezzel tulajdonképpen úgy fognak viselkedni (megjelenésüket tekintve) mint egy div.

A h1 és ul elemeknek lenullázzuk az alapértelmezett margin- és padding értékeit, az ul-nek ezen felül töröljük a stílusát (nem szeretnénk látni, hogy az egy lista), valamint az img-nek a keretét. (A kép csak akkor kap keretet, ha hivatkozáson belül van – ezt mi természetesen nem szeretnénk.)

Most adjunk a h1-nek, illetve a header-nek egyedi stílust:

h1{
  padding:32px 0 0 0;
  font-size:20px;
  font-weight:normal;
  text-align:center;
  text-shadow:1px 1px #eee;
}
 
header{
  height:90px;
  background:#e7e7e7;
  background: -moz-linear-gradient(0% 100% 90deg, #d4d4d4, #e7e7e7);
  background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#d4d4d4), to(#e7e7e7));
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  border-radius:4px;
  -moz-box-shadow:0 0 5px #acacac;
  -webkit-box-shadow:0 0 5px #acacac;
  box-shadow:0 0 5px #acacac;
}

A cím kap egy padding-top értéket, középre rendezzük, a szöveget normál vastagságúra állítjuk, 20 pixeles mérettel. A text-shadow segítségével könnyen érhetjük el az itt is használt “bevésés” hatást.

A header-ben használjuk ki leginkább a CSS3 nyújtotta lehetőségeket:

A background-nál beállíthatunk színátmenetet. Az értékek a következők:

Mozilla: -moz-linear-gradient(START STOP SZÖG, KIINDULÓ SZÍN, BEFEJEZŐ SZÍN);

WebKit: -webkit-gradient(TÍPUS, START, STOP, from(KIINDULÓ SZÍN), to(BEFEJEZŐ SZÍN));

A start és stop százalékos értékekkel meghatározzuk hogy honnan kezdődjön, és hol fejeződjön be a színátmenet, a szög a színátmenet dőlésszögét mutatja meg, a két szín pedig értelemszerűen a kiinduló- és befejező színeket határozza meg.

A box-shadow beállítások segítségével készítünk árnyékot. Alkalmazás:

…box-shadow: ELTOLÁS_BALRA ELTOLÁS_LEFELÉ ELMOSÓDÁS SZÍN;

Az első két érték mutatja meg az árnyék elhelyezkedését. A harmadik érték az elmosódás (blur), minél nagyobb ez az érték, annál “tompább” lesz az árnyék. A negyedik beállítás egy színkód, az árnyék színét mutatja meg.

Ha a mostanihoz hasonló “külső ragyogást” szeretnénk elérni (értem ezalatt azt, hogy az árnyék egyforma mértékben jelenik meg a doboz mind a négy oldalán), az első két értéket nullára kell állítanunk.

Jöhet a pagewrap:

#pagewrap{
  margin:10px auto 0 auto;
  width:960px;
  text-align:left;
}

10 pixeles top margin, “auto” jobb és bal margin, 960 pixeles fix szélesség – hogy 1024×768-as felbontáson is rendben legyen minden. Mivel a body-ra alkalmaztunk egy középre igazítást, így a pagewrap-ben vissza kell azt állítanunk (text-align:left).

#content{
  margin:10px 0;
}

Az oldal fő tartalma is kap egy top és bottom margin-t (10 pixel), hogy jól elkülönüljön a header-től és a footer-től.

#filter{
  float:left;
  display:inline;
}
 
#filter li{
  float:left;
  display:inline;
  margin:0 4px 0 0;
  padding:12px 20px;
  background:white;
  border:1px solid white;
}

Jöhet a szűrő lista. Azt szeretnénk, hogy a lista-elemek egy sorban jelenjenek meg, ezért mind a listát, mind pedig a lista elemeket lebegtetjük balra.
A li kap egy 4 pixeles jobb-margin értéket, viszonylag nagy padding-ot, és egy “láthatatlan” háttérszínt, illetve keretet (fehéret). Utóbbira a későbbi hover miatt van szükség, akkor ugyanis kap a lista elem egy “látható” 1 pixeles keretet minden oldalra. Ha a normál állásban nem lenne border, akkor a hover-eseménykor 2-2 pixellel szélesebb illetve magasabb lenne a lista elem, és ezáltal láthatóan elmozdulna.
Most tehát meghatározzuk, hogyan nézzen ki a li, amikor fölötte van a kurzor:

#filter li:hover{
  cursor:pointer;
  background:#e7e7e7;
  border:1px solid #ccc;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
  -moz-box-shadow: inset 0 0 4px #cfcfcf;
  -webkit-box-shadow: inset 0 0 4px #cfcfcf;
  box-shadow: 0 0 4px #cfcfcf inset;
}
 
#filter .active,
#filter .active:hover{
  cursor:default;
  background:#e7e7e7;
  border:1px solid #ccc;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
  -moz-box-shadow: inset 0 0 4px #cfcfcf;
  -webkit-box-shadow: inset 0 0 4px #cfcfcf;
  box-shadow: 0 0 4px #cfcfcf inset;
}

A kurzort pointer-re állítjuk, megadunk egy világosszürke háttérszínt, és egy kicsit sötétebb szürke border-t.

A border-radius beállításokkal lekerekítjük a sarkakat, a box-shadow-val pedig ezúttal egy belső árnyékot hozunk létre (inset).

Az .active osztályra azért van szükség, mert később, JavaScript segítségével ezt állítjuk be, ha a filter éppen aktív. Beállításai megegyeznek a :hover lista elemével.

Mivel a listában hivatkozások vannak, így ezeknek a stílusát is célszerű felülírni:

#filter li a,
#filter li a:hover,
#filter li:hover a,
#filter li:hover a:hover{
  color:black;
  text-decoration:none;
}

Azt szeretnénk elérni, hogy minden állásban ugyanúgy nézzen ki a link (fekete szöveg, aláhúzás nélkül), ezért a lista elem mindkét állására alkalmazzuk ezeket a beállításokat.
Jöhet a fotó lista:

#photos{
  float:left;
  display:inline;
  margin:0 0 0 16px;
}
 
#photos li{
  float:left;
  display:inline;
  position:relative;
  margin:10px 12px 0 0;
  width:220px;
  height:146px;
  border:1px solid #e3e3e3;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  border-radius:4px;
  text-align:center;
}
 
#photos li:hover{
  border:1px solid #b5b5b5;
  -moz-box-shadow:0 0 4px #b5b5b5;
  -webkit-box-shadow:0 0 4px #b5b5b5;
  box-shadow:0 0 4px #b5b5b5;
}

Ennél a listánál is azt szeretnénk, hogy az elemek egymás mellett jelenjenek meg, ezért itt is ugyanaz a helyzet, mint az előzőnél: lebegtetés balra. Meghatározunk még egy 16 pixeles bal margin-t, csak hogy kicsit “bentebb” kerüljön a lista.

A lista elemeket lebegtetjük balra, kapnak fix szélességet és magasságot (mivel tudom, hogy a bélyegképek beleférnek ebbe a méretbe), felső- és jobb margin-t, illetve egy nagyon világos szürke, lekerekített keretet.

Pozíciója relatív kell, hogy legyen, mert lesz benne egy abszolút-pozícionált div.

A hover-állapot annyiban különbözik, hogy itt sötétebb szürke a keret, valamint látható egy világos árnyék a “dobozok” alatt.

A fotó-listához tartoznak még az alábbi CSS beállítások:

#photos li img{
  max-width:200px;
  margin:6px auto 0 auto;
}
 
#photos li .help{
  display:none;
}
 
#photos li .mask{
  position:absolute;
  display:none;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:10;
  background:rgba(0,0,0,0.7);
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  border-radius:4px;
}

Az első közülük a képekre vonatkozik. Bár a demóban minden bélyegkép 200 pixel széles, éles helyzetben, pl. ha dinamikusan méretezgetünk sokféle (álló, fekvő) képet, előfordulhat, hogy “véletlenül” szélesebb lesz. Ezért CSS segítségével is meghatározzuk a maximum szélességét. Adunk neki továbbá egy 6 pixeles top margin-t, hogy egy kicsit lentebb kerüljön.

A HTML kódban minden lista elembe írtunk egy help span-t, amelyre a JavaScript-nél lesz szükségünk, ezért nem kell, hogy szem előtt legyen: display:none.

A mask div az épp inaktív képek fölött lesz, teljes szélességében és magasságában kitölti a lista elemet. Pozíciója abszolút, left és top értéke nulla, tehát pontosan illeszkedik a felső és bal oldalhoz. A magasabb z-index érték gondoskodik arról, hogy mindig a többi tartalom fölött jelenjen meg.

Háttérszíne 70%-ban áttetsző fekete. Az átlátszóságot rgba() segítségével írjuk le (RGBA – Red Green Blue Alpha). Az első 3 érték az RGB színkód, a 4. pedig egy szám 0 és 1 között – A 0 teljesen áttetsző, az 1 teljesen kitöltött.

A maszk réteggel az a célunk hogy teljesen illeszkedjen a lista-elemre, ezért ennek is lekerekítjük a sarkait 4 pixellel – úgy ahogyan azt a li-vel is tettük.

Ha visszatérünk kicsit a HTML forráskódhoz, láthatjuk, hogy mind a filter, mind pedig a photos lista alatt található egy clear osztállyal ellátott üres div. Ez a lebegtetés miatt kell, ha nem lenne, akkor a filter és photos lista “egymás mellett” jelenne meg.

.clear{
  clear:both;
}

Rendben, a stílusokkal is készen vagyunk. Most jöhet az egész galéria lelke, a JavaScript.

3. lépés: JavaScript (jQuery)

Első lépésként a script segítségével linkeljünk be pár JavaScript fájlt:

<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>
  <!--[if IE]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <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 src="gallery.js"></script>
</head>

Elsőként a jQuery framework-re lesz szükség. Természetesen le is lehet tölteni, és saját fájlrendszerből használni, de nekem tetszik ez az online változat, egy fájllal kevesebb…

A következő JS fájl gondoskodik arról, hogy HTML5-öt nem támogató böngészők is helyesen jelenítsék meg az új tag-eket (pl. IE). Kedvenc Explorer-ünk ugyanis akkor sem tud mit kezdeni egy “header” vagy “footer” tag-gel, ha CSS-ben megmondjuk, hogy kezelje úgy mint egy DIV-et.

A 3. és 4. fájl a FancyBox képnézegető, illetve egy kiegészítő plugin (mousewheel). Nem kötelező használni, de segítségével scrollozva is lehet léptetgetni a galériában a kinagyított képek között. Szerintem hasznos.

És végül a gallery.js fájl, amiben az általunk írt JavaScript tartalom lesz majd. Kezdjük is el megírni!

Mielőtt hozzáfognánk, mit is várunk el a programtól?

  • Ha a felhasználó egy szűrő-linkre kattint, az összes NEM oda tartozó kép “kimaszkolódik”.
  • A szűrő-linkek horgonyokra mutatnak, ez a “hash” az URL végére kerül – ez nagyon hasznos, mert működni fog a böngésző history-ja (vissza-gomb, előre-gomb, könyvjelzőként el lehet menteni egy “állapotot”, stb…).
  • Ezt kihasználva, nem csak “klikkeléskor” kellene, hogy működjön a maszkolás, hanem oldalletöltés esetén is – Ha tehát van az URL-ben hash, akkor már alapból a maszkolt tartalom jelenjen meg.

Ezeket figyelembe véve így néz ki a teljes JavaScript kód:

$(document).ready(function(){
  //változók (cache):
  var hash = '',
	  help = '',
	  href = '',
	  picHref = '',
 
	  filter = $('#filter'),
	  filter_item = '',
	  photos = $('#photos'),
	  photo_list_item = '',
	  mask = '';
 
  //hash-változás feldolgozása:
  $(window).bind('hashchange',function(){
	hash = window.location.hash.substring(1);
	if (!hash || hash == '') hash = 'all';
 
	//szükséges maszkok létrehozása:
	photos.children().each(function(){
	  photo_list_item = $(this);
	  mask = $(this).find('.mask');
	  help = $(this).find('.help').html();
	  picHref = photo_list_item.find('a');
 
	  if (help !== hash && hash !== 'all'){
		mask.fadeIn(1000);
 
		//kép eltávolítása a galériából:
		picHref.attr('rel','');
	  }else{
		picHref.attr('rel','gal');
		if (mask.css('display') !== 'none') mask.fadeOut(0);
	  }
	});
 
	//szűrő módosítása:
	filter.children().each(function(){
	  filter_item = $(this);
	  href = $(this).find('a').attr('href');
 
	  if (filter_item.hasClass('active')) filter_item.removeClass('active');
 
	  if (href == '#' + hash) filter_item.addClass('active');
	});
  });
 
  $(window).trigger('hashchange');
 
  //fancybox:
  $('a.gallery').fancybox();
});

Ha jobban megnézzük, az egész program alapja a hashchange esemény. Ugyanis a szűrők esetében nem a klikk-eseményekre figyelünk (mint általában a linkek esetében), hanem a hashchange-re.
Ez az esemény akkor történik, amikor az URL-ben megváltozik a horgonyra mutató szöveg – a kettőskereszt utáni rész (hash). Ekkor tehát mindig meghívódik egy függvény, ami a következőket csinálja:

hash = window.location.hash.substring(1);

Kiszedi az URL-ből az aktuális hash-éréket, és a substring() segítségével levágja a hash első karakterét – ami a kettőskereszt. Ezáltal kapunk egy szöveges értéket. Ezek a lehetséges értékek vannak a HTML forráskódban, a fotó-lista help span-jaiban. Ha nincs hash-érték, akkor beállít egy alapértelmezett “all” értéket.

Ezután az each() függvényt használva megvizsgálja az összes fotó-lista elemet. Ahol a help tartalma NEM egyezik meg a hash értékével, ott megjelenít egy maszkot – mivel az abban található tartalom már nem elérhető.

A maszk megjelenítésén kívül, a képre mutató hivatkozás rel értékét is megváltoztatja. Erre azért van szükség, mert a FancyBox a rel-ből “találja ki”, hogy az oldalon lévő képek egy galériába tartoznak, és e szerint lehet léptetni a kinagyított képek között. Azt meg ugye nem szeretnénk, hogy a kimaszkolt tartalom is megjelenjen a nagy képek nézegetésekor.

Az else-ágban az előzőek fordítottja történik. A hivatkozás visszakapja az eredeti rel-értékét, így elérhető lesz a Fancybox számára, valamint, ha a maszk látható, akkor eltünteti.

Ezek után már csak a szűrő linkeket kell beállítani. Itt kerül a képbe a már említett .active osztály a szűrő listához.

Az alapelv ugyanaz, mint az előbb, a program megvizsgálja az összes LI-elemet a szűrő listában, és ha az aktuális hash megegyezik a szűrőben található hivatkozással, akkor aktiválja azt.

Továbbá, a hasClass() segítségével könnyen meg tudjuk állapítani, hogy az aktuális filter aktív-e: ha igen, akkor inaktiváljuk (eltávolítjuk az osztálynevet).

Ahogy azt föntebb is írtam, szeretnénk, ha a maszkolás már odalletöltéskor is működne – feltéve ha található hash az URL-ben. Ezt könnyedén elérhetjük a trigger()-el:

$(window).trigger('hashchange');

Itt tulajdonképpen minden oldalletöltésnél “kényszerítjük” a hashchange eseményhez tartozó függvényünk meghívását.
És végül, hogy ne csak a kis képeket nézegessük, példányosítunk egy FancyBox-ot:

$('a.gallery').fancybox();

Emlékezzünk vissza, hogy a HTML-ben a képre mutató hivatkozásunk így nézett ki:

<a rel="gal" class="gallery" href="images/usa1.jpg">...</a>

Itt ugye a rel-érték mondja meg a FancyBox-nak, hogy galériaként jelenítse meg a képeket, a class pedig csak arra kell, hogy könnyen meg tudjuk hívni a plugint.
És ezennel készen is vagyunk!
Remélem tetszett az iromány, azt pedig még jobban, hogy sokaknak tudtam vele segíteni. Szerintem hatékony alap lehet egy ilyen jellegű projekt elkészítésénél. Szívesen fogadom az észrevételeket/kritikákat.

Kapcsolódó bejegyzések:

A cikket beküldte: mrMiller (http://tommolnar.hu/)

42 hozzászólás

  1. 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.

  2. rimelek says:

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

  3. Harder says:

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

  4. Robert says:

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

  5. mrMiller says:

    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 :).

  6. Ropesz says:

    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

  7. mrMiller says:

    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

  8. Ropesz says:

    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.

  9. mrMiller says:

    ööö, 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

  10. Ropesz says:

    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.

  11. mrMiller says:

    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 :)

  12. Ropesz says:

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

  13. Zoe says:

    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

  14. mrMiller says:

    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.

  15. djmorphy says:

    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!

  16. mrMiller says:

    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.

  17. djmorphy says:

    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!

  18. mrMiller says:

    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.

  19. djmorphy says:

    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.

  20. Imco says:

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

  21. mrMiller says:

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

  22. bergkamp says:

    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! :)

  23. kuruczp says:

    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.

  24. andrea says:

    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!

  25. mrMiller says:

    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.

  26. bergkam.x360@gmail.com says:

    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

  27. mrMiller says:

    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á! :-)

  28. bergkam.x360@gmail.com says:

    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 … :(

  29. mrMiller says:

    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.

  30. bergkam.x360@gmail.com says:

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

  31. mrMiller says:

    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…)

  32. bergkamp.x360@gmail.com says:

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

  33. andrea says:

    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:(((

  34. mrMiller says:

    É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.

  35. Erős Ákos says:

    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

  36. mrMiller says:

    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.

  37. Szandra says:

    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… :(

  38. mrMiller says:

    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.

  39. Szandra says:

    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! :)

  40. Szandra says:

    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

  41. LostMind says:

    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

  42. Mira says:

    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

Szólj hozzá
a Fotógaléria készítése – HTML5, CSS3, jQuery c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>