HTML

Gyakorlat: képmegjelenítő 2. - lapozással

Ebben a részben kicsit tovább fejlesztjük az előzőben megalkotott képmegjelenítő plugint, méghozzá olyan formában, hogy megjelenítés után jobbra-balra váltogatva végig tudjuk nézni az összes képet bezárás nélkül. Egy "prettyPhoto" plugin esetében is ez már alap követelmény :) akkor mi sem adjuk alább ennél.

Akkor most nézzük, mi változik az eddigi konstrukcióhoz képest... Előre megmondom, sok minden máshogy fog kinézni :D de ez ne rémisszen el minket. Kezdetnek ott az "append" függvény, amivel hozzáadtuk a dokumentumunkhoz a megjelenítendő kép tábláját. Ebben szükségünk lesz még a két "lapozó" linket magában foglaló oszlopra:

<table id="myPhoto_cont" style="position:fixed;left:0px;top:0px;width:100%;height:100%;">
<tr><td align="center"><a id="prev" class="nav"> < </a></td>
<td align="center" valign="top"><img/><br/><span></span></td>
<td align="center"><a id="next" class="nav"> > </a></td></tr>
</table>

A zölddel kiemelt rész az újdonság. Az egyszerűség kedvéért most a "<" és ">" jelek lesznek a lapozó nyilak. Mindkét link a "nav" osztályhoz fog tartozni, de az azonosítójuk eltérő: "prev" és "next". Ezekre ráhúzunk még pár "css" függvényt és két egér-eseményt is (a cél csak ennyi: legyenek jól láthatók, alapesetben áttetszőek, majd mikor fölé visszük az egeret, teljese láthatóak):

$('#myPhoto_cont .nav').css('color','white')
.css('font-size','36px').css('margin','50px')

.css('display','block').css('font-weight','bold')
.css('cursor','pointer').css('opacity','0.5');

$('#myPhoto_cont .nav').hover(function(){
    $(this).css('opacity','1');
});

$('#myPhoto_cont .nav').mouseout(function(){
    $(this).css('opacity','0.5');
});

Itt szimplán csak beállítjuk ezeknek a navigációs "gomboknak" a betűtípusát (jó nagyra), a margókat, az áttetszőségüket, még azt is, hogy az egérkurzor "kézfejre" váltson, ha föléjük visszük. Aztán még a két esemény: "hover" esetén teljesen látható, a "mouseout" visszaállítja az áttetszőséget. Ezek itt mind csak esztétikai célokat szolgáltak...

További elképzelések a működésről...

Mivel itt már három esemény is képmegjelenítéshez vezet (a képre kattintás, illetve a jobbra-balra navigáció), célszerű a kép betöltését, illetve annak megjelenítését egy külön függvényre bízni, aminek a neve legyen "open". Mivel adott elemen belül tudunk az alapján kijelölni, hogy hányadik objektumról van szó ("nth-child"), a megjelenítéshez csak egy számot kellene eltárolni, hogy hányadik "a" linkről van szó épp, szóval a "selected_a" változónak most nem a konkrét objektum tárolása lesz a szerepe, hanem csak az aktuális link sorszámának tárolása. Tehát... ha rákattintunk egy képre, megtudakoljuk, hogy ő hányadik sorszámú kép és ez alapján megjelenítjük az "open" metódussal... ezután ha a "next", vagy "prev" gombokra kattintunk, akkor növeljük-csökkentjük a sorszám értékét, és ismét jöhet egy "open"... aztán bezárás esetén ismét - ahogy eddig is volt - a "noclose" értékétől függően eltüntetjük a felületet...

A fő függvényünk most bővülni fog kettő darab változóval:

var mainobj=$(this);
var img_count=$(this).find('a').length;

