Galéria szkript miniatűrökkel. Gyönyörű galéria válogatással a JQuery-ben. jQuery Swap Gallery

Sziasztok kedves olvasók! Ebben az oktatóanyagban megmutatom, hogyan készíthetsz minimalista, de ugyanakkor kényelmes és funkcionális stílust képgaléria a jQuery-n, vagy egy képgalériát, ahogy szeretné. 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 indítá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 kell használni: FövenyÉs PrettyPhoto. Sokkal könnyebbé teszik a galéria létrehozását. Mint mindig, most is megtekintheti a munka eredményét a bemutató oldalon, és letöltheti az archívumot a munkagalériából, és kész forrás fájlok. Az egyetlen hátrány, hogy úgy mondjam, a bélyegképek manuális létrehozása nagy képekhez. És ebben minden másban Képtár figyelemre méltó. Szintén !

HTML jelölés

Először is nézzük meg a panelt a kategóriák listájával, ez az pontozott lista ul. Ezenkívül minden listaelemnek egyedi osztálynévvel kell rendelkeznie.

1 2 3 4 5 6 7 8 9 10 11

A kép neve Megjelent: 2012

Mint fentebb említettük, a listaelemek a galériában található képek. Minden listaelem 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 feledkezzünk 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 fogok különösebben a stílusokra koncentrálni, mivel egy kész könyvtárat használunk PrettyPhoto, amely a kép nagyításáért felelős, és css kódot elég. Érdemes azonban megjegyezni, hogy 5 lehetőség van a kinagyított kép megtervezésére, 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 csak megmutatom CSS stílusok bélyegképekhez és kategóriák listájához.

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örvonala legyen, állítsa a háttérszínt (fehér) és a kitöltést 10 képpontra. A listaelemek méretei a .portfolio-area li értékben vannak beállítva.

jQuery

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

A clone() metódus és egy szelektor segítségével kijelöljük a .portfolio-area összes gyermekelemé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 egy listaelemre kattintunk, ez a választó tartalmaz egy lista elemet, vagyis a li -t, ebből vesszük ki az osztály attribútum értékét és a split metódussal több részre bontjuk az osztály nevét, a szegély egy szóköz (vagyis ha az osztály "minden aktív" volt, akkor a felosztás után egy "összes" és "aktív" tömböt kapunk). Ezután a slice módszerrel kiválasztjuk a tömb első elemét (esetünkben az „összes”), és a kapott eredményt a filterClass változóba írjuk. Ha nincs szóköz, az osztály neve nem változik.

Ezután ellenőrizzük, hogy a filterClass változó tartalmazza-e a karakterláncot minden, 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ő minden, akkor a filterData változóba nem helyezzük el a lista minden elemét, 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 átadjuk a kapott változót a könyvtárnak jquery futóhomok, amely szűri a képeket. Ennyi a szűréshez.

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

A rendszer nyomon követi az olyan hivatkozásra történő kattintást, amelynek rel attribútuma a 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-design téma (összesen 5 téma van, ezek a képek/prettyPhoto mappában találhatók), valamint tiltjuk a kép nevének megjelenítését, ill. a kép nagyítása az egér lebegtetése közben. Teljes dokumentáció a szépPhoto található

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

1. jQuery galéria lapfordító hatással

Hasonló megoldással a legfrissebb blogcikkeket is megjeleníthetjük, vagy termékeket mutathatunk be.

Egyedülálló módja annak, hogy fotóit megjelenítse egy díszes jQuery galériában.

3. jQuery képgaléria egy termékhez, „slideJS” bővítmény

A jQuery beépülő modul tökéletes egy több képet tartalmazó termékoldal megvalósításához. A képek közötti átmenet miniatűrök vagy navigációs nyilak segítségével történhet.

A kép megnagyobbodik, ha fölé viszi az egeret.

5. Elegáns átvilágítódoboz-galéria „ppGallery”

6. jQuery Touch-Gallery

7. Új jQuery galéria miniatűrökkel

Professzionális jQuery galéria 2011.

8. jQuery plugin „Nivo Zoom”

