A képgalériák és a csúszkák a legnépszerűbb jQuery formátumok közé tartoznak. Nekik köszönhetően a szükséges mennyiségű vizuális tartalommal bővítheti az oldalt, miközben értékes helyet takarít meg.

A galériák és a csúszkák kevésbé zsúfolják az oldalt, de lehetővé teszik az üzenet közvetítéséhez szükséges összes kép hozzáadását. Különösen hasznosak lesznek az online áruházakban.

Mai cikkünkben összegyűjtöttük a legjobb képgalériákat és jQuery csúszkákat.

Telepítésükhöz egyszerűen adja hozzá a kiválasztott bővítményeket a fejrészhez HTML oldalak a jQuery könyvtárral együtt, és konfigurálja azokat a dokumentáció szerint (csak néhány sornyi kód).

Válassza ki, hogy ezek közül az elemek közül melyik illeszkedik tökéletesen a projektjéhez.

1. Bootstrap Slider

A Bootstrap Slider egy ingyenes, mobilra optimalizált képcsúszka érintéssel és csúsztatással görgethető. Bármilyen képernyőn és bármilyen böngészőben csodálatosan fog kinézni. A csúszkákra képeket, videókat, szövegeket, bélyegképeket és gombokat tölthet fel.

2. Termék előnézeti csúszka

A Product Preview Slider megtestesíti a jQuery teljes potenciálját, tökéletesen illeszkedik bármely felülethez. A bővítmény kódjának minőségével és tisztaságával is elégedett lesz.

3. Bővíthető képtár

Az Expandable Image Gallery egy csodálatos bővítmény, amely egyetlen kattintással teljes képernyős galériává változik. Használható a "Rólunk" részhez vagy a termékinformációk megtekintéséhez.

4. Fotorama

A Fotorama egy reszponzív jQuery galériabővítmény, amely asztali és mobilböngészőkhöz egyaránt használható. Rengeteg navigációs lehetőséget kínál: miniatűrök, görgetés, előre és vissza gombok, automatikus diavetítések és jelölők.

5. Magával ragadó csúszka

Az Immersive Slider lehetővé teszi a Google TV csúszkájához hasonló egyedi dianézési élmény létrehozását. Módosíthatja a háttérképet homályosra, hogy a fő fényképeken maradjon a fókusz.

6. Leastjs

A Leastjs egy reszponzív jQuery beépülő modul, amely segít egy csodálatos galéria létrehozásában. Ha a kép fölé viszi az egeret, megjelenik a szöveg, ha rákattint, az ablak teljes képernyőre bővül.

7. Csúszó panelsablon

Ez a bővítmény tökéletes portfóliókhoz. Vízszintes (kis képernyőkön függőleges) képblokkokat hoz létre, amelyekhez a kiválasztott tartalom rögzítve lesz.

8. Squeezebox portfóliósablon

A Squeezebox portfóliósablon portfóliómozgásos effektusokat kínál. Ha az egérmutatót a fő kép (vagy blokk) fölé viszi, lehorgonyzott elemek jelennek meg.

9. Képek keverése

A Shuffle Images egy csodálatos reszponzív bővítmény, amely lehetővé teszi, hogy galériát hozzon létre a lebegtetés közben változó képekkel.

10. Ingyenes jQuery Lightbox beépülő modul

Az ingyenes jQuery Lightbox beépülő modul segít egy vagy több kép megjelenítésében egy oldalon. Ezek is nagyíthatók és visszaállíthatók eredeti méretükre.

11. PgwSlider – Reszponzív csúszka a jQuery számára

A PgwSlider egy minimalista képcsúszka. A jQuery kód kicsi, így ennek a bővítménynek a betöltési sebessége kellemesen meg fogja lepni.

12. Szórványos Polaroidok Galéria

A Scattered Polaroids Gallery egy csodálatos csúszka lapos kialakítás. Elemei véletlenszerűen mozognak képváltáskor, ami csodálatosnak tűnik.

13. Ugráló tartalomszűrő

