Jquery portfóliógaléria. Reszponzív csúszkák választéka

Hozzáértően megkomponált és látványosan megtervezett, esetünkben az külön oldal, minden olyan szakember személyes oldalának vagy blogjának fontos eleme, aki elért szakmai tevékenységében bizonyos jártassági szintet.
A portfólióoldal egyfajta riport, vagy vizuális összefoglaló, melynek segítségével vizuálisan bemutathatja az oldal/blog olvasóinak, látogatóinak a legsikeresebb elkészült munkák halmazát, legyen szó fényképekről, cikkekről, publikációkról, design elemek stb.
Nekem nincs ilyen oldalam, és részemről ez egy bosszantó hiányosság, amit mielőbb javítani kell. Ebben a pillanatbanés dolgozom.
Végtelen kiterjedéseken globális hálózat, rengeteget találhat kész sablonok portfóliójának rendszerezéséhez, és az ilyen oldalak sokfélesége igazán lenyűgöző. Így azok, akik nem akarnak elmélyülni a webdizájn és -fejlesztés minden bonyodalmában, mindig találhatnak maguknak megfelelő lehetőséget. Nos, azoknak, akik szenvednek a tudástól a helyszínépítésben, javaslom egy példa elemzését adaptív elrendezés, egyszerű portfólió oldal, az elkészült munkák kategóriánkénti szűrésével, készen, tetszetős átmeneti effektussal hígítva, animációs elemekkel.

Az oldal elrendezését, a futtatható javascriptet és néhány design elemet a csodálatos webdesigner és fejlesztő, Kevin Liew (queness.com) adta. Az optimális megoldás kiválasztásánál fontos volt számomra, hogy a végrehajtás egyszerűsége, a jQuery plugin funkcionalitása, a megfelelő működés minden modern böngészőben, valamint a különféle mobil eszközök internetezésre való használatának egyre növekvő népszerűsége miatt a dizájn alkalmazkodóképessége a jövő oldaláról. Nincsenek divatos, dizájnos harangok és sípok vagy nehézsúlyú bővítmények.

Az alap elrendezés a kezelőfelület két fő eleméből áll, amelyeket meg kell építenünk, ezek a lapos navigáció a beküldött művek kategóriáinak szűrésére, valamint maga a miniatűr rács, amelyen a lebegtetéskor felugró felirathatás található.
Kezdetnek, hogy a végén minden működjön, a jQuery legalább 1.7.0-s verziójára lesz szüksége. Ha még nem csatlakoztatta, akkor adja hozzá következő sor a címke előtt :

Futtassa a MixItUp bővítményt, illessze be ezt a kódot a fenti fájlok mögé:

< script type= "text/javascript" >$ (function () (var filterList = (init: function ()) ($ ("# portfoliolist"). mixitup ((targetSelector: ".portfolio", filterSelector: ".filter", effektusok: ["fade"], könnyítés : "snap", // a hover effektus meghívása onMixEnd: filterList. hoverEffect ()));), hoverEffect: function () ($ ("# portfoliolista .portfolio"). hover (function () ($ (ez). find (. label"). stop (). animálni ((alul: 0), 200, "easeOutQuad"); $ (this). find ("img"). stop (). animálni ((fent: - 30) ), 500, "easeOutQuad");), függvény () ($ (ez). Keresés (. Címke"). Leállítás (). Animálás ((alul: - 40), 200, "easeInQuad"); $ ( this). find ("img"). stop (). animálni ((felső: 0), 300, "easeOutQuad");));)); filterList. init ();));

Külön fontolja meg az összes plugin opciót, nincs értelme, az alapértelmezett szép a legjobb lehetőség... Nos, ha tényleg beletesz valakit a paraméterekkel való kísérletezésbe, kérem, minden a hatalmában van.

Az oldalelrendezés és az elemek megjelenésének kialakításához csatlakoztasson néhány fájlt a dokumentumhoz . , az egyik az alapstílusokhoz, nevezzük layout.css-nek, egy másik kis CSS-fájl pedig normalize.css, hogy jobb konzisztenciát biztosítson a böngészők között az elemek szabványos stílusában:

< link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" >

Most rendezzünk el mindent sorban, lehetőleg felesleges víz nélkül, hozzáférhető és érthető módon, anyanyelvünkön, sokat szenvedett nyelvünkön.

< ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >Minden < li>< span class = "filter" data- filter= "app" >Alkalmazások < li>< span class = "filter" data- filter= "card" >Névjegykártyák < li>< span class = "filter" data- filter= "icon" >Ikonok < li>< span class = "filter" data- filter= "logo" >Logó < li>< span class = "filter" data- filter= "web" >Web design

• Minden
• Alkalmazások
• Névjegykártyák
• Ikonok
• Logó
• Web design

A navigációs sávon helyezze el a művek teljes listáját kategóriákra osztva. Minden portfóliókategóriát a data-cat attribútumon keresztül társítanunk kell a navigációs sáv egyik vagy másik eleméhez az adatszűrő attribútum értékének megfelelően. A data-filter és a data-cat értékeinek egyeztetésével a portfólióelemek kategóriánként szűrhetők.
Ezen kívül a miniatűrhöz egyelőre elrejtve egy kis panelt adunk a mű nevével és a kategória címével, ami csak akkor ugrik fel, ha a kép fölé viszi az egérmutatót. És hogy könnyebb legyen formálni megjelenés Mindezt a CSS-ben történő konstrukcióhoz a megfelelő osztályokat írjuk az elemekhez:

< div id= "portfoliolist" > < div class = "portfolio logo" data- cat= "logo" > < div class = "portfolio-wrapper" > < img src= "img/portfolios/logo/5.jpg" alt= "" /> < div class = "label" > < div class = "label-text" > < a class = "text-title" >Házigazda: Beget. Ru < span class = "text-category" >Logó < div class = "label-bg" > .........

Felhívjuk figyelmét, hogy linkeket adhat hozzá a képhez vagy közvetlenül az aláíráshoz, hogy a felhasználó teljes mértékben szemlélhesse az összes munkáját.

CSS

Most csendben térjünk át a legérdekesebbre, a portfólióoldalunk felhasználói felületének általános stílusainak és reszponzív verziójának CSS-ben történő kialakítására. A cikkben csak az alap (alapértelmezett) értékeket tüntetem fel, vagyis minden háttérkép és kapcsolódó font nélkül, mindezt, akinek szüksége van rá, megtekintheti a demóban, vagy megtalálhatja az archívumban a forrásokkal együtt.

.container (pozíció: relatív; szélesség: 960 képpont; margó: 0 automatikus; / * A böngészőablak átméretezése után láthatja az átmenetek láncát * /-webkit-átmenet: minden 1 egyszerű; -moz-átmenet: minden 1-es könnyű; -o-átmenet: minden 1-es könnyű; átmenet: minden 1s könnyű; ) #szűrők (margó: 1%; kitöltés: 0; listastílus: nincs;) #szűrők li (lebegő: balra;) #szűrők li span (megjelenítés: blokk; kitöltés: 5px 20px; szövegdekoráció: nincs; szín : # 666; / * adjon hozzá árnyékot a szöveghez * / text-shadow: 1px 1px #FFFFFF; kurzor: pointer; ) / * a kategória hátterének megváltoztatása az egérmutatóval * /#filters li span: lebegés (háttér: # 34B7CD; szövegárnyék: 0 0 2px # 004B7D; szín: #fff;) / * aktív kategória elem háttere * /#filters li span.active (háttér: rgb (62, 151, 221); text-shadow: 0 0 2px # 004B7D; szín: #fff;) #portfoliolist .portfolio (-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; szélesség: 23%; margó: 1%; megjelenítés: nincs; float: balra; túlcsordulás: rejtett;) .portfolio-wrapper ( túlcsordulás: rejtett; pozíció: relatív! fontos; háttér: # 666; kurzor: mutató;) .portfolio img (max. szélesség: 100%; pozíció: relatív;) / * az aláírások alapértelmezés szerint rejtve vannak * /.portfolio .label (pozíció: abszolút; szélesség: 100%; magasság: 40px; alsó: -40px;) .portfolio .label-bg (háttér: rgb (62, 151, 221); szélesség: 100%; magasság: 100 %; pozíció: abszolút; felül: 0; balra: 0;) .portfolio .label-text (szín: #fff; pozíció: relatív; z-index: 500; kitöltés: 5px 8px;) .portfolio .text-category ( kijelző: blokk; betűméret: 9 képpont;)

Tároló (pozíció: relatív; szélesség: 960 képpont; margó: 0 automatikus; / * A böngészőablak átméretezésekor láthatja az átmenetek láncolatát * / -webkit-transition: minden 1s könnyű; -moz-transition: minden 1s könnyű; -o- átmenet: minden 1 egyszerű; átmenet: minden 1 könnyű span (megjelenítés: blokk; kitöltés: 5px 20px; szövegdekoráció: nincs; szín: # 666; / * adjon hozzá némi árnyékot a szöveghez * / text-shadow: 1px 1px #FFFFFF; kurzor: mutató;) / * módosítsa a a kategória háttere lebegve * / #filters li span: hover (háttér: # 34B7CD; szövegárnyék: 0 0 2px # 004B7D; szín: #fff;) / * az aktív kategóriaelem háttere * / #filters li span .active (háttér: rgb (62, 151, 221 ); text-shadow: 0 0 2px # 004B7D; szín: #fff;) #portfoliolist .portfolio (-webkit-box-sizing: border-box; -moz-box -méretezés: border-box; -o-box- méretezés: border-box; szélesség: 23%; margó: 1%; kijelző: nincs; lebegés: balra; túlcsordulás: rejtett;) .po rtfolio-wrapper (túlcsordulás: rejtett; pozíció: relatív!fontos; háttér: # 666; kurzor: pointer; ) .portfolio img (max. szélesség: 100%; pozíció: relatív;) / * a feliratok alapértelmezés szerint el vannak rejtve * / .portfolio .label (pozíció: abszolút; szélesség: 100%; magasság: 40 képpont; alsó: -40 képpont;) . portfolio .label-bg (háttér: rgb (62, 151, 221); szélesség: 100%; magasság: 100%; pozíció: abszolút; felül: 0; bal: 0;) .portfolio .label-text (szín: # fff; pozíció: relatív; z-index: 500; kitöltés: 5px 8px;) .portfolio .text-category (megjelenítés: blokk; betűméret: 9px;)

A második részben, közvetlenül ugyanabban a stíluslapban, néhány médialekérdezéssel létrehozzuk az alternatív CSS szakaszokat. Ahhoz, hogy oldalunk elrendezése helyesen jelenjen meg a különböző mobileszközök képernyőjén, adjunk hozzá alternatív CSS-szabályokat a különböző képernyőkre ezekben a részekben. Így könnyedén felülírhatjuk a CSS-táblázatunkban korábban beállított szabályokat a hétköznapi böngészők számára, és elérhetjük a kívánt alkalmazkodóképességet.

/ * Táblagép * / @csak média képernyő és (min. szélesség: 768 képpont) és (max. szélesség: 959 képpont) (.container (szélesség: 768 képpont;)) / * Mobil - Megjegyzés: 320 képpont szélességű kialakítás * /@csak média képernyő és (max. szélesség: 767 képpont) (.container (szélesség: 95%;) #portfoliolist .portfolio (szélesség: 48%; margó: 1%;)) / * Mobil - Megjegyzés: 480 képpont szélességű kialakítás * /@media only screen and (min-width: 480px) and (max-width:767px) (.container (width:70%;))

/ * Táblagép * / @csak média képernyő és (min. szélesség: 768 képpont) és (max. szélesség: 959 képpont) (.container (szélesség: 768 képpont;)) / * Mobil - Megjegyzés: Tervezés 320 képpont szélességre * / csak @media képernyő és (max. szélesség: 767 képpont) (.container (szélesség: 95%;) #portfoliolist .portfolio (szélesség: 48%; margó: 1%;)) / * Mobil - Megjegyzés: Tervezés 480px szélességhez * / @media csak képernyő és (min. szélesség: 480 képpont) és (max. szélesség: 767 képpont) (.tároló (szélesség: 70%;))

Ez minden. Csodálatos oldalunk tágas "Portfólió" címmel elkészült, már csak nem kell megtölteni nem kevésbé csodálatos és kiemelkedő alkotásainkkal, és bemutatni az egész világnak. Csendesen, szerényen továbbra is büszke lehetsz magadra. A lényeg az, hogy ne vigyük túlzásba ebben a kérdésben.
Nézze meg újra a példát, és ha szükséges, vegye elő a forráskódot, szabadidőben, csendes otthoni környezetben tökéletesítheti ezt a munkát.

Az óra elkészítésekor a következő anyagokat használtuk:. Ugyanitt az eredeti, tiszta, frissen a szerző tollából származó portfólióoldal.

Sok sikert mindenkinek, és a szervezet számára jótékony hatást, hogy töltse el a rövid nyár hátralévő részét!

Jelenleg egy csúszka - körhinta - funkció, amelyre csak szükség van egy vállalkozás webhelyén, egy webhelyen - egy portfólióban vagy bármely más erőforrásban. A teljes képernyős képcsúszkák mellett a vízszintes körhintacsúszkák jól illeszkednek bármilyen webdizájnba.

Néha a csúszkának el kell foglalnia a webhely oldalának egyharmadát. Itt a körhinta csúszkát átmeneti effektusokkal és reszponzív elrendezésekkel használják. Weboldalak e-kereskedelem a körhinta csúszkával több fényképet is megjeleníthet külön bejegyzésekben vagy oldalakon. A csúszka kódja szabadon használható és az Ön igényei szerint módosítható.

A jQuery HTML5 és CSS3 együttes használatával érdekesebbé teheti oldalait azáltal, hogy egyedi effektusokkal látja el őket, és felhívhatja a látogatók figyelmét a webhely egy adott területére.

Slick – modern slider plugin – körhinta

A Slick egy ingyenes jquery bővítmény, amelynek fejlesztői azt állítják, hogy megoldásuk minden csúszkával kapcsolatos követelményt kielégít. Az érzékeny körhinta csúszka mobileszközökön csempe módban, asztali verzió esetén pedig fogd és vidd módban működhet.

Tartalmaz egy „fade” átmeneti effektust, egy érdekes funkciót „mód a közepén”, képek lusta betöltése automatikus görgetéssel. A frissített funkciók közé tartozik a diák és a diaszűrő. Mindent azért, hogy igényei szerint testreszabhassa a bővítményt.

Demo mód | Letöltés

Owl Carousel 2.0 – jQuery – érintésbarát bővítmény

Ennek a bővítménynek az arzenáljában - nagy készlet kezdő és tapasztalt fejlesztők számára egyaránt megfelelő funkciók. Ez a körhinta csúszka frissített változata. Az elődjét pontosan ugyanígy nevezték el.

A csúszka néhány beépített bővítményt tartalmaz az általános funkcionalitás javítása érdekében. Animáció, videolejátszás, csúszka automatikus lejátszása, lusta betöltés, automatikus magasságállítás a Owl Carousel 2.0 fő funkciói.

Támogatási képességek húzza és A beépülő modul mobileszközökön való könnyebb használatához a drop tartalmazza.
A beépülő modul tökéletes nagy képek megjelenítésére még a mobileszközök kis képernyőjén is.

Példák | Letöltés

jQuery Silver Track Plugin

Meglehetősen kicsi, de funkcionalitásban gazdag jquery beépülő modul, amely lehetővé teszi egy csúszka elhelyezését az oldalon - egy körhinta, amelynek kis magja van, és nem fogyaszt sok webhely erőforrást. A beépülő modul használható függőleges és vízszintes csúszkák, animációk megjelenítésére és képkészletek létrehozására a galériából.

Példák | Letöltés

AnoSlide – Ultra kompakt, érzékeny jQuery csúszka

Ultra kompakt jQuery csúszka- körhinta, amelynek funkcionalitása sokkal több, mint egy normál csúszkaé. Tartalmaz egy kép előnézetet, többképes körhinta megjelenítést és címalapú csúszkát.

Példák | Letöltés

Bagoly körhinta – Jquery Slider – körhinta

Bagoly körhinta - csúszka támasztékkal érintőképernyőkés drag and drop technológiák, amelyek könnyen beágyazhatók a HTML kódba. A beépülő modul az egyik legjobb csúszka, amely lehetővé teszi gyönyörű körhinták létrehozását speciálisan előkészített jelölések nélkül.

Példák | Letöltés

3D galéria - körhinta

3D-s átmeneteket használ CSS-stílusok és néhány Javascript kód alapján.

Példák | Letöltés

3D körhinta a TweenMax.js és a jQuery használatával

Nagyszerű 3D körhinta. Úgy tűnik, ez még mindig béta verzió, mert most fedeztem fel vele egy-két problémát. Ha érdekel a saját csúszkák tesztelése és létrehozása, ez a körhinta nagy segítségedre lesz.

Példák | Letöltés

Körhinta bootstrap használatával

Reszponzív körhinta csúszka bootstrap technológiával, pontosan az Ön új webhelyéhez.

Példák | Letöltés

A Bootstrap - Moving Box körhinta csúszka keretrendszerén alapul

A legkeresettebb portfólió- és üzleti oldalakon. Ez a típusú körhintacsúszka gyakran megtalálható bármilyen típusú webhelyen.

Példák | Letöltés

Tiny Circleslider

Ez az apró csúszka bármilyen képernyőfelbontású készüléken használható. A csúszka körkörös és körhinta módban is működhet. Az apró kör a többi hasonló típusú csúszka alternatívájaként jelenik meg. Van beépített támogatás operációs rendszer IOS és Android.

A csúszka elég érdekesen néz ki körkörös módban. A drag and drop támogatás és az automatikus csúszásgörgető rendszer kiválóan megvalósított.

Példák | Letöltés

Thumbelina tartalomcsúszka

Erőteljes, reszponzív, körhintacsúszka tökéletes egy modern webhelyhez. Minden eszközön megfelelően működik. Vízszintes és függőleges módokkal rendelkezik. A mérete mindössze 1 KB-ra van minimalizálva. Az ultra kompakt bővítmény kiváló sima átmenetekkel is rendelkezik.

Példák | Letöltés

Wow - csúszka - körhinta

Több mint 50 effektust tartalmaz, amelyek segítségével eredeti csúszkát hozhat létre webhelyéhez.

Példák | Letöltés

Reszponzív jQuery tartalomcsúszka bxSlider

Méretezze át a böngészőablakot, hogy megtudja, hogyan alkalmazkodik a csúszka. A Bxslider több mint 50 testreszabási lehetőséget kínál, és különféle átmeneti effektusokkal mutatja be funkcióit.

Példák | Letöltés

jKörhinta

A jCarousel egy jQuery beépülő modul, amely segít megszervezni a kép előnézetét. A példában látható keretrendszerből egyszerűen készíthet egyedi körhintaképeket. A csúszka érzékeny és mobilplatformokon való működésre optimalizálva.

Példák | Letöltés

Scrollbox – jQuery bővítmény

A Scrollbox egy kompakt bővítmény csúszka - körhinta vagy szöveggörgető vonal létrehozásához. A legfontosabb funkciók közé tartozik a függőleges és vízszintes görgetés az egérrel történő szüneteltetéssel.

Példák | Letöltés

dbpasCarousel

Egyszerű csúszka - körhinta. Ha gyors beépülő modult szeretne, ez 100%-ban jó. Csak a csúszka működéséhez szükséges alapvető funkciókat tartalmazza.

Példák | Letöltés

Flexisel: Reszponzív JQuery Slider beépülő modul – körhinta

A Flexisel készítői a régi jCarousel beépülő modulból merítettek ihletet, és egy másolatot készítettek belőle, amely a csúszka helyes működésére összpontosított mobil- és táblagépeken.

A Flexisel reszponzív elrendezése mobileszközökön végzett munka során eltér a böngészőablak méretéhez igazított elrendezéstől. A Flexisel tökéletesen alkalmazkodik az alacsony és nagy felbontású képernyőkön való munkához.

Példák | Letöltés

Elastislide - érzékeny csúszka - körhinta

Az Elastislide tökéletesen alkalmazkodik a készülék képernyőméretéhez. Beállíthatja, hogy egy adott felbontásban hány képek jelenjenek meg minimálisan. Jól működik a képgaléria körhinta csúszkájaként, rögzített burkolóanyaggal és függőleges görgetőeffektussal együtt.

Példa | Letöltés

FlexSlider 2

Szabadon terjeszthető csúszka a Woothemes-től. Az egyik legjobbnak tartják reszponzív csúszkák... A bővítmény számos sablont tartalmaz, és mind a kezdő felhasználók, mind a szakértők számára hasznos lesz.

Példa | Letöltés

Csodálatos körhinta

Az Amazing Carousel egy reszponzív jQuery képcsúszka. Számos webhelykezelő rendszert támogat, mint például a WordPress, a Drupal és a Joomla. Támogatja az Android és IOS operációs rendszereket, valamint az operációs rendszerek asztali verzióit is, kompatibilitási probléma nélkül. A beépített csodálatos körhintasablonok lehetővé teszik a csúszka függőleges, vízszintes és körkörös módban történő használatát.

Példák | Letöltés

Sokáig választottam 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 nagyszerű téma, mivel galériák számos oldalon jelen vannak. Hogy őszinte legyek, mindegyik nem túl vonzó. Figyelembe véve a jelenlegi fejlődési trendeket jquery, html5és így tovább. Úgy gondoltam, hogy a megoldásoknak már sokkal vonzóbbaknak kell lenniük, mint azok, amelyekkel korábban találkoztam. Így. Egy nap eltöltése után sikerült megtalálnom hatalmas szám forgatókönyvek. Ebből az egész hegyből úgy döntöttem, hogy csak válogatok, mert szeretem, ahogy azt már az előző bejegyzésekből is észrevettétek.
Képgaléria nem csak abban az esetben alkalmazható fotóalbumokkal... A script használható, szerintem még korrektebb is lesz, mint portfólió fotósoknak, tervezőknek stb. Jquery effektusok segít megragadni a látogatók figyelmét, és egyszerűen eleganciát kölcsönöz webhelyének.
Így. A figyelmed gyűjtésére jquery képgaléria bővítmények a webhelyhez.
Ne felejtsen el hozzászólni és emlékezzen, 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 az összes effektus, átmenet css3 segítségével történik. Ideális fotós weboldal létrehozásához.

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 plugin képgaléria létrehozásához... A miniatűrök formájúak gyémánt, ami jelenleg nagyon népszerű. Ez az űrlap a css3 használatával készült. Ennek a galériának az egyetlen hátránya a világítódoboz hiánya, amely teljes méretben megnyitná a fotót. Vagyis rákkal kell csavarni a lightbox plugint. Ez a szkript érzékeny, gyémánt 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 lightboxban (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. Tekintse meg a bemutatót, és nézze meg, hogy ez a megoldás sokkal modernebbnek tűnik.
|

Smooth Diagonal Fade Gallery

Egy modern képgaléria, amelyben az előnézetek a teljes képernyőterületen el vannak osztva... A szkript képes beolvasni egy fényképet tartalmazó mappát a szerveren, vagyis nem kell minden képet külön beszúrni. 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 magától csinál.

Gamma galéria

Stílusos, könnyű, reszponzív képgaléria Pinterest-stílusú rácsozattal, amely manapság nagyon népszerűvé vált. A forgatókönyv mindkettőnél jól működik helyhez kötött számítógépekés tovább mobil eszközök bármilyen képernyőfelbontással. Kiváló megoldás webdesigner portfólió készítéséhez.

MINŐSÉGRÁCS BŐVÜLŐ ELŐNÉZETTEL

A plugin az reszponzív képrács... Ha lentebb kattint, egy nagyobb kép és egy leírás jelenik meg. Portfólió készítéséhez jó.

jGallery

jGallery az teljes képernyős, reszponzív képgaléria... Az effektusok, az átmenetek és a stílus is könnyen testreszabható.

Glisse.js

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ű, érzékeny képgaléria a Pinterest stílusú rácsozattal.

Galereya

Egy másik stílusos galéria Pinterest-stílusú, kategóriánként szűrt rácsozattal. 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. Nagyon vonzó megjelenésű, és biztosan felkelti a látogatók 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. Képes modális ablakban nemcsak képeket, hanem képeket is megjeleníteni videó-... Kiválóan működik érintőképernyős eszközökön. 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).

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é terhelik 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 nektek legjobb galériák képek és jQuery csúszkák.

Telepítésükhöz csak 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. Képeket, videókat, szövegeket, bélyegképeket és gombokat tölthet be csúszkákba.

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

A Product Preview Slider megtestesíti a jQueryben rejlő teljes potenciált, és tökéletesen illeszkedik bármely felületbe. 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 fantasztikus 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 jQuery reszponzív galériabővítmény, amely asztali és mobil böngészők... Számos 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 segítségével a Google TV csúszkájához hasonló egyedi diavetítési élményt hozhat létre. Módosíthatja a háttérképet homályossá, hogy a fő fényképen megmaradjon a fókusz.

6. Leastjs

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

7. Csúszó panelek sablonja

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

8. Squeezebox portfóliósablon

A Squeezebox portfóliósablon mozgási effektusokat kínál a portfóliókhoz. 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 nagyszerű 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

Ingyenes jQuery átvilágítódoboz A 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 könnyű, így a bővítmény betöltési sebessége kellemesen meg fogja lepni.

12. Szórt Polaroidok Galéria

A Scattered Polaroids Gallery egy lenyűgöző, lapos kialakítású csúszka. Elemei rendszertelenül mozognak képváltáskor, ami csodálatosan néz ki.

13. Ugráló tartalomszűrő

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

14. Egyszerű jQuery Slider

Az egyszerű jQuery Slider méltó a nevéhez. Ez a bővítmény JavaScript, HTML5 és CSS3 elemeket kombinál. 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 nem foglal sok helyet.

16. Teljes képernyős húzócsúszka parallaxissal

Ez a fantasztikus jQuery csúszka, amely képes képeket és szöveget betölteni, bármely webhelyen működik. Könnyű parallaxis effektussal és lassú szövegmegjelenéssel örvendezteti meg a felhasználókat.

a Digital Telepathy által
Egy csodálatos tartalomcsúszka: SlideDeck – Jobb módja annak, hogy tartalmat biztosítsunk az interneten, azzal a céllal, hogy megkönnyítse a felhasználók számára a webhelyek tartalmának megemésztését és megértését.

slideViewer (egy jQuery képcsúszka, amely egyetlen rendezetlen listára épül) 1.2

írta: Gian Carlo Mingati
A SlideViewer egy könnyű (3,5 Kb) jQuery beépülő modul, amely lehetővé teszi a képgaléria azonnali létrehozását néhány sornyi HTML írásával, például a képek rendezetlen listájával.

jqFancyTransitions - diavetítés szalaghatásokkal

Írta: Ivan Lazarevic
A jqFancyTransitions egy könnyen használható jQuery beépülő modul, amellyel fotóit diavetítésként jelenítheti meg díszes átmeneti effektusokkal.

AviaSlider – jQuery diavetítés

írta Gaya
A Presentation Cycle a jQuery Cycle szkript funkcióinak egy változata. A kattintható számok listájának létrehozása helyett a Prezentációs ciklus folyamatjelző sávot hoz létre, amely megmutatja, hogy mikor jelenik meg az új dia.

készítette: Dev7studios
A világ legcsodálatosabb jQuery és WordPress Image Sliderje a következő funkciókkal:

• 16 egyedi átmeneti hatás
• Egyszerű tiszta és érvényes jelölés
• Rengeteg módosítható beállítás
• Beépített irány- és vezérlőnavigáció
• A csomagolt változat súlya csak 12 kb
• Támogatja a képek összekapcsolását
• Navigáció billentyűzettel
• HTML feliratok
• 3 sima téma
• Ingyenesen használható és visszaélés az MIT licence alapján

írta DaleDavies
Talán a legkönnyebben használható jQuery plugin diavetítések készítéséhez! A jQuery Easy Slides előnye az is, hogy meglehetősen könnyű, a Javascript és a CSS súlya is alig 2,1 kb.

Speciális csúszka – jQuery XML csúszka

írta D. Massiani
A Horinaja egy használatra kész diavetítés megvalósítás, amely vagy scriptaculous / prototípust vagy jQuery-t használ. A Horinaja innovatív, mert lehetővé teszi az egérgörgő használatát a navigációhoz.

írta: OVIDIU CHERECHEȘ
A Dragdealer egy drag-alapú JavaScript-komponens, amely végtelen front-end megoldásokat ölel fel. Elegánsan a JavaScript-tudatos kódolók számára készült.

í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. Ahogy a plugin neve is sugallja, a görgetés zökkenőmentes. Nincsenek látható gombok vagy hivatkozások, mivel a görgetés a görgethető területen belüli hotspotok használatával vagy automatikus görgetéssel történik. A nem feltűnő és sima a kulcs itt.

írta: Sam Dunn
A Supersized egy teljes képernyős háttér diavetítés, amely a jQuery könyvtár használatával készült.

írta: Jeremy Fry
Egy egyszerű jquery beépülő modul a képgaléria diavetítéséhez.

UnoSlider – Reszponzív érintésre használható csúszka

készítette: bxCreative
A bxSlider egy tartalmi jQuery csúszka a következő funkciókkal:

• Vízszintes, függőleges és fade átmenetek
• Több dia megjelenítése és mozgatása egyszerre (körhinta)
• Előző / következő, lapozó, automatikus vezérlők
• Az átmenetek megkönnyítése
• Véletlenszerű indítás
• Ticker mód
• Előtte, utána, első, utolsó, következő, előző visszahívási funkciók
• Opcionális stílust tartalmaz
• Rengeteg lehetőség

írta: Gian Carlo Mingati
A slideViewerPro egy teljesen testreszabható jQuery képgaléria motor, amely lehetővé teszi, hogy kiemelkedő csúszó képgalériákat hozzon létre projektjeihez és / vagy interaktív galériákhoz a blogbejegyzésekben.

írta: Nathan Searles
A Slides egy diavetítés-bővítmény a jQuery számára, amely az egyszerűséget szem előtt tartva készült. Tele van egy hasznos funkciókészlettel, amelyek segítenek a kezdőknek és haladó a fejlesztők egyaránt elegáns és felhasználóbarát diavetítéseket készítenek.

a Dynamic Drive által
Automatikus diavetítésként szeretné megjeleníteni a képeket, amelyet a felhasználó kifejezetten lejátszhat vagy szüneteltethet? Egyszerű vezérlők A galéria elforgatja és megjeleníti a képet úgy, hogy az előzőhöz képest elhalványul, a navigációs vezérlőkkel pedig akkor jelenik meg, amikor az egeret a galéria fölé viszi.

írta Boban Karišik
Az s3Slider jQuery beépülő modul a jd gördülékeny diavetítési szkriptjének példájával készült.

új aláírással
A jCoverflip-et úgy fejlesztették ki, hogy lehetővé tegye a megjelenés és a funkciókészlet gyors és részletes testreszabását.

írta: Mary Lou
Az Elastislide egy érzékeny jQuery körhinta, amely méretét és viselkedését úgy alakítja, hogy bármilyen képernyőméreten működjön. A karusszel szerkezetének folyadékszélességű edénybe való behelyezése a körhinta is folyékony lesz.

írta: ZURB
Eleged van a zavaró és dagadt képcsúszkákból, amelyek soha nem működnek? Rock ZURB's Orbit mindössze 4 KB.

LayerSlider – A Parallax Effect Slider

írta Scott
Ez a csodálatos jQuery UI csúszka, ez a beépülő modul progresszív fejlesztést használ, hogy a már működő HTML kijelölő elemet jQuery UI csúszkavezérlőre cserélje, és számos funkciót ad hozzá mind a vizuális felhasználók, mind a kisegítő technológiák felhasználói számára.

írta: Tyler Smith
Egy fantasztikus, teljesen érzékeny jQuery csúszka beépülő modul. Jellemzőkkel:

• Egyszerű, szemantikai jelölés
• Minden nagyobb böngészőben támogatott
• Vízszintes / függőleges csúsztatási és elhalványulási animációk
• Több csúszka támogatása, visszahívási API és még sok más
• Hardveres gyorsítású érintéses ellop támogatás
• Egyéni navigációs lehetőségek
• Használjon bármilyen html elemet a diákban
• Kezdőknek és profiknak egyaránt készült
• Ingyenesen használható az MIT licence alapján

d. rajzolt tervet
Egy szuper egyszerű jQuery Slideshow beépülő modul a következő funkciókkal: - KÖNNYŰ - KICSI - RUGALMAS - NEAT

Csúszó képgaléria jQuery Plugin

írta Justin Mead
Ennek a beépülő modulnak az az ötlete, hogy változó számú képet vonzó és könnyen használható módon jelenítsen meg.

Átlátszó - jQuery Banner Rotator / Diavetítés

írta: Mark Tyrrell
Egy jQuery képcsúszka beépülő modul, amelyet kifejezetten a folyékony/reszponzív webelrendezések kezelésére írtak.

Érmecsúszka

Írta: Ivan Lazarevic
Egy jQuery képcsúszka egyedi effektusokkal és további funkciókkal:

• Ingyenesen használható MIT licenc alatt
• Android és iPhone készülékekkel kompatibilis
• Egyedi átmeneti hatások
• Érvényes jelölés
• Rugalmas konfiguráció
• Automatikus csúszda
• Navigációs doboz
• Könnyű (csak 8 kb)
• Képek összekapcsolása
• Teljesen testreszabható CSS ​​segítségével

írta Christoph Schüßler
A jQuery.popeye egy fejlett képgaléria-szkript, amely a jQuery JavaScript-könyvtárra épül. Használja, hogy helyet takarítson meg képgyűjtemény megjelenítésekor, és kínáljon felhasználóinak szép és elegáns módot a képek nagy változatának megjelenítésére anélkül, hogy elhagyná az oldalt.

írta: Jack Moore
Könnyű testreszabható átvilágítódoboz-bővítmény a jQuery 1.3+-hoz

aeroalquimia által
A Slider Evolution egy JQuery beépülő modul, amellyel egyszerűen hozhat létre hatékony javascript csúszkákat nagyon szép átmeneti effektusokkal. Fejlessze webhelyét egy egyedi és vonzó csúszka hozzáadásával!