Egy másik kiváló minőségű jQuery plugin a Nivo slider fejlesztőitől. Nagyítsd fel a képet a miniatűrre kattintva.

9. jQuery 3d fali galéria

Új jQuery galéria 2011-re. A képek betáplálása a képernyő teljes szélességére kiterjed. Háromféleképpen navigálhat a fotók között: az egérgörgővel, a galéria tetején görgetve és az alján található miniatűr blokk használatával. A galéria nagyon lenyűgözőnek tűnik.

A galéria képei véletlenszerűen nagyításra és kicsinyítésre kerülnek, így buborékhatás jön létre.

11. Szokatlan képek megjelenítése a jQuery galériában

A tetején lévő csúszkával módosíthatja a halmban lévő képek közötti távolságot. Ha rákattint egy képre, az elfordul.

12. jQuery galéria bővítmény „MB.Gallery”

13. jQuery galéria, amely a teljes képernyőt kitölti

Plugin 2011-ből. Egy új galéria képek leírásával, amely a böngészőablak teljes területén kiterjed, méretétől függetlenül. A képek miniatűrjei érdekesen vannak megvalósítva. A fotók közötti átmenet a bélyegkép melletti nyilak és az egérgörgő segítségével történik.

14. Könnyű jQuery galéria

A beépülő modul automatikusan átvizsgálja a mappát, és kis másolatokat készít a képekről.

16. Stílusos galéria a jQuery és Raphael könyvtárak használatával

Érdekes hatás, ha az egeret egy miniatűr fölé viszi.

17. A jQuery bővítmény „Supersized” új verziója, 3.1

Nemrég már említettem ezt a jQuery megoldást teljes képernyős galériák létrehozására. Ma szeretném bemutatni nektek legújabb verzió ezt a professzionális bővítményt. A forgatókönyvet teljesen átírták, most a galéria még gyorsabban működik, és néhány érdekes beállítás is hozzáadásra került, például a billentyűzet segítségével történő navigáció, a változó sebességű képváltás, a képernyő mérete és egyebek.

18. „Galleria 1.2.2” jQuery bővítmény

Új jQuery galéria projektjeihez.

A galéria megjelenik az oldalon, ha megnyom egy gombot. A kinagyított kép körül miniatűrök jelennek meg. Szabályozhatja a képek automatikus váltását. Felhasznált technológiák: jQuery, CSS, PHP.

20. „Timer Gallery” beépülő modul

jQuery galéria. Megvalósult a diák automatikus váltása és a miniatűrök görgetése, ha túl sok van belőlük.

Képgaléria bővítmény a jQuery használatával.

22. javascript galéria mobileszközökön való megtekintéshez „PhotoSwipe”

Megtekintésre optimalizált képgaléria mobil eszközök ah (telefonok vagy táblagépek).

23. javascript galéria 3D hatással

24. jQuery morphing galéria

Új jQuery csúszka. Számos klassz animációs effektus diák váltásakor.

25. „Galleria 1.2.3” jQuery bővítmény

26. jQuery képgaléria „Képfal”

Eredeti galéria különböző méretű miniatúrák formájában, a képernyőn szétszórva, festményként stilizálva. Ha rákattint a miniatűrre, megjelenik egy terület a kép leírásával, és ha ismét rákattint, az eredeti megjelenik nagy kép.

27. CSS3 galéria

Érdekes lebegő hatás.

28. Galéria miniatűrökkel „TN3 Galéria”

jQyery galéria miniatűrökkel. Megvalósult a kompakt ablakban és a teljes képernyős ablakban való megtekintés lehetősége, valamint az automatikus diaváltás letiltása/engedélyezése.

29. Képrács „Rács-galéria”

A képrács a böngészőablak szélességétől függően megnyúlik. Érdekes hover effektus: az aktív sor és oszlop kiemelve.

30. jQuery Swap Gallery

Könnyű jQuery galéria néhány soros kóddal.

A demóoldal számos lehetőséget kínál a legördülő mega menükhöz, különböző stílusokban. Ebben a menüben konfigurálható: a kiesési effektus, a lemorzsolódás sebessége, valamint a lemorzsolódás között is választhat, ha rákattint vagy az egeret egy elem fölé viszi.

