Készítsen képet galériák jquery, xozblog - tanulságok és cikkek weboldal, blog

Két ingyenes jQuery könyvtár fogják használni, hogy hozza létre ezt a galériában. Futóhomok és PrettyPhoto. Ezek nagyban egyszerűsíti a létrehozását a galériában. Mint mindig, a munka eredménye látható a bemutató oldal, és töltse le a fájlt működő galéria és az összes forrás fájlokat. Az egyetlen hátránya, ha szabad így mondanom, a létrehozása kézi miniatűrök nagyobb képeket. És a többi ezt a galéria figyelemre méltó. Csakúgy, mint ez!

HTML-kód

Különös hangsúlyt fektetve a stílus nem fog, mert használata egy kész könyvtár PrettyPhoto. amely felelős a növekvő képre, és css kód elég. Ugyanakkor érdemes megjegyezni, van 5 lehetőség tervezni nagyobb kép, bár ideális esetben mind a 3, mert a két változat csak eltávolítani a kerekítés.

portfolió-categ # 123; margin-bottom. 30px; # 125;
.portfolió-categ li # 123;
kijelzőn. inline;
margin-right. 10px;
# 125;
.image-block # 123;
kijelzőn. blokk;
helyzetbe. relatív;
# 125;
.image-block img # 123;
határon. 1px szilárd # d5d5d5;
border-radius. 4px 4px 4px 4px;
háttérben. #FFFFFF;
padding. 10px;
# 125;
.image-blokk img. lebeg # 123;
határon. 1px szilárd # A9CF54;
box-árnyék. 0 0 5px # A9CF54;
# 125;
.portfolió-terület li # 123;
lebegnek. bal oldalon;
árrés. 0 0 12px 20px;
túlcsordulás. rejtett;
szélessége. 245px;
padding. 5px;
# 125;
.home-portfolió-text # 123; margin-top. 10px; # 125;
li .active a # 123; text-dekoráció. hangsúlyozzák; # 125;

// Az összes gyerek a portfolió-terület és írjon egy változó
var $ data = $ # 40; ".portfolio-terület" # 41;. klón # 40; # 41; ;

$ # 40; '.portfolio-categ li' # 41;. kettyenés # 40; függvény # 40; e # 41; # 123;
$ # 40; ".filter li" # 41;. removeClass # 40; Az „aktív” # 41; ;

var filterClass = $ # 40; ezt # 41;. attr # 40; „Osztály” # 41;. osztott # 40; „” # 41;. szelet # 40; - 1 # 41; # 91; 0 # 93; ;

ha # 40; filterClass == 'all' # 41; # 123;
var $ filteredData = $ data. talál # 40; ”.portfolio-item2' # 41; ;
# 125; más # 123;
var $ filteredData = $ data. talál # 40; '.portfolio-item2 [adatok-type =' + filterClass + ']' # 41; ;
# 125;
$ # 40; ".portfolio-terület" # 41;. föveny # 40; $ FilteredData. # 123;
időtartamát. 600.
adjustHeight. 'Auto'
# 125;. függvény # 40; # 41; # 123;

lightboxPhoto # 40; # 41; ;
# 125; # 41; ;
$ # 40; ezt # 41;. addClass # 40; Az „aktív” # 41; ;
return false;
# 125; # 41; ;

Tehát kattintson az elem a listában, akkor ez a választó listát tartalmaz elem, amely li. azt vesszük az érték a class attribútum, és használja a megosztásos módszerrel osztják az osztály nevét több részből áll, a határon van egy hely (vagyis, ha az osztály volt «minden aktív» elbontása után megkapjuk tömb «minden» és «aktív»). További módszert már a szelet válassza ki az első elemet a tömb (ebben az esetben a «minden»), és írjuk be a kapott eredmény a változóban filterClass. Ha a hely nem volt az osztály neve nem változik.

Ezután ellenőrizze, ha a változó karakterláncot filterClass minden. A módszer .find jelölje ki az összes elemet az osztályban portfolió-item2 a tömb $ data. amit a fentiekben tárgyaltuk. A kiválasztott elem (amely az összes elemet a lista, hogy van, az összes kép) helyezünk egy változó filteredData.

És végül kapott változót át kell engedni a könyvtár jQuery futóhomok. amely gyárt és szűrés képeket. Ez minden, ami a szűrés.

Most, a képre a pop-up ablakban. Itt minden sokkal könnyebb.

jQuery # 40; "A [rel ^ = 'PrettyPhoto']" # 41;. PrettyPhoto # 40; # 123;
animationSpeed. „Gyors”.
diavetítés. 5000.
témát. 'Facebook'.
SHOW_TITLE. hamis.
overlay_gallery. hamis
# 125; # 41; ;

Pálya rákattint a linkre, ami a rel attribútum kezdődik PrettyPhoto. Ezután jön a PrettyPhoto könyvtárban. és a kép csodálatosan növekszik. By the way, azt is át több paramétert. Mint például a sebesség az animáció - gyors, késedelem diavetítés - 5 másodperc Facebook dizájn (csak 5, így azok a képek / PrettyPhoto mappa), valamint megtiltja a nevének a képeket, és növeli kép, ha lebeg az egeret. Teljes dokumentáció PrettyPhoto megtalálható itt