A Bouncy Content Filter a tökéletes megoldás portfóliójához. Ez a bővítmény lehetővé teszi a felhasználók számára, hogy gyorsan váltsanak egyik kategóriából a másikba.

14. Egyszerű jQuery Slider

Az egyszerű jQuery Slider méltó a nevéhez. Ez a beépülő modul a JavaScript, a HTML5 és a CSS3 elemeit egyesíti. A demóban alapértelmezés szerint csak szövegbetöltés érhető el, de ha néhány változtatást végrehajtunk, vizuális tartalmat is hozzáadhatunk.

15. Glide JS

A Glide JS egy egyszerű, gyors és érzékeny jQuery csúszka. Könnyen beállítható, és a bővítmény nem foglal sok helyet.

16. Teljes képernyős fogd-csúszka parallaxissal

Ez a csodálatos jQuery kép- és szövegfeltöltési csúszka tökéletes minden webhelyhez. Könnyű parallaxis effektussal és lassú szöveges megjelenéssel örvendezteti meg a felhasználókat.

Manapság a reszponzív dizájn a tervezők és fejlesztők első számú választása lett, mivel egyre többen szeretnék, ha weboldalaik okoseszközön futnának. A reszponzív dizájn felhívja a mobilfelhasználók figyelmét, és segít olyan potenciális ügyfelek és eladások generálásában, amelyek új szintre emelik vállalkozását.

Manapság, tudsz hozzon létre érzékeny elrendezést szinte mindenhez, például menühöz, rácshoz, oszlophoz, sőt képekhez és képekhez is. Ha webhelye tartalmát, képeit és videóit reszponzív galéria stílusban szeretné megjeleníteni, akkor tegye a következőket jQuery Képgaléria bővítmények segíthet rajta.

Ez a cikk néhányat tartalmaz a A legjobban reagáló jQuery Image Gallery beépülő modulok amely nem csak lehetővé teszi, hogy reszponzív képgalériákat hozzon létre webhelyeihez, hanem elegáns stílusban is megjelenítse azokat, hogy webhelye szebb és látványosabb legyen.

Alább található a lista A legjobban reagáló jQuery Image Gallery beépülő modulok, amelyeket érdemes megfontolni 2016-ban.

A Bootstrap Photo Gallery egy egyszerű jQuery beépülő modul, amely Bootstrap alapú reszponzív fotógalériát hoz létre a képekhez.
Ez a beépülő modul támogatja a képek és feliratok változó magasságát. Egy opcionális „modális” mező is található a „következő” és „előző” lapozással.
Demo és letöltés

2. JK Reszponzív YouTube és Képgaléria


Ez egy modern, átvilágítódoboz stílusú galéria képek és YouTube-videók megjelenítéséhez a webhelyen. A galéria felülete teljesen reszponzív, és gyönyörűen működik minden nagy vagy kicsi eszközön.
Demo és letöltés

3.Faba


A FABA egy reszponzív Facebook-albumok és fotógaléria jquery bővítmény, amely betölti az összes albumot és fotót a kiválasztott Facebook-oldalról.

Körülbelül 90 szerkeszthető lehetőség közül választhat, és szinte mindent testre szabhat: animációkat, lebegtetési effektusokat, a lebegő animációk minden részét, szöveget, viselkedést és még sok mást. Gyönyörű albumokat integrálhat projektjébe vagy weboldalába.


Az xGallerify egy könnyű, reszponzív galériabővítmény, amellyel gyönyörű képgalériákat hozhat létre webhelyei számára. Ez a bővítmény könnyű (3 kb fájlméret), könnyen használható, és számos testreszabható opcióval és stílussal rendelkezik.
Demo és letöltés


Az Instagram Element egy prémium Instagram-bővítmény bloggerek, fotósok, modellek és bárki számára, aki növelni szeretné jelenlétét az Instagramon.
Ez a beépülő modul teljesen reszponzív, és lehetővé teszi több mint 50 lehetőség egyszerű kezelését, valamint lehetővé teszi, hogy bármilyen eszközön gyönyörűen jelenítse meg fényképeit.


A SnapGallery egy egyszerű jQuery beépülő modul, amely a különböző méretű képek csúnya listáját gyönyörű, testreszabható galériává varázsolja egy sor JavaScript segítségével.

Teljesen reszponzív, személyre szabható, és lehetővé teszi a képek közötti távolság, a halmozás előtt megengedett minimális szélesség és az oszlopok maximális számának kiválasztását, és további lehetőségek állnak rendelkezésre!
Demo és letöltés


Eagle Gallery ez egy modern galéria képzoom funkcióval. A galéria kezeléséhez kézmozdulatokat vagy vezérlőgombokat használhat. Ez egy teljesen reszponzív galéria, amely támogatja az érintőképernyőt, és mobileszközökhöz, laptopokhoz és asztali számítógépekhez készült.

Ezzel a galériával könnyedén létrehozhat egy termékgalériát az internetes boltjában a részletes megtekintéshez és testreszabhatja azt az opciók segítségével.


A Unite Gallery egy többcélú JavaScript-galéria, amely a jQuery könyvtáron alapul. Moduláris technológiával készült, nagy hangsúlyt fektetve a könnyű használatra és testreszabhatóságra. A galéria személyre szabása nagyon egyszerű, css-n keresztül megváltoztathatja a felületét, és akár saját témát is írhat. Ennek ellenére ez a galéria nagyon erős, gyors, és manapság a legtöbb olyan funkcióval rendelkezik, mint a válaszkészség, az érintés engedélyezése és még a zoom funkció is, ez egyedülálló hatás.
Demo és letöltés


A jQuery lightGallery egy könnyű jQuery lightbox galéria kép- és videogaléria megjelenítésére.

A Lightgallery támogatja az érintőképernyős eszközökön az érintéssel és csúsztatással történő navigációt, az asztali számítógépeken pedig az egér húzását. Ez lehetővé teszi a felhasználók számára, hogy csúsztatással vagy egérhúzással navigáljanak a diák között.

A Lightgallery számos opcióval rendelkezik, amelyek lehetővé teszik a bővítmény nagyon egyszerű testreszabását. A SASS-változók frissítésével egyszerűen testreszabhatja a galéria megjelenését és hangulatát.
Demo és letöltés


Ez egy másik nagyszerű jQuery képgaléria-bővítmény, amely lehetővé teszi, hogy rácselrendezési galériát hozzon létre képeihez és videóihoz. Ez a beépülő modul teljesen érzékeny, és számos funkcióval rendelkezik, például közösségi megosztással, végtelen görgetéssel, css3 animációkkal, szűrőkkel és még sok mással.


A blueimp Gallery egy érintőképernyős, reszponzív és testreszabható kép- és videógaléria, körhinta és átvilágítódoboz, amely mobil és asztali webböngészőkhöz egyaránt optimalizált.

Csúsztatással, egér- és billentyűzet-navigációval, átmeneti effektusokkal, diavetítés funkcióval, teljes képernyős támogatással és igény szerinti tartalombetöltéssel rendelkezik, és további tartalomtípusok megjelenítésére is bővíthető.
Demo és letöltés


A nanoGALLERY egy érintéssel használható és reszponzív képgaléria, sorkizárt, lépcsőzetes és rácsos elrendezéssel. Támogatja az önállóan tárolt képeket, valamint a Flickr, Picasa, Google+ és SmugMug fotóalbumok letöltését.

Többszintű navigációt tartalmaz az albumokban, kombinálható lebegtetési effektusokat a bélyegképeken, érzékeny bélyegképméreteket, többféle elrendezést, diavetítést, teljes képernyőt, oldalszámozást, képek lusta betöltését és még sok mást.
Demo és letöltés


A flipGallery egy ingyenes, jQuery által támogatott fotógaléria, amely elegáns átmenetekkel rendelkezik a bélyegképek és az átvilágítódoboz-nagyítások között. További funkciók közé tartozik a dinamikus képfolyam, az automatikus oldalszámozás, az automatikus kivágás és az átlátszó képfedő.

Ennek a beépülő modulnak van egy prémium verziója is, amely néhány remek funkcióval rendelkezik, és minden bizonnyal tartalmazza a reakcióképességet.
Demo és letöltés


A Fancy Gallery egy reszponzív jQuery képgaléria-bővítmény, amely lehetővé teszi, hogy képeit és videóit divatos stílusban jelenítse meg. Ez a bővítmény számos testreszabási lehetőséget kínál, és korlátlan számú albumot, videót, képeket és még sok mást adhat hozzá.

A bővítmény különböző lebegtetési effektusokkal rendelkezik a bélyegképekhez és a címekhez, amelyek szintén módosíthatók. Választhat 7 előre meghatározott színtéma közül, vagy egyszerűen létrehozhat saját színtémát.


A Balanced Gallery egy jQuery beépülő modul, amely egyenletesen osztja el a fényképeket sorok vagy oszlopok között, így a lehető legtöbbet hozva ki a rendelkezésre álló helyből. A fotók alapértelmezés szerint a „tároló” elem mérete alapján vannak méretezve, így a Balanced Gallery jó választás reszponzív webhelyekhez.
Demo és letöltés

16.S Galéria


Az S Gallery a HTML5 Full Screen API-ját használja, és nagymértékben támaszkodik a CSS3 animációk jóságára és a CSS3 átalakításokra, így csak azokban a böngészőkben fog működni, amelyek támogatják ezeket a funkciókat.
Demo és letöltés

17. Ultimate Grid Responsive Gallery


Ez egy HTML | css | jQuery Grid with a Lightbox, megadhat miniatűröket a rácshoz, és ha rákattint az átvilágítódoboz megnyitásához, akkor betölti a normál képet, megadhatja a feliratok és a lightbox szövegét. Ezenkívül nem kell egyszerre betöltenie az összes képet (a teljesítmény érdekében), így megadhatja, hogy az első betöltéskor hány képeket töltsön be, és a betöltendő képek számát, amikor a „több kép betöltése” gombra kattint.


A Responsive Thumbnail Gallery egy jQuery beépülő modul, amellyel képgalériákat hozhat létre, amelyek a tárolójukhoz illeszkednek.
Demo és letöltés


A SuperBox egy jQuery beépülő modul, amely egy lépéssel továbbviszi a teljes „képet” és a „lightbox”-ot, csökkentve a JavaScript- és képbetöltés-függőséget, így a lightbox a múlté! HTML5 data-* attribútumok, reszponzív elrendezések és jQuery használata.

A SuperBox statikus képgalériaként csodákat tesz, amelyre kattintva felfedheti a kép teljes verzióját.
Demo és letöltés


Az Ultimate Thumbnail gallery egy teljesen reszponzív képgaléria-bővítmény, amely kétféle elrendezésben (rács és vonal, függőleges és vízszintes), görgetéssel (jScrollPane) vagy gombos navigációval érhető el. A miniatűr dobozok támogatják a bennük lévő HTML elemeket.

Sziasztok kedves olvasók a! Ebben az oktatóanyagban megmutatom, hogyan készíthetsz minimalista, de ugyanakkor kényelmes és funkcionális stílust jQuery fotógaléria, vagy egy képgalériát, ahogy tetszik. A galériában lehetőség van kategóriák létrehozására, majd szűrésre. Lehetőség van diavetítés futtatására is. A galéria minden böngészőben működik, így nem lesz probléma az adaptációval.

A galéria létrehozásához két ingyenes könyvtárat fogunk használni: fövenyés PrettyPhoto. Nagyban leegyszerűsítik a galéria létrehozását. Mint mindig, most is megtekintheti a munka eredményét a bemutató oldalon, valamint letöltheti az archívumot a munkagalériából és az összes forrásfájlt. Az egyetlen negatívum, ha szabad így mondanom, a nagy képekhez készített miniatűrök manuális létrehozása. Minden másra ez Képtár figyelemre méltó. Szintén !

HTML jelölés

Először is elemezzük a panelt a kategóriák listájával, ez egy felsorolásjeles lista ul . Ezenkívül a lista minden elemének egyedi osztálynévvel kell rendelkeznie.

1
2
3
4
5
6
7
8

<ul class="portfolio-categ filter">
<li > Kategóriák:</li>
<liclass="all active"> Összes</a>
<li class="cat-item-1">
1. kategória</a>
<li class="cat-item-2">
2. kategória</a>
<li class="cat-item-3">
3. kategória</a>
<li class="cat-item-4">
4. kategória</a>
</ul>

1
2
3
4
5
6
7
8
9
10
11


  • Mint fentebb említettük, a listaelemek a galéria képei. A lista minden eleme tartalmaz összetevőket. Ez maga a kép, vagy inkább annak miniatűrje, valamint egy leírás. A miniatűr a fő képre mutató hivatkozás. A rel attribútum szükséges a javascript meghívásához és a fő kép megnyitásához.

    Ne feledkezzen meg 2 fontos dologról sem, a li list elemnek egyedi data-id attribútummal kell rendelkeznie. A data-type attribútum tartalmazza a kategória osztályt, melynek listáját fentebb leírtam. Úgy tűnik, minden a jelölésről szól.

    CSS stílusok

    Nem a stílusokra koncentrálok, hiszen kész könyvtárat használunk PrettyPhoto, ami a kép növeléséért felelős, és rengeteg css kód van. Érdemes azonban megjegyezni, hogy a kinagyított képhez 5 tervezési lehetőség van, bár ideális esetben csak 3, mivel két lehetőségnél csak a kerekítést távolítják el.

    Ezért a bélyegképekhez és a kategóriák listájához csak a CSS-stílusokat fogom megjeleníteni.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28

    Portfólió-kategória ( margó-alsó : 30 képpont ; )
    .portfolio-categ li(
    kijelző: inline
    margó-jobb : 10 képpont ;
    }
    .image-block(
    kijelző : blokk ;
    pozíció : relatív ;
    }
    .image-block img(
    keret : 1px tömör #d5d5d5 ;
    határsugár : 4px 4px 4px 4px ;
    háttér : #FFFFFF ;
    kitöltés: 10px
    }
    .image-block img:hover(
    keret : 1px tömör #A9CF54 ;
    box-shadow : 0 0 5px #A9CF54 ;
    }
    .portfolio-area li (
    balra lebeg ;
    margó : 0 12px 20px 0 ;
    túlcsordulás: rejtett
    szélesség: 245 képpont;
    kitöltés: 5px
    }
    .home-portfolio-text ( margin-top : 10px ; )
    li.active a ( szövegdekoráció : aláhúzás ; )

    Elvileg mindennek világosnak kell lennie a stílusokkal. A kategóriák sorba rendezéséhez a megjelenítési tulajdonság inline értékre van állítva. Ahhoz, hogy a kép körvonalas hatást adjon, a háttérszín (fehér) és a 10 képpontos kitöltés be van állítva. A listaelemek méretei a .portfolio-area li értékben vannak beállítva.

    jQuery

    És végül a legfontosabb dolog, amiért az egész lecke. Ez a jQuery kód. Kezdjük a képek kategóriák szerinti szűrésével.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23

    // Válassza ki a portfólióterület összes gyermekelemét, és írjon egy változóba
    var $adatok = $(".portfolio-area" ) .clone () ;

    $(".portfolio-categli" ) .click (függvény (e) (
    $(.filter li" ) .removeClass ("aktív" ) ;

    var filterClass= $(this ) .attr ("osztály" ) .split (" " ) .slice (- 1 ) [ 0 ] ;

    if (filterClass == "all" ) (
    var $filteredData = $data.find(.portfolio-item2" ) ;
    ) más (
    var $filteredData = $data.find(.portfolio-item2" ) ;
    }
    $(".portfolio-area" ) .quicksand ($filteredData, (
    időtartam: 600
    magasság beállítása: "auto"
    ), függvény () (

    LightboxPhoto() ;
    } ) ;
    $(this ).addClass("aktív" ) ;
    return false ;
    } ) ;

    A clone() metódus és egy szelektor segítségével kijelöljük a .portfolio-area összes gyermekét, és beírjuk a $data változóba. Ezután követjük a kattintást az egyik kategóriára, a lista li elemére a .portfolio-categ osztállyal. Minden kategóriát inaktívvá teszünk a removeClass("aktív") eltávolításával, ha ez nem történik meg, idővel minden kategória aktív lesz, és a szűrés leáll.

    Mivel a lista elemre kattintunk, ez a választó tartalmazza a lista elemet, vagyis a li -t, ebből kivesszük az osztály attribútum értékét és a split metódus segítségével az osztály nevét több részre bontjuk, a határ szóköz (vagyis ha az osztály „minden aktív” volt, akkor a felosztás után egy „mind” és „aktív” tömböt kapunk). Ezután a slice módszerrel kiválasztjuk a tömb első elemét (esetünkben az „all”), és az eredményt a filterClass változóba írjuk. Ha nincs szóköz, akkor az osztály neve nem változik.

    Ezután ellenőrizzük, hogy a sztring a filterClass változóban van-e összes, majd a .find metódussal kijelöljük az összes portfolio-item2 osztályú elemet a $data tömbből, amit fentebb megvizsgáltunk. A kiválasztott elemek (és ezek mind a lista elemei, vagyis az összes kép) a filteredData változóba kerülnek.

    Ellenkező esetben, ha a filterClass nem egyenlő összes, akkor a filterData változóba nem a lista összes elemét tesszük, hanem csak azokat, amelyek adattípus attribútuma megegyezik a kategória osztályával. Röviden, csak egy kategória elemei.

    És végül a kapott változót átadjuk a könyvtárnak jquery futóhomok, amely képszűrést végez. Minden a szűrésről szól.

    Most, ami a kép nagyítását illeti a felugró ablakban. Itt minden sokkal egyszerűbb.

    1
    2
    3
    4
    5
    6
    7

    jQuery("a") .prettyPhoto ((
    animációs sebesség: "gyors",
    diavetítés: 5000
    téma: "facebook",
    show_title: false ,
    overlay_gallery: false
    } ) ;

    Nyomon követi a linkre történő kattintást, amelynek rel attribútuma prettyPhoto karakterrel kezdődik. Ezután a könyvtár lép játékba. szépPhoto, és a kép csodálatos módon megnagyobbodik. Egyébként több paramétert is átadunk. Ilyen például az animáció gyorsasága, a diavetítés késleltetése 5 másodperc, a Facebook téma (összesen 5 téma van, ezek a képek / prettyPhoto mappában vannak), valamint tiltjuk a kép nevének megjelenítését, ill. növeli a képet, amikor az egérrel rámutat. Teljes dokumentáció a szépPhoto található

    Ha szeretne naprakész lenni a legfrissebb cikkekkel és leckékkel, iratkozzon fel

    Hosszú választotta a témát a mai témához. Ennek eredményeként azt vettem észre, hogy még nem válogattunk képgalériák. Szerintem remek téma, mert galériák számos oldalon jelen vannak. Őszintén szólva egyikük sem túl vonzó. Figyelembe véve a jelenlegi fejlődési trendeket jquery, html5 stb. gondoltam, mert már sokkal vonzóbb megoldások kellenek, mint azok, amikkel korábban találkoztam. Így. Egy nap eltöltése után rengeteg forgatókönyvet sikerült találnunk. Ebből az egész hegyből úgy döntöttem, hogy csak válogatok, mert szeretem, ahogy az előző bejegyzésekből már észrevettétek.
    Képgaléria nem csak arra vonatkozik fotóalbumokkal. A forgatókönyv használható, szerintem még korrektebb lesz, mint portfólió fotósoknak, tervezőknek stb. jquery effektusok segít felhívni a látogatók figyelmét, és egyszerűen eleganciát varázsol webhelyére.
    Így. Gyűjtemény figyelmébe jquery képgaléria bővítmények a webhelyhez.
    Ne felejtsen el hozzászólni, és ne feledje, hogy ne veszítse el ezt a gyűjteményt, a cikk alján lévő csillagra kattintva hozzáadhatja kedvenceihez.

    FOTÓBOX
    Ingyenes, könnyű, reszponzív képgaléria, amelyben minden effekt, átmenet css3 segítségével történik. Ideális portfólió weboldal készítéséhez egy fotós számára.

    S Galéria
    Vonzó jquery képgaléria bővítmény. Az animáció css3-mal működik.

    GYÉMÁNTOK.JS
    Eredeti képgaléria bővítmény. A miniatűrök formáltak rombusz ami jelenleg nagyon népszerű. Ez az űrlap css3-mal készült. A galéria egyetlen negatívuma, hogy nincs olyan világítódoboz, amely teljes méretben nyitná meg a fotót. Vagyis rákkal kell rögzíteni a lightbox plugint. Ez a szkript adaptív rombusz alakú képrácsot hoz létre.

    Superbox
    Modern képgaléria segítségével jquery, css3 és html5. Mindannyian megszoktuk, hogy az előnézetre kattintva a teljes kép megnyílik egy átvilágítódobozban (felugró ablakban). A beépülő modul fejlesztői úgy döntöttek, hogy a lightbox már túlélte a hasznosságát. A galéria képei az előnézet alatt nyílnak meg. Nézze meg a bemutatót, és nézze meg, hogy ez a megoldás sokkal modernebbnek tűnik.
    |
    Smooth Diagonal Fade Gallery
    Modern képtár, amelyben az előnézetek a teljes képernyőterületen el vannak osztva. A szkript képes beolvasni a kiszolgálón lévő fényképeket tartalmazó mappákat, vagyis nem kell minden képet külön beilleszteni. Elegendő képeket feltölteni egy mappába a szerveren, és a beállításokban megadni a könyvtár elérési útját. Ezután a forgatókönyv mindent maga csinál.

    Gamma Galéria
    Stílusos, könnyű, reszponzív képgaléria Pinterest-stílusú ráccsal, amely most nagyon népszerű. A script jól működik, mint helyhez kötött számítógépek, hamar mobil eszközök bármilyen képernyőfelbontással. Kiváló megoldás webdesign portfólió készítéséhez.

    MINŐSÉGRÁCS BŐVÜLŐ ELŐNÉZETTEL
    A plugin az adaptív képrács. Az alábbiakra kattintva nagyobb kép és leírás jelenik meg. Kiváló portfólióépítéshez.

    jGallery
    jGallery az Teljes képernyő, adaptív galéria képeket. Az effektusok, az átmenetek és az egyenletes stílus könnyen beállítható.

    Glisse.js
    Egy egyszerű, de nagyon hatékony képgaléria bővítmény. Pontosan ez a megoldás, ha fényképalbumot kell készítenie. A beépülő modul támogatja az albumokat, és nagyon klassz lapozási effektussal rendelkezik.

    Mosaic Flow
    Egyszerű, adaptív képgaléria Pinterest stílusú rácsozattal.

    Képtár
    Egy másik stílusos Pinterest stílusú rácsgaléria kategóriaszűrővel. Működik a következő böngészőkkel: Chrome, Safari, Firefox, Opera, IE7+, Android böngésző, Chrome mobil, Firefox mobil.

    legalább.js
    Kiváló ingyenes képgaléria Val vel a JQUERY használatával, 5 és CSS3. Van egy nagyon vonzó megjelenésés biztosan felkelti majd látogatói figyelmét.

    flipLightBox
    Egy egyszerű képgaléria. Ha az előnézetre kattint, a teljes kép megnyílik az átvilágítódobozban.

    blueimp galéria
    Rugalmas galéria. A modális ablakban nem csak képeket, hanem képeket is képes megjeleníteni videó-. Remekül működik rajta érintős eszközök. Könnyen testreszabható, és a funkcionalitás további bővítményekkel bővíthető (lásd a következő bővítményt).

    írta: Dmitrij Szemenov
    egy jQuery képgaléria és tartalomcsúszka bővítmény. Teljesen reszponzív, érintésbarát, és moduláris felépítésű, amely lehetővé teszi, hogy csak a fájlméret és a teljesítmény optimalizálásához szükséges funkciókat tartalmazza.

    írta Andy
    Egy nagymértékben testreszabható galéria/bemutató bővítmény a jQuery számára.

    írta Trent
    A Galleriffic egy jQuery beépülő modul, amely gazdag, visszaküldés nélküli élményt biztosít, amely nagy mennyiségű fénykép kezelésére van optimalizálva, miközben megőrzi a sávszélességet.

    Tonic Gallery - jQuery XML Portfolio Gallery | 6 dollár

    írta Aino
    A Galleria egy JavaScript képgaléria keretrendszer, amely a jQuery könyvtárra épül. A cél a professzionális képgalériák webes és mobileszközökön történő létrehozásának folyamatának egyszerűsítése.

    készítette: CatchMyFame
    A minap kerestem egy egyszerű módot a jQuery használatával, hogy elhalványuljak az oldalon lévő képek között. Tehát kódoló lévén, saját beépülő modul létrehozását tűztem ki célul.

    írta Thomas Kahn
    A Smooth Div Scroll egy jQuery beépülő modul, amely vízszintesen görgeti a tartalmat balra vagy jobbra. A jQuery számára írt sok egyéb görgetőbővítményen kívül a Smooth Div Scroll nem korlátozza a görgetést különálló lépésekre.

    írta: Victor Zambrano – frwrd.net
    A Minishowcase egy kicsi és egyszerű php/javascript online fotógaléria, amelyet AJAX hajt, és amely lehetővé teszi a képek egyszerű online megjelenítését, bonyolult adatbázisok vagy kódolás nélkül, így néhány perc alatt elkészülhet a galéria.

    írta Caspar David Friedrich
    Az EOGallery egy webes animált diavetítés-galéria, amely a jQuery segítségével készült. Csak az alapvető jQuery funkciókat és Cody Lindley Thickbox-ját használja a nagyobb képek megjelenítéséhez.

    írta: Arnault Pachot
    Több formátumú körhinta a jQuery számára, nem zavaró és hozzáférhető portfólió, amely többféle médiát támogat: fényképek, videó (flv), hang (mp3). Ez a jQuery beépülő modul automatikusan felismeri az egyes médiák kiterjesztését, és alkalmazza az adaptált lejátszót.

    The Wall - Médiagaléria - jQuery powered | 5 dollár

    szerző: Stefan Peter
    Egy másik képgaléria-bővítmény térhatású, nagyon könnyű és egyszerű bővítmény.

    írta: Moreno Di Domenico
    A jmFullWall egy jQuery plugin lenyűgöző portfólió létrehozásához.

    írta: Fabrizio Calderan
    A Mosaiqy egy jQuery beépülő modul, amellyel megtekintheti és nagyíthatja a fényképeket Opera 9+, Firefox 3.6+, Safari 3.2+, Chrome és IE7+ verziókon. A fényképeket a rendszer egy JSON/JSONP adatstruktúrából kéri le, és véletlenszerűen helyezi át a rácson belül. Az összes költséges animációt a GPU átveszi a legújabb böngészőkben CSS3 átmenetekkel, minimalizálva a CPU többletterhelését.

    írta Cody
    A következő jQuery beépülő modul egy képkészletet alakít át egy apró galériává, amely számos lehetőséget kínál. A Micro Image Gallery lehetővé teszi a váltást a képek előnézetét miniatűrként megjelenítő rácsnézet és a csak egy képet megjelenítő egyetlen nézet között.

    VION – jQuery Image Gallery Plugin | 7 dollár

    írta Malihu
    Egy egyszerű, mégis elegáns teljes képernyős képgaléria a jQuery keretrendszerrel és néhány egyszerű CSS-sel.