31. jQuery Képgaléria

jQuery galéria képaláírásokkal. Számos diaátmenet effektus. A képek között a nyilak segítségével vagy a miniatűrre kattintva lehet navigálni.

A kép és miniatúrái körök formájában készülnek.

33. A jQuery fotós portfólióbővítménye „Portfolio Image Navigation”

Eredeti javascript megoldás fotós portfólió megtervezéséhez. A képek közötti navigáció a Fel/Bal/Jobb nyilakkal és mini-négyzetekkel (a mozgás utánzása a 2D térben) történik. A különböző fotózásokon készült fényképeket különböző függőleges sorokba csoportosíthatja, és navigációs elemek segítségével navigálhat rajtuk. Nézze meg a demót.

34. „jmFullZoom” beépülő modul

Beépülő modul a böngészőablak teljes méretére kiterjedő képek megtekintéséhez. Portfólió alkotásainak megjelenítésére használható.

35. Fényképkártya

Galéria integrálva Google Térkép. A jobb alsó sarokban lévő ikonra kattintva teljes képernyőre bővítheti. Ideális utazási weboldalakhoz.

36. Képgaléria miniatűrökkel

jQuery galéria miniatűrökkel.

37. jQuery galéria „Galleriffic”

Diavetítés miniatűrökkel.

38. jQuery CSS3 plugin „Wave Display Effect”

Képek és tartalom hullámszerű megjelenítése egy oldalon. Ha rákattint egy miniatűrre, az összes kép kinagyítja, és megjelenik a neve. Ha újra megnyomja, megnyílik egy blokk a fénykép leírásával.

Számos megjelenítési lehetőség és beállítás.

42. Plogger

43. Egy egyszerű, aranyos galéria CSS-sel, szkriptek használata nélkül

Gyönyörűen néz ki és mindenben jól működik modern böngészők

Vezérelheti az automatikus diavetítést (start/stop), diaváltást a billentyűzet nyilakkal, a diacímek automatikus oldalszámozását, ha sok van belőlük, támogatja több galériát egy oldalon, feliratozást a diákhoz, API-támogatást és saját létrehozásának lehetőségét. diaátmenet effektusok

46. ​​Galéria egy köteg fotó formájában

Így kell kinéznie az általunk elkészített galéria eredményének. Megtekintheti a demót, és ha szeretné, letöltheti a galéria végeredményét.

Szkriptgyűjteményünkben apró, de nagyon hasznos és funkcionális bővítményeket találhat webhelyéhez. Az eszközökre térve jQueryKéptár, könnyen rendezhető galéria digitális fényképek szép kialakítással, görgetéssel, nagyítással, miniatűrök megtekintésével és sok más lehetőséggel hasznos funkciókat. Léteznek szigorú megoldások a professzionális weboldalakhoz, és világosak animációval és egyéb speciális effektusokkal szórakoztató projektekhez.

Útján jQuery képek megtekinthető az oldal újratöltése és a forgalom növelése nélkül. A bemutatott bővítmények lehetővé teszik a képek valós idejű betöltésének optimalizálását és a galéria kényelmes és felhasználóbarát bemutatását. Köszönhetően a könnyű beállításnak és a számos elérhető megoldásnak, a saját jQuery fotógaléria most pontosan úgy nézhet ki, ahogy szeretné. A bemutatott szkripteket különböző platformokon tesztelték, és kiváló kompatibilitásuk van.

Üdv mindenkinek!
A legkülönbözőbb kategóriájú fejlesztőket a következő webes projektjük létrehozásakor gyakran érdekli az a kérdés, hogy hogyan mutassanak be felhasználóiknak különféle típusú képeket, legyenek azok fényképek vagy képkészletek. Ehhez az online tér érdeklődő elméi – ez nagyrészt természetesen „polgári” tér – egyre több új megoldást keresnek látványos, színes, és legfőképpen funkcionális diavetítések, fotógalériák létrehozására. A legtöbb esetben a fejlesztők testreszabják őket, hogy illeszkedjenek a készülő webprojekt sablonjának kialakításához, vagy bővítmények és modulok formájában egy adott webhelykezelő motorhoz. Érdemes megnézni modern sablonok számára, ritka kivételektől eltekintve egyetlen téma sem nélkülözheti valamiféle beépülő csúszkát vagy egyszerű képforgatót. Így érthető, hogy sok webfejlesztő valami ilyesmit szeretne a tarsolyában tartani, és a lehető legteljesebb mértékben meglepni olvasóit azzal, hogy hatékonyan jelenít meg képeket az oldalain.

Folytatva az alkotás során felmerülő új megoldásokról szóló áttekintések sorozatát, úgy döntöttem, hogy összeállítok egy teljesebb gyűjteményt az eddigi legérdekesebb és leghatékonyabb diavetítésekből és fotógalériákból, amelyeket a jQuery varázslatával hoztam létre.
Azonnal szeretném figyelmeztetni, hogy a jelen áttekintésben tárgyalt források főként a következőkön alapulnak angol nyelv, de szerintem akinek szüksége van rá, az intuitívan vagy fordítók segítségével kitalálja, akikből egy fillér van egy tucat. És ha elég alaposan keres, találhat leírásokat egyes galériák és csúszkák létrehozásának technikájáról orosz nyelven, mivel sok webfejlesztőnk fordít egy adott projekten, először saját magának, majd részletes leírást tesz közzé minden manipulációjáról. ingyenes hozzáférésért.
Például ezt csináltam, amikor a létrehozási mechanizmuson dolgoztam, először a burzhunetben találtam egy számomra megfelelő galérialehetőséget, lefordítottam, hogy jobban megértsem, mit csinálok, és a jövőben remélem, nem rossz cikk lett a Highslide szkript használatáról, különféle alkalmazásváltozatokban végzett munka példákkal.
És hát, elég a felesleges dalszövegekből, folytassuk közvetlenül az áttekintést, nézzük meg, olvassuk el a rövid magyarázatokat, és válogassunk a rengeteg új jQuery beépülő modul és szkript közül érdekes képcsúszkák, fotógalériák, diavetítések megvalósításához a webhelyeken: automatikus és kézi váltás csúszkák, háttérképek csúszkák, miniatűrökkel és anélkül, stb. stb...

Of.Site | Demó

Egy teljes, testreszabható jQuery képgaléria diavetítés elemekkel, átmenet effektusokkal és több albumbeállítással. Kompatibilis az összes modern asztali és mobil böngészővel.

Oktatóanyag a teljes képernyős galéria létrehozásáról a jQuery használatával. Az ötlet az, hogy a kiemelt teljes képernyős kép miniatűrje oldalt jelenjen meg, tükrözve, ahogy a nyilak vagy az egérkattintás segítségével mozog a képek között. A nagy képek diavetítés stílusban felfelé vagy lefelé mozognak a választott átmenettől függően. Képméretezési lehetőség, amely a háttérben látható képet teljes képernyős módban vagy az oldalmérethez igazítva teszi láthatóvá.

Parallax Slider

Parallax SliderÉrdekes megoldás a képek megjelenítésének megszervezésére diavetítés formájában kézi vezérlőelemekkel. A miniatűr képek eredeti elhelyezése felkelti a figyelmet. A hivatalos webhelyen teljes körű leírás található a csúszka integrálásával és konfigurálásával kapcsolatban.

Minimalista diavetítés galéria a jQuery segítségével Kiváló képgaléria a képek automatikus váltásához szükséges elemekkel, valamint a képek megjelenítésének és kiválasztásának manuális vezérlése egy miniatűrrácsot tartalmazó legördülő blokkból. Az egyik hátránya a teljes méretű képek megtekintésének hiánya, de ez a galéria minimalizmusa.

Ez egy teljes képernyős diavetítés automatikusan változó képekkel, észbontó effektusok nélkül, minden egyszerű és ízléses.

Minimit Gallery egy nagymértékben testreszabható jQuery beépülő modul, amely az átmenetek nagy választékát kínálja a képek megjelenítésekor. A Minimit galéria segítségével megszervezheti a képek megjelenítését körhinta, diavetítés, egyszerű forgató és normál képgörgető formájában.

egy apró (2 kb) jQuery beépülő modul, amely egyszerű, értelmetlen módot kínál a képek diavetítésként történő megjelenítésére.

egy szép megjelenésű javascript-galéria, intuitív kezelőszervekkel és zökkenőmentes kompatibilitással minden számítógépen, iPhone-on és mobileszközön. Nagyon könnyen telepíthető és konfigurálható

Sok Javascript és jQuery képcsúszkával ellentétben a Slider.js egy hibrid megoldás, amelyet CSS3 átmenetek és animációk hajtanak végre.

Ez egy egyoldalas sablon különféle prezentációk létrehozásához HTML5-ben és CSS3-ban.

Diapo a diavetítés egy projekt nyílt forráskód. Ha szeretné, javasolhat változtatásokat vagy fejlesztéseket. Ingyenesen letöltheti és használhatja, és semmi és senki nem akadályozza meg, hogy ezt a csúszkát használja projektjeiben. A csúszka könnyen testre szabható, érdekes átmenetek vannak a bemutatott tartalmak között, a csúszkába pedig bármit elhelyezhetünk, elég gyorsan működik, minden jamb nélkül.

nem más, mint egy újabb eszköz diavetítések készítéséhez webhelyeken és egyéb webes projektekben. Támogatja az összes modern böngészőt, vízszintes és függőleges animációkat, egyéni átmenetek támogatását, visszahívási API-t és még sok mást. Bármelyiket használhatod html elemek kezdőknek is érthető és hozzáférhető diák, teljesen ingyenesen terjesztve.

JavaScript diavetítés az agilis fejlesztéshez

Valósítsa meg diavetítéseit ezzel a fantasztikus jQuery beépülő modullal. Nagymértékben személyre szabható eszköz, amellyel igényei szerint alakíthatja tartalombemutatóját. A külső adatokkal vagy a CMS-ből származó adatokkal való könnyebb integráció érdekében a . Ez egy új verzióés a semmiből írva. A fejlesztők igyekeztek nagyon világosan és érthetően leírni az agyszüleményekkel való munka teljes folyamatát.

egy jQuery bővítmény, amely lehetővé teszi, hogy a rendezetlen listákat diavetítésekké alakítsa vonzó animációs effektusokkal. Diavetítésben megjelenítheti a diák listáját, akár számokkal vagy miniatűrökkel, akár az Előző és Következő gombokkal. A csúszkának számos eredeti animációtípusa van, beleértve a kockát (különféle altípusokkal), a csövet, a blokkot és egyebeket.

Eszközök teljes készlete különféle tartalmú prezentációk megszervezéséhez webes projektjein. A burzsoá srácok mindent megtettek, szinte mindenféle csúszkát és galériát használtak a jQuery varázslatával. Fotócsúszka, fotógaléria, dinamikus diavetítés, körhinta, tartalomcsúszka, lapok menü és még sok minden más, általában van hely fékezhetetlen képzeletünk elszabadulásához.

Ez egy jQuery diavetítés-bővítmény, amely az egyszerűséget szem előtt tartva készült. Csak a leghasznosabb funkciókat tartalmazza, kezdőknek és haladóknak egyaránt, lehetőséget adva egyszerű, de ugyanakkor nagyon hatékony, felhasználóbarát diavetítések készítésére.

— egy egyszerű, jQuery-re épített csúszka, minden szempontból egyszerű, különösebb szaktudást nem igényel, szerintem sokan hasznosnak találják majd a diavetítések megvalósításában a weboldalukon. A beépülő modult minden modern böngészőben tesztelték, beleértve a lassú IE böngészőt is.

jbgaléria- ez egyfajta widget felhasználói felület, JavaScriptben írva a jQuery könyvtárból. Feladata egy nagy kép megjelenítése az oldal háttereként teljes képernyős módban, több kép csúszka formájában. Minden megtekintési mód rendelkezik megtekintési vezérlőkkel. Ez egy érdekes megoldás a maga módján, és bizonyos esetekben nem is szabványos.

Ez egy könnyen használható jQuery beépülő modul, amellyel fényképeit diavetítésként jelenítheti meg a képek közötti átmeneti effektusokkal (látott már érdekesebbeket is). A jqFancyTransitions kompatibilis és alaposan tesztelt a Safari 2+ verzióval. internet böngésző 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

egy szabadon terjesztett jQuery beépülő modul a képek és egyéb információk átvilágítódoboz formában történő megtekintéséhez. Felugró ablak kezelőszervekkel, árnyékolt háttérrel és minden mással, egyszerű és ízléses.

Egy másik jQuery plugin a Lightbox sorozatból, bár felháborítóan keveset nyom (9 KB), de rengeteg funkcióval rendelkezik. Van egy megfelelően megtervezett felület, amelyet mindig javíthat vagy testreszabhat a CSS használatával.

Már a névből is kiderül, hogy nincs semmi felkapott, van egy nagyon egyszerű automatikus képgörgőnk, teljesen hiányzó vezérlőkkel. Ki tudja, talán ez a csúszka éppen a minimalizmusával vonzza majd fel a figyelmet.

Képforgató különféle típusokátmenetek. Automatikusan és kattintással is működik, és meglehetősen könnyű beállítani.

— egy teljes értékű képgaléria, nem csak egy csúszka. Előnézet miniatűrök és az átmeneti effektusok kiválasztásának lehetősége, az összes böngésző teljes támogatása, a webprojektbe való integráció részletes leírása és az ingyenes terjesztés.

Ez a használatra kész diavetítések megvalósítása scriptaculous/prototype vagy jQuery használatával. A Horinaja némileg innovatív megoldás, mert lehetővé teszi, hogy görgővel görgessünk a csúszkába helyezett tartalom között. Ha az egérmutató a diavetítés területén kívül van, a görgetés automatikusan megtörténik; ha a mutatót a diavetítés fölé helyezi, a görgetés leáll.

Ez a funkció egy sor egyszerű képgörgetőből származik, bár megtekintési vezérlőkkel, ezért automatikus és kézi módban is működik.

s3Slider egy jQuery beépülő modul, amely diavetítést hoz létre a képek rendezetlen listájából, és könnyen megvalósítható bármilyen webes platformon.

Ez egy jQuery beépülő modul, amely nagy mennyiségű fénykép feldolgozására van optimalizálva mentéskor sávszélesség.

Vegas háttér

A Vegas Background jQuery bővítmény lehetővé teszi, hogy gyönyörű teljes képernyős háttérképeket adjon a weboldalakhoz, mindezt diavetítési elemekkel. Ha figyelmesen tanulmányozza a bővítménnyel való munkavégzés bonyolultságát, sok érdekes megoldást találhat, természetesen csak akkor, ha szüksége van rá.

— egy csúszka csúszkaként, se több, se kevesebb, képaláírásokkal vagy cikkek közleményeivel és egyszerű vezérlőkkel, véletlenszerűen.

egy könnyű (kb. 5 KB) javascript a képmegtekintés megszervezéséhez. Automatikus változás nagyméretű képek mérete és méretezése, lehetővé teszi a kép teljes méretben való megtekintését a böngészőablakban

Elérhető a PikaChoose jQuery Image Gallery 4-es verziója! A Pikachoose egy könnyű jQuery diavetítés nagyszerű funkciókkal! A beépülő modul fejlesztői a Fancybox-szal való integrációt, kiváló témákat (bár nem ingyeneseket) és még sok mást ajánlanak fel figyelmedbe.

Ellenőrzi az adatlapon szereplő képek számát, és digitális navigációként dinamikusan létrehoz egy fotóhivatkozás-készletet. Ezenkívül az egyes képekre kattintva előre vagy hátra mozoghat, és a képek között görgethető is attól függően, hogy a képre melyik területre kattint (például: a kép bal oldalára kattintva a diák előre-hátra mozog, illetve a kép jobb oldalára).

Egy másik jQuery csúszka, amely tökéletesen illeszkedik bármely WordPress sablonba.

A „Nivo” másik fejlesztése, mint minden, amit a stúdióból csinálnak, a plugin kiváló minőségben készült, 16 egyedi átmeneti effektust, billentyűzet-navigációt és még sok mást tartalmaz. Ez a verzió egy dedikált bővítményt tartalmaz közvetlenül a WordPresshez. Tehát a blogíró motor minden rajongója számára a Nivo Slider pont megfelelő lesz az Ön számára.

jQuery bővítmény, amellyel gyorsan hozhat létre egyszerű, hatékony és gyönyörű csúszka bármilyen méretű képhez.

Pirobox egy könnyű jQuery „lightbox” szkript, a megtekintés egy felugró blokkban történik, amely automatikusan igazodik a kép méretéhez, minden vezérlővel.

A galéria készítői a képek meglehetősen eredeti bemutatását kínálják. A képek miniatűrökben, hullám formájában jelennek meg, a miniatűrre kattintva a kép közepes méretű változatát látjuk, kattintsunk másodszor és egy nagy kép jelenik meg. Tekintheted ezt kísérletnek, de el kell ismerned, hogy valami új és szokatlan mindig érdekes.

Teljes képernyős diavetítés HTML5-tel és jQuery-vel

A diavetítések készítéséhez és a képek teljes képernyős módban történő megjelenítéséhez a fejlesztők a már jól ismert Vegas jQuery plugint használták, amely számos ötletet és technikát tartalmaz, amelyet korábban részletesen leírtak a csoport cikkeiben. A HTML5 hangelemek jelenléte és a képek közötti átmenet stílusa vonzó.

Újabb fejlesztés a Codrops csapatától, egy teljes értékű és működőképes képgaléria, de nincs értelme leírni, látni kell.

Képes diavetítés, a képek eltűnnek a szemed előtt, a hatás egyszerűen csodálatos.

A jQuery könyvtár tetejére épülő JavaScript képgaléria-keretrendszer. A cél a webes és mobileszközökhöz készült professzionális képgaléria fejlesztési folyamatának egyszerűsítése. Megtekintheti felugró ablakban vagy teljes képernyős módban.

Csendben kezdünk megszokni, és várjuk az újabb munkákat a Codrops csapatától. Kérjük, szerezzen be egy kiváló képcsúszkát csodálatos 3D-s átmenet effektussal a képek teljes képernyős módban történő megtekintéséhez.

Egy másik WordPress bővítmény a diavetítés-szervező sorozatból. Könnyen integrálható szinte bármilyen kialakításba, és számos testreszabási lehetőséget kínál tapasztalt felhasználók, és a tapasztalatlanoknak is.

Egy másik, a WordPresshez írt bővítmény, amely sokkal könnyebbé teszi a képek vagy bármilyen más tartalom diavetítésének megszervezését a blogjain.

Jó diavetítési bővítmény a WordPressbe való integrációhoz. A Xili-floom-slideshow automatikusan telepítésre kerül, és a személyes beállítások is megengedettek.

Slimbox2 egy jól bevált WordPress beépülő modul a képek átvilágítódoboz effektussal való megjelenítéséhez. Támogatja az automatikus diavetítést és a képek átméretezését a böngészőablakban. Általánosságban elmondható, hogy ez a bővítmény számos előnnyel rendelkezik a sorozat többi bővítményéhez képest.

Ezzel a beépülő modullal/widgettel dinamikus, ellenőrzött diavetítéseket és prezentációkat hozhat létre a WordPress motoron futó webhelyéhez vagy blogjához.

Ez a WordPress beépülő modul a beágyazott galériaképeket egyszerű és rugalmas diavetítéssé alakítja. A beépülő modul a FlexSlider jQuery képcsúszkát és a felhasználói személyes beállításokat használja.

- Ezt WordPress bővítmény diavetítés megszervezéséhez fényképekből, SmugMug, Flickr, MobileMe, Picasa vagy Photobucket RSS-hírcsatornákból, munkákból és megjelenítésekből álló képekből tiszta Javascript használatával.

Egy egyszerű csúszka a WordPresshez és még sok máshoz. Semmi felesleges vagy körülményes, minimalista stílusban zajlik a munka, a stabilitáson és a gyorsaságon van a hangsúly, remekül csatlakozik a blogkezelő motorhoz.

Véleményem szerint a Skitter az egyik legjobb csúszka, amely támogatja a WordPress-szel való munkát. Engem a működés stabilitása és gyorsasága, a nem túl markáns kezelőszervek, az átmeneti effektusok és a témához való elég egyszerű kapcsolódás vonz.

egy WordPress bővítmény, amellyel egyszerűen és gyorsan rendszerezhet egy képgalériát a webhelyén, és azt diavetítés módban is megtekintheti. A kijelző lehet automatikus vagy teljesen vezérelhető a képek miniatűreinek és feliratainak bemutatásával.

Of.Site | Demó

Egy bejegyzéshez/oldalhoz tartozó összes képet diavetítésként jeleníti meg. Könnyű telepítés. Ez a bővítmény megköveteli Adobe Flash az átmeneti animációval ellátott verziónál, ha a Flash nem található, a csúszka normál módban működik.

Egy másik egyszerű csúszka a WordPress számára, amely képeket jelenít meg a bejegyzésekhez és a cikkek rövid bejelentéséhez. Időnként csak egy ilyen bővítményt használok ezen a blogon.

A Meteor Slides egy jQuery WordPress csúszka, amely több mint húsz átmeneti stílus közül választhat. A szerző „meteornak” nevezte a bővítményt, valószínűleg a működés sebességére utalva; talán nem vettem észre semmi meteorit.

Az oQey Gallery egy teljes értékű képgaléria diavetítés elemekkel a WordPress számára, beépített videó- ​​és zenei lehetőségekkel.

Ez egy diavetítés flash animációs elemekkel, képek és videók megtekintéséhez weboldalakon és blogokon. Ezt a csúszkát bármilyen webhelyen elhelyezheti, bármilyen méretben és tetszőleges tartalommal.

A Flash Gallery beépülő modul a szokásos galériáit lenyűgöző képfalakká varázsolja, több album bejegyzésenkénti támogatásával, teljes képernyős megtekintéssel és diavetítés móddal.

A WOW Slider egy jQuery képcsúszka a WordPresshez, lenyűgöző vizuális effektusokkal (robbanás, repülés, vakok, négyzetek, töredékek, alapszintű, halványítás, halmozás, függőleges halom és lineáris) és professzionálisan megtervezett sablonokkal.

A Promotion Slider egy jQuery beépülő modul, amely megkönnyíti egy egyszerű diavetítés létrehozását, vagy több zónában forgó hirdetések elhelyezését egy oldalon, mivel ez egy nagymértékben testreszabható eszköz, teljes mértékben szabályozhatja, hogy mit jelenítsen meg a csúszkában és hogyan a modul általában működik.

| Demó

Újdonság a 2.4-es verzióban: támogatja a fényképek közvetlenül az áthúzással történő rendezést WordPress szerkesztő, valamint a fő képekhez fotóhivatkozások hozzáadásának lehetősége. (Az IE8-ban lehetnek hibák, minden nagyobb böngészőben jól működik. A szerzők a jövőben teljes körű támogatást ígérnek az IE8-hoz.)

| Demó

Az áttekintés utolsó akkordja ez a WordPress bővítmény, egy másik csúszka érdekes vizuális effektusokkal a képek kiválasztásához és módosításához.

Végignézek mindent, amit fent leírtam, és elcsodálkozom, micsoda fantáziájával rendelkeznek ezek az emberek, de ez nem minden, amivel mostanában a különböző webfejlesztők előálltak a webes projekteken való képek rendszerezése témájában. Nagyon jó, hogy most már lehet ilyen dolgokat életre kelteni. nagyszerű megoldások galériák és diavetítések létrehozásához.
Csendben merem remélni, hogy ebben a kollekcióban találsz magadnak valami érdekeset, létrehozhatod saját egyedi galériádat vagy csúszkát, felhasználóid és természetesen szeretett éned örömére, és hol lennénk e nélkül...