Tehát a "this" elem az a főobjektumunkat jelenti, amire definiáljuk a plugint, jelen esetben ugye a "gallery" azonosítójú "div" lesz ez. Nos, ha mondjuk egy ezen belül található elemre vonatkozó eseményben meghatározott függvényben szeretnénk hatást gyakorolni erre a főobjektumra, akkor a $(this) szócska már nem lesz alkalmas a célra, mivel az akkor már egy teljesen más elemre fog vonatkozni. Ezért célszerű a főobjektumunkra történő hivatkozást egy változóban eltárolni, most ezt a célt szolgálja a "mainobj", tehát ebbe szépen belepakoljuk a "this" értékét. 
A másik változónk pedig az "img_count" lesz, amibe a képek darabszámát tartjuk nyilván (a navigációhoz lesz fontos). Lényegében a jQuery kijelölései, valamint például az azokon belül végrehajtott "find" metódus is a szelektálás feltételeinek megadott elemeket gyűjti össze (és a továbbiakban megadott függvények majd azokra fognak hatást gyakorolni), tehát ezek az összeválogatott elemek gyakorlatilag egy tömböt alkotnak... egy tömb elemeinek számát pedig a JavaScript-ben a "length" kifejezés segítségével tudhatjuk meg. A második sorban ezek zajlanak: a főobjektumon belül megkeressük (összegyűjtjük) az "a" linkeket, majd ennek a kollekciónak (tömbnek) a hosszát (elemek száma) tároljuk el az "img_count" változóban. Ez azt is jelenti, hogy a plugin feltételezi az adott főelemről, hogy abban csakis kizárólag képekre hivatkozó linkek vannak... de egy galéria "dobozban" miért is lenne más :)

A vezérlő események:

A képmegjelenítési folyamat tehát akkor veszi kezdetét, ha az egyik kép-linkre rákattintunk. Ez ugyanúgy - ahogy az előző feladatban is volt - az "a" tag-ekhez rendelt "click" eseményben kerül kifejtésre. Most viszont nem ide írjuk a megjelenítéshez szükséges műveleteket (mivel most az a terv, hogy azért egy "open" függvény lesz a felelős), hanem szimplán csak meghatározzuk a kiválasztott link sorszámát (amit a "selected_a" változó eltárol), és meghívjuk a már említett "open" függvényt, ami majd ezen sorszám alapján elvégzi a szükséges további feladatokat. 

$(this).find('a').click(function(){
    selected_a=$(this).index()+1;
    open();
    return false;
});

function open(){}

Tehát így néz ki most a linkekre kattintáskor bekövetkező esemény, ami után odabiggyesztettem azért az "open" függvény definícióját is, hogy ne fulladjon hibába a program (mert ugye amikor a "click" esemény végén meghívjuk az "open"-t ha a szkript nem talál ilyen funkciót, akkor az hiba). Itt két újdonsággal is szembesülünk: az egyik "index" függvény. Ő igazából semmi bonyolult dolgot nem csinál, megmondja nekünk, hogy az aktuális "a" tag hányadik indexű elem az objektumunkban. Az indexelés viszont 0-tól indul (tehát az első elem a nulladik indexű), így hozzá kell adnunk 1-et, hogy a sorszám értékét kapjuk meg. Másik érdekesség: mi a fene az a "return false" a végén? Nos... az előző feladatban meg kellett oldanunk, hogy a link kattintást követően ne navigáljon el az oldalról a "href" tulajdonságban megadott címre, ezért azt ideiglenesen eltávolítottuk, majd vissza is kellett tennünk megtekintés után, stb... Ezt a gyakorlás és problémamegoldó készség "tornáztatása" érdekében csináltuk így, de van egy egyszerűbb módszer is: ha a "click" eseményben a függvény hamis értékkel tér vissza, akkor nem történik ugrás a hivatkozásra :) így nem kell szórakoznunk kiskapukkal ez a két kis szó a metódus végén mindent megold.

Ha már bejött a kép, akkor nyílik lehetőség a további navigálásra a jobbra-balra mutató nyilakkal. Emlékezzünk arra, hogy a képernyőt teljesen kitöltő tárolónk területére történő kattintás után a megjelenítő bezárul, ezért itt is szükségünk lesz a "noclose" változó értékének módosítására, hogy blokkoljuk ezt. Terveink szerint csak a megnyitni kívánt kép sorszámára van szükségük a megjelenítéshez, így csak a sorszámot tartalmazó "selected_a" változó értékét kell variálnunk, azaz csökkenteni, illetve növelni. Figyeljünk arra, hogy ne tudjunk "kiszaladni" a megadott tartományból, azaz: ha a sorszám 1 alá csökkenne, ugorjunk az utolsó képhez, ha pedig az utolsó kép után a "következő" gombra kattintunk, térjünk ismét az elsőhöz. 

$('#myPhoto_cont #prev').click(function(){
    noclose=true;
    if(selected_a>1)selected_a--;
    else selected_a=img_count;
    open();
});
$('#myPhoto_cont #next').click(function(){
    noclose=true;
    if(selected_a<img_count)selected_a++;
    else selected_a=1;
    open();
});

Akkor itt vannak a "prev" elem (előző képre ugrás) és a "next" elem (következő kép) kattintási eseményei. Mindkettő azzal kezdődik, hogy a "noclose" értékét igazra állítja, tehát a kattintást követően eszébe se jusson a szkriptnek bezárni a megjelenítő "ablakot". Ezután jön a "selected_a" (a kép sorszáma) változó értékének módosítása... a "prev" esetében: amennyiben ez még 1-nél nagyobb, akkor szimplán csak csökkentjük eggyel az értéket, ellenkező esetben pedig egyenlővé tesszük a képek darabszámával (és így lesz az utolsó kép a soron következő). A "next" esetében pedig: amíg ez az aktuális sorszám kevesebb, mint a képek száma, akkor csak növeljük eggyel, ellenkező esetben pedig az értéke egyenlő lesz 1-gyel (a legelső kép). Így jobbra-balra navigálva mindig "körkörösen végtelenítve" járjuk be a képeket. 

Most már minden hely megvan, ahol az "open" hívására kerül a sor. Itt az ideje, hogy megírjuk ezt a megjelenítésért felelős metódust is.

function open(){
    $('#myPhoto_cont span').text('');
    var tmp_a=mainobj.find('a:nth-child('+selected_a+')');
    $('#myPhoto_cont img').attr('src',tmp_a.attr('href'));
    if(ops.labels)
        $('#myPhoto_cont span').text(tmp_a.attr('title'));

    $('#myPhoto_back').fadeIn(250);
    $('#myPhoto_cont').fadeIn(500);
}

Itt a biztonság kedvéért máris azzal indítunk, hogy a "span"-ban lévő szöveget kitöröljük (ha volt, ha nem), mert ha esetleg az újonnan megjelenített képnek nincs "title" attribútuma, fennáll a veszélye, hogy ott marad az előző kép címszövege, az meg ugye gáááz lenne :D Ezután a főobjektumunkon belül "find" függvény segítségével egy "nth-child" szelektálással megkeressük a "selected_a" sorszámú "a" linket, majd ezt az elemet egy ideiglenesen felvett "tmp_a" változóban eltárolunk, hogy ne kelljen mindig végrehajtanunk ezt a keresést és ezt a hosszú kifejezést kiírni (tehát a "tmp_a" most az aktuálisan kiválasztott kép linkjét fogja jelenteni). A továbbiakban ugyanaz történik, mint eddig... a "myPhoto_cont" táblán belüli "img"-nek az "src" tulajdonságába betesszük a kiválasztott link "href" attribútumának értékét, így betöltődik a megfelelő kép a megjelenítőbe. Amennyiben az opciók közt engedélyezett a címkék megjelenítése ("labels" változó), a "span" belsejébe beírjuk a link "title" tulajdonságát is (már ha van). Végül pedig megjelenítjük a sötétítő hátteret és a megjelenítő tárolóját is.

Amelyik esemény még változást szenved az előző feladathoz képest, az a "myPhoto_cont"-hoz rendelt kattintási esemény, ami a bezárást biztosítja. A változás lényegében annyi, hogy két sort kikapunk belőle, így csak a "noclose" ellenőrzés és az eltüntetés marad:

$('#myPhoto_cont').click(function(){
    if(!noclose){
        $('#myPhoto_back').fadeOut(150);
        $('#myPhoto_cont').fadeOut(150);
    }else noclose=false;
});

Itt már nem kell foglalkoznunk a címszöveg törlésével, mert az az "open" metódus minden lefutásánál amúgy is megtörténik, valamint a "href" érték visszaállítására sincs szükség, mert már egyszerűbb módszert alkalmazunk a linkek kezelésére. 

Ennyi módosítást kellett eszközölnünk a plugin továbbfejlesztéséhez. Most már ezen is túl vagyunk, nagy királyok vagyunk :) Ha nem akar még ezek alapján megfelelően összeállni a dolog, akkor szedd le a forrásomat innen: KLIKK

Szólj hozzá:

Gyakorlat: képmegjelenítő plugin (prettyPhoto)

Ez most már egy igazán testhezálló feladat lesz. Egy képek stílusos megjelenítéséhez használható plugint fogunk készíteni, ami hasonló lesz, mint a már jól ismert "prettyPhoto" (persze annak azért egy egyszerűbb változata). Adott az oldalunkon egy kis galéria, formázottan, linkelt képekkel megpakolva. A struktúra ilyen formában épül fel:

<div id="gallery">
    <a href="kep1.jpg" title="Cím 1" target="_blank">
        <img src="kep1.jpg"/>
    </a>
    <a href="kep2.jpg" title="Cím 2" target="_blank">
        <img src="kep2.jpg"/>
    </a>
    <!-- és így tovább... -->
</div>

Egy "div' elemen belül sorakoznak a linkek, és azokon belül vannak a képek. Az "a" linkek tulajdonságai a "href", ami ugye a megjelenítendő képre hivatkozik, a "title" egy opcionális lehetősége, ha valamilyen cím-szöveget akarunk a képhez párosítani, és a "target"-hez beírt "_blank" érték biztosítana minket arról, hogy a hivatkozott kép egy új lapon nyíljon meg. Tehát működés szempontjából ez így önmagában szkript nélkül is megállja a helyét, viszont nekünk nem az a célunk, hogy egy új lapon megnyíljon a kép egy snassz fehér háttér előtt, hanem az aktuális lapon maradva egy látványos hatás kíséretében jelenítse meg azt. Az "img" szerepe pedig csak az, hogy a galériánkon belül is lássunk kicsinyített ízelítőket a képekből, melyekre kattintva előbukkan a nagyobb méret (éles helyzetben az "img"-be javasolt bélyegképeket elhelyezni a gyorsabb működés érdekében, az eredeti méretű kép eléréséhez úgyis csak az "a" tagokban szereplő elérhetőség játszik szerepet.

Na, adjunk akkor ennek egy pofás kis megjelenítést. Az én saját kreációmban ennek a pluginnak a neve "myPhoto" lesz. Tehát ennek definiálása a "gallery" nevezetű elememre nézve:

$('#gallery').myPhoto({maxh:450});

Igen, jól látjátok, tervezek ebbe is opciókat :) ebből egyik a "maxh" lesz, ami a megjelenítendő kép maximális magasságát fogja jelenteni (tehát a felbukkanó kép ennél nem lehet nagyobb - alapértelmezetten lehet 500). Egy második opciót is tervezek "labels" néven, aminek az értéke "true" vagy "false" (igaz-hamis) lehet, azt meghatározva, hogy szeretnénk-e a linkek "title" tulajdonságában lévő szöveget megjeleníteni a felbukkanó kép alatt. Akkor ezek alapján már pik-pak össze kell tudni dobni a plugin vázát...

(function($){
    $.fn.myPhoto = function(ops) {
        var defOps = {maxh:500,labels:true};
        ops = $.extend({},defOps,ops);
    };
})(jQuery);

Itt már nem szabad olyan dolognak szerepelnie, amit részletezni kellene :) úgyhogy azonnal ugrok is tovább, mivel most ismét egy újdonság következik...

Az .append() függvény:

Ahhoz hogy a plugin működjön, szükség lesz ugye egy újabb "img"-re, amibe az aktuálisan kiválasztott képet betöltjük, valamint - ha már úgyis ez a trendi - egy áttetsző fekete boxra, ami kitölti a képernyőt és a kép ez előtt fog felbukkanni. Ilyen elemek nem szerelnek alapesetben az oldalon és a készítőtől sem várhatjuk el, hogy hozza létre ezeket, mert különben a plugin nem fog működni... egy profi jQuery-függvénynek ezt meg kell tudnia oldani magától. A most említett problémát orvosolni tudja az "append" függvény... egy kiválasztott objektumon belülre beilleszthetünk egy újabb szöveget, vagy HTML kifejezést. Ha én azt akarom, hogy az oldalam "body" törzsén belül létrejöjjön egy új "div" elem, akkor egy "append"-del egyszerűen csak beírom:

$('body').append('<div id="new"></div>');

Ha nem akarok spórolni a hellyel, akár a "style" tulajdonságokat is egy csapásra letudhatom ezen belül. Ezután pedig már ugyanúgy tudok jQuery-vel hivatkozni a "new" elemre, mint bármelyik másikra. 

Ebben a gyakorlatban most azért kicsit hosszabb lesz ez, mint a példában volt, mert azért több dolgot is hozzáadok az oldalamhoz, stílusokat is adok hozzá, valamint utána majd még "css" függvénnyel kicsit tovább machinálom őket...

$('body').append('<div id="myPhoto_back" style="position:fixed;left:0px;top:0px;width:100%;height:100%;">
</div>')

.append('<table id="myPhoto_cont" style="position:fixed;left:0px;top:0px;width:100%;height:100%;">
<tr><td align="center" valign="top"><img/><br/><span></span></td></tr></table>');


$('#myPhoto_back').css('background','#000000').css('opacity','0.9')
.css('display','none');

$('#myPhoto_cont').css('display','none').find('span')
.css('font-family','Verdana,Arial')

.css('color','#ffffff').css('font-size','12px');
$('#myPhoto_cont img').css('border','20px solid #ffffff')
.css('box-shadow','0px 0px 20px #000000')

.css('margin-top','30px').css('max-height',ops.maxh+'px')
.css('margin-bottom','5px');

Ha sikerült megemészteni ezt a zsúfolt információhalmazt, akkor nézzük meg, mi is történek ezeknek a végrehajtása során... Itt még nem a kijelölt objektumot dolgoztatjuk, hanem a dokumentumunk törzsének, a "body"-nak a végére akarunk új elemeket létrehozni, ezért az "append" függvényt a "body"-ra hivatkozva alkalmazzuk. Alkotunk egy "myPhoto_back" nevezetű elemet, ami fix pozícióval a felső sarokba igazítva kitölti a teljes képernyőt, majd ugyanilyen tulajdonságokkal beillesztek egy táblát, melynek "td" elemén belül lesz középre igazítva (függőlegesen fentre) az "img", amibe majd a kijelölt képet töltjük be, az alatt pedig egy "span" fogja tartalmazni a képhez tartozó szöveget. További CSS-buherálásokkal a "myPhoto_back" hátterét feketére színezzük, 0.9-es átlátszóságot adunk neki, és elrejtjük, hogy kezdetben ne látszódjon. A "myPhoto_cont" táblát is láthatatlanná tesszük, illetve az azon belüli "span" elem szövegét formázzuk még: legyen Verdana (vagy Arial) betűtípus, fehér színnel, és 12 pixeles betűmérettel. Végül még a "myPhoto_cont" táblán belüli "img"-t pofozzuk ki kicsit: legyen egy 20 pixel nagyságú fehér szegélye, vessen egy 20 pixeles nagyságú fekete árnyékot (eltolás nélkül), beállítunk egy 30 pixeles margót a tetejére, hogy azért legyen egy kis távolság, megadjuk a maximális magasságának értékét az opciókban megadottnak megfelelően és végül még az aljára is teszünk egy 5 pixeles margót, hogy ne érjen közvetlenül hozzá a szöveg (már amennyiben az látszódni fog). 

Maga a szerkezet ezzel már felépült, már csak az események írása van hátra. Előtte viszont még szükség lesz bizonyos változók deklarálására itt a fő-függvényben...

var noclose=false;
var tmp_href;
var selected_a;

A legelső még egyenlőre nem releváns, a másik kettőt azért röviden kifejtem... a "tmp_href" változóban tároljuk majd el az aktuálisan kiválasztott kép elérhetőségét, majd ki fog derülni, hogy miért szükséges. A "selected_a" pedig magát a kiválasztott "a" elemet tárolja majd el :) ezt is meg fogjuk tudni, hogy minek.

Lényegében két fő eseményünk lesz (plusz egy mellékes): amikor a kép-linkre kattintva a plugin elemei megjelennek és betöltődik a hivatkozott kép, illetve amikor az áttetsző fekete részre kattintva ezek ismét eltűnnek (és még ehhez fog tartozni az a plusz is).

A megjelenítés:

Gondoljuk át nagy vonalakban, hogy miként is tudna működni ez a dolog... Rákattintunk a képre hivatkozó "a" linkre... kiolvassuk a link "href" attribútumának értékét, majd a "myPhoto_cont" elemen belüli "img"-nek az "src" tulajdonságát beállítjuk erre az értékre. Aztán már meg is jeleníthetjük a "myPhoto_back" és "myPhoto_cont" objektumainkat. Ez így működik is... megjelenik a fekete háttér és a betöltött kép is... de az "a" linkek viselkedése nem változik meg, ugyanúgy megnyitják a hivatkozást... esetünkben egy fokkal jobb, egy új lapon... de lássuk be, ez is idegesítő :) Tehát a "href" tulajdonságát a megnyitás idejére módosítanunk kell, hogy ne történjen elnavigálás, illetve ha bezárjuk ezt a kis nézegetőt, vissza kell, hogy adjuk ezt a "href" értéket a gazdájának (a szóban forgó "a" linknek), és ehhez tudnunk kell, hogy melyik link objektum volt az, akit megnyitottunk (ehhez kell a "selected_a" változó), és hogy milyen címre hivatkozott eredetileg (ezt pedig a "tmp_href" tárolja majd). Akkor ezek alapján:

$(this).find('a').click(function(){
    selected_a=$(this);
    tmp_href=selected_a.attr('href');
    selected_a.attr('href','javascript:');
    $('#myPhoto_cont img').attr('src',tmp_href);

    $('#myPhoto_back').fadeIn(250);
    $('#myPhoto_cont').fadeIn(500);
});

Szóval... egy kattintás esemény érkezik a galériánkon belüli "a" linkekre... a függvényen belül a "this" természetesen már az adott "a" elemet jelenti. Nem is szarozunk, már az elején a "selected_a" változóba beletesszük az aktuális elemet és a továbbiakban ezzel is dolgozunk tovább... a "tmp_href"-be pedig bekerül ennek a kiválasztott linknek a képre mutató hivatkozása. Most pedig távolítsuk el ezt a hivatkozást a linkből, változtassuk meg az elem "href" tulajdonságát, én a "javascript:" kifejezést találtam célszerűnek, mert olyankor a link nem navigál sehova, hanem szkriptet hajtana végre, tehát most nem fog csinálni semmit. Akkor a "myPhoto_cont" tárolónkban elhelyezkedő "img" elemünknek az "src" tulajdonságában betesszük szépen a hivatkozást, amit a "tmp_href" változóban őrzünk és szépen el is kezdi betölteni a képet. Ekkor a jó öreg "fadeIn" effektekkel elővarázsoljuk az áttetsző fekete hátteret és a képet magában foglaló táblát is.

A .text() függvény

Ezt most azért vesszük elő, mert használni fogjuk :) A segítségével egy megadott elem belsejében lévő tartalmat tudunk megváltoztatni. Az "append"-től eltérően nem hozzáfűzi a megadott szöveget, hanem egy az egyben felülírja. Például, ha van egy ilyen rész a HTML kódunkban:

<div id="box">
    <p>Paragrafus</p>
    <img src="pic.jpg"/>
</div>

Akkor ezzel a függvénnyel gyökeresen megváltoztathatjuk ezt a felépítést :) Azaz... miután lefuttatunk egy $('#box').text('Ez az új tartalom'); szkriptet, attól kezdve a fenti szerkezet a böngésző számára ilyen formában létezik tovább:

<div id="box">
    Ez az új tartalom
</div>

Ezt kihasználva érjük el, hogy a "span" elemünk jelenleg üres belsejébe beírjuk az aktuális link "title" tulajdonságába helyezett szöveget. Persze azt is figyelembe kell venni, hogy ezt feltételhez kötöttük: ha a "label" opció értéke igaz. Akkor a fenti "click" eseményben a függvényt még kiegészítjük... mielőtt "fadeIn" hatásokkal megjelenítjük a plugin elemeit, írjuk be ezt a sort:

if(ops.labels)
    $('#myPhoto_cont span').text(selected_a.attr('title'));

Ha az opciókban szereplő "labels" változó értéke igaz, akkor a kiválasztott "a" elem attribútumai közül a "title" értékét kikapva, azt egy "text" függvénnyel írjuk be a "myPhoto_cont"-ban lévő "span" elem belső tartalmaként. 

A megjelenítő bezárása:

Szemügyre vettük a képet, boldogok vagyunk... már nagyban is láthattuk, amit eddig csak kicsiben... most akkor  be kellene zárni, hogy tovább böngészgessünk. Ehhez csak annyit kellene tennünk, hogy kattintsunk valahova félre egyet és máris minden szépen eltűnik. Ez akkor egy kattintás-eseményt jelent, méghozzá a "myPhoto_cont" elemre vonatkozóan, mivel ez van legfelül, ami mindent eltakar és beteríti a teljes képernyőt.

$('#myPhoto_cont').click(function(){
    selected_a.attr('href',tmp_href);
    $('#myPhoto_cont span').text('');

    $('#myPhoto_back').fadeOut(150);
    $('#myPhoto_cont').fadeOut(150);
});

Ezekre volt csak szükség... ha minden igaz, a "selected_a" változónk még mindig töretlenül azt az "a" elemet tartalmazza, amire utoljára klikkeltünk, a "tmp_href" pedig annak eredeti hivatkozását (mert ugye most perpill a "javascript:" kifejezés lapul a "href" tulajdonságában, ha így hagynánk, nem tudnánk már újra megnyitni). Akkor most szépen annak az elemnek a "href" attribútumába visszatesszük az eredeti hivatkozást. Még a teljesség kedvéért kitöröljük a "span"-ből is a feliratot... Most már minden a helyén van, két "fadeOut" effekttel eltüntetjük a kép tárolóját és a borító elemet. 

Már szinte készen is vagyunk, de akad még egy apró probléma... ha a "myPhoto_cont" területére kattintunk (ami jelenleg az egész képernyőt lefedi), a bezárás akkor is végrehajtódik, ha a megjelent képre kattintunk rá... vagy ha lennének PL lapozást végrehajtó gombok, akkor is bezárulna az egész, pedig nem kellene... mi azt akarjuk, hogy csak akkor zárja be, ha a kép területén kívül kattintunk valahova. Na, ehhez kell még egy plusz függvény és a "noclose" változó...

$('#myPhoto_cont img').click(function(){noclose=true;});

A "noclose" értéke szintén "true", vagy "false" lehet. Ha a "noclose" igaz, az azt jelenti, hogy tilos bezárni a megjelenítőt, csak hamis érték esetén engedélyezett. Szóval... az oké, hogy a "myPhoto_cont"-ra kattintva megindul a bezárás, de még ehhez társul egy másik esemény: ha a "myPhoto_cont"-on belüli "img"-re történik a kattintás, akkor állítsuk a "noclose" értékét igazra. Most már csak ennek figyelembevételével kell kiegészíteni a "myPhoto_cont" eseményét...

$('#myPhoto_cont').click(function(){
    if(!noclose){
        selected_a.attr('href',tmp_href);
        $('#myPhoto_cont span').text('');
        $('#myPhoto_back').fadeOut(150);
        $('#myPhoto_cont').fadeOut(150);
    }else noclose=false;
});

Történt egy kattintás a "myPhoto_cont" elemen. Ha a "noclose" értéke nem igaz, akkor ez a kép területén kívül történt (mert ha azon belül, akkor az értékét igazra állította volna), tehát végrehajtódik a már fent is kifejtett bezárási procedúra. Ellenkező esetben viszont nem bántunk semmit, minden marad látható, a "noclose" értékét pedig újra visszaállítjuk hamisra, hogy majd a következő "click" eseménynél is megfelelően tudjunk vele ellenőrizni.

Ez már ugye azért nem volt egy kispályás meló? :) Ezt a részt sem hagyhatom itt üres kézzel, mellékelem a saját megoldásomat is. Ha valaki le akarja tölteni, itt éri el: KLIKK

Szólj hozzá: