Attēlu galerijas un slīdņi ir daži no populārākajiem jQuery formātiem. Pateicoties tiem, jūs varat pievienot savai vietnei nepieciešamo vizuālā satura daudzumu, vienlaikus ietaupot vērtīgu vietu.

Galerijas un slīdņi padara lapu mazāk noslogotu, tomēr ļauj pievienot visus attēlus, kas nepieciešami, lai nodotu vēstījumu. Tie būs īpaši noderīgi interneta veikaliem.

Šodienas rakstā mēs esam apkopojuši jums labākās jQuery attēlu galerijas un slīdņus.

Lai tos instalētu, vienkārši pievienojiet atlasītos spraudņus HTML lapas galvas sadaļai kopā ar jQuery bibliotēku un konfigurējiet tos atbilstoši dokumentācijai (tikai dažas koda rindiņas).

Izvēlieties, kurš no šiem elementiem lieliski iederas jūsu projektā.

1. Bootstrap slīdnis

Bootstrap Slider ir bezmaksas, mobilajām ierīcēm optimizēts attēlu slīdnis ar ritināšanu ar pieskārienu un vilkšanu. Tas izskatīsies lieliski jebkurā ekrānā un jebkurā pārlūkprogrammā. Slīdņos varat ielādēt attēlus, videoklipus, tekstu, sīktēlus un pogas.

2. Produkta priekšskatījuma slīdnis

Produkta priekšskatījuma slīdnis iemieso visu jQuery potenciālu un lieliski iekļaujas jebkurā saskarnē. Jūs būsiet apmierināts arī ar šī spraudņa koda kvalitāti un tīrību.

3. Izvēršama attēlu galerija

Izvēršamā attēlu galerija ir pārsteidzošs spraudnis, kas ar vienu klikšķi pārvēršas par pilnekrāna galeriju. To var izmantot sadaļai “Par mums” vai informācijas skatīšanai par produktiem.

4. Fotorama

Fotorama ir atsaucīgs jQuery galerijas spraudnis, kas darbojas gan galddatoru, gan mobilo ierīču pārlūkprogrammās. Tas piedāvā dažādas navigācijas iespējas: sīktēlus, ritināšanu, pogas uz priekšu un atpakaļ, automātiskas slaidrādes un aizzīmes.

5. Iegremdošais slīdnis

Immersive Slider ļauj jums izveidot unikālu slaidu skatīšanās pieredzi, kas ir līdzīga Google TV slīdnim. Varat mainīt fona attēlu, lai tas būtu aizmiglots, lai galvenais fotoattēls būtu fokusā.

6. Leastjs

Leastjs ir atsaucīgs jQuery spraudnis, kas palīdzēs jums izveidot pārsteidzošu galeriju. Virzot kursoru virs attēla, tiek parādīts teksts, kad noklikšķināt, logs tiek izvērsts pilnekrāna režīmā.

7. Bīdāmo paneļu veidne

Šis spraudnis ir ideāli piemērots portfelim. Tas izveidos horizontāli (vertikāli uz maziem ekrāniem) sakārtotus attēlu blokus, ar kuriem tiks piesaistīts atlasītais saturs.

8. Squeezebox portfeļa veidne

Squeezebox Portfolio Template piedāvā kustības efektus jūsu portfolio. Virzot kursoru virs galvenā attēla (vai bloka), tiek parādīti noenkuroti elementi.

9. Jauktā secībā attēlus

Shuffle Images ir pārsteidzošs atsaucīgs spraudnis, kas ļauj izveidot galeriju ar attēliem, kas mainās, virzot kursoru.

10. Bezmaksas jQuery Lightbox spraudnis

Bezmaksas jQuery Lightbox spraudnis palīdzēs parādīt vienu vai vairākus attēlus vienā lapā. Tos var arī palielināt un atgriezt sākotnējā izmērā.

11. PgwSlider — atsaucīgs slīdnis jQuery

PgwSlider ir minimālistisks attēlu slīdnis. jQuery kods ir viegls, tāpēc šī spraudņa ielādes ātrums jūs patīkami pārsteigs.

12. Izkliedētā polaroīdu galerija

Scattered Polaroids Gallery ir satriecošs slīdnis ar plakanu dizainu. Pārslēdzot attēlus, tā elementi haotiski pārvietojas, kas izskatās pārsteidzoši.

13. Bouncy satura filtrs

Bouncy satura filtrs ir ideāls risinājums portfeļiem. Šis spraudnis ļauj lietotājiem ātri pāriet no vienas kategorijas uz citu.

14. Vienkāršs jQuery slīdnis

Vienkāršais jQuery Slider atbilst savam nosaukumam. Šis spraudnis apvieno JavaScript, HTML5 un CSS3 elementus. Noklusējuma demonstrācija ļauj ielādēt tikai tekstu, taču, ja veicat dažas izmaiņas, varat pievienot arī vizuālo saturu.

15. Glide JS

Glide JS ir vienkāršs, ātrs un atsaucīgs jQuery slīdnis. To ir viegli iestatīt, un spraudnis neaizņem daudz vietas.

16. Pilnekrāna vilkšanas slīdnis ar paralaksi

Šis pārsteidzošais jQuery slīdnis ar iespēju ielādēt attēlus un tekstu ir piemērots jebkurai vietnei. Tas iepriecinās lietotājus ar vieglu paralakses efektu un lēnu teksta izskatu.

Es pavadīju ilgu laiku, izvēloties tēmu šodienas tēmai. Rezultātā es pamanīju, ka mēs vēl neesam veikuši atlasi ar attēlu galerijas. Es domāju, ka tā ir lieliska tēma, jo galerijas atrodas daudzās vietnēs. Atklāti sakot, tie visi nav īpaši pievilcīgi. Ņemot vērā pašreizējās attīstības tendences jquery, html5 utt. Es domāju, ka galu galā ir jābūt daudz pievilcīgākiem risinājumiem nekā tiem, ar kuriem es biju saskāries iepriekš. Tātad. Pavadot dienu, mums izdevās atrast milzīgu skaitu skriptu. No visa šī kalna es nolēmu atlasīt tikai, jo man patīk, kā jūs jau pamanījāt no iepriekšējiem ierakstiem.
Attēlu galerija piemērojams ne tikai gadījumā ar foto albumiem. Skriptu var izmantot, manuprāt, būtu vēl pareizāk, kā portfolio fotogrāfiem, dizaineriem utt. Jquery efekti palīdzēs piesaistīt apmeklētāju uzmanību un vienkārši piešķirs jūsu vietnei eleganci.
Tātad. Kolekcija jūsu uzmanībai jquery attēlu galerijas spraudņi vietnei.
Neaizmirstiet komentēt un atcerēties, lai nepazaudētu šo kolekciju, varat pievienot to saviem favorītiem, noklikšķinot uz zvaigznītes raksta apakšā.

FOTOKASTE

Bezmaksas, viegla, atsaucīga attēlu galerija, kurā visi efekti un pārejas tiek veiktas, izmantojot css3. Ideāli piemērots fotogrāfa portfolio izveidei.

S galerija

Pievilcīgs Jquery attēlu galerijas spraudnis. Animācija darbojas, izmantojot css3.

DIMANTI.JS

Oriģināls spraudnis attēlu galerijas izveidei. Miniatūras ir veidotas kā rombs, kas šobrīd ir ļoti populārs. Šī veidlapa ir izveidota, izmantojot css3. Vienīgais šīs galerijas trūkums ir gaismas kastes trūkums, kurā fotogrāfija atvērtos pilnā izmērā. Tas ir, jums būs jāieskrūvē gaismas kārbas spraudnis. Šis skripts ģenerē adaptīvu attēlu režģi dimanta formā.

Superbox

Mūsdienu attēlu galerija, izmantojot Jquery, css3 un html5. Mēs visi esam pieraduši, ka, noklikšķinot uz priekšskatījuma, viss attēls tiek atvērts gaismas kastē (uznirstošajā logā). Šī spraudņa izstrādātāji nolēma, ka gaismas kārba jau ir novecojusi. Šajā galerijā esošie attēli tiek atvērti zem priekšskatījuma. Noskatieties demonstrāciju un redziet, ka šis risinājums izskatās daudz modernāks.
|

Smooth Diagonal Fade Gallery

Mūsdienīga attēlu galerija, kurā priekšskatījumi ir sadalīti visā ekrāna telpā. Skripts var skenēt mapi ar fotoattēliem serverī, tas ir, jums nav jāievieto katrs attēls atsevišķi. Vienkārši augšupielādējiet attēlus servera mapē un iestatījumos norādiet ceļu uz direktoriju. Tad skripts visu darīs pats.

Gamma galerija

Stilīga, viegla, atsaucīga attēlu galerija ar Pinterest stila režģi, kas mūsdienās ir kļuvusi ļoti populāra. Skripts lieliski darbojas gan galddatoros, gan mobilās ierīces ar jebkuru ekrāna izšķirtspēju. Lielisks risinājums tīmekļa dizaineru portfeļa izveidei.

SĪKTĒLU REŽĢIS AR PLAŠINĀŠANU PRIEKŠSKATĪJUMU

Spraudnis ir adaptīvs attēlu režģis. Noklikšķinot zemāk, tiks parādīts lielāks fotoattēls un apraksts. Piemērots portfeļa veidošanai.

jGalerija

jGallery ir pilna ekrāna, atsaucīga attēlu galerija. Efektus, pārejas un pat stilu ir viegli pielāgot.

Glisse.js

Vienkāršs, bet ļoti efektīvs attēlu galerijas spraudnis. Tas ir tieši risinājums, kad nepieciešams izveidot fotoalbumu. Spraudnis atbalsta albumus, un tam ir ļoti foršs apgriešanas efekts.

Mozaīkas plūsma

Vienkāršs, adaptīvs Pinterest stila režģa attēlu galerija.

Galerija

Vēl viena stilīga galerija ar Pinterest stila režģi, kas filtrēts pēc kategorijas. Darbojas pārlūkprogrammās: Chrome, Safari, Firefox, Opera, IE7+, Android pārlūkprogrammā, Chrome mobile, Firefox mobile.

vismaz.js

Lieliski bezmaksas attēlu galerija izmantojot JQUERY, 5 un CSS3. Tam ir ļoti pievilcīgs izskats un tas neapšaubāmi piesaistīs jūsu apmeklētāju uzmanību.

flipLightBox

Vienkārša attēlu galerija. Noklikšķinot uz priekšskatījuma, viss attēls tiek atvērts gaismas kastē.

blueimp galerija

Elastīga galerija. Spēj parādīt ne tikai attēlus modālā logā, bet arī video. Lieliski darbojas skārienjutīgās ierīcēs. To ir viegli pielāgot un ir iespējams paplašināt funkcionalitāti, izmantojot papildu spraudņus (skatiet nākamo spraudni).

Sveiki visiem! Šajā rakstā mēs apskatīsim, kā izveidot skaistu un ērti šķirojamu galeriju, izmantojot JQuery.

Skaista, ērti sakārtota galerija ir brīnišķīga lieta jūsu vietnei, kas iepriecinās jūs un jūsu apmeklētājus. Šodien mēs apskatīsim ļoti viegli instalējamu un konfigurējamu bibliotēkas spraudni JQuery– Filtrs.

Neskatoties uz lietošanas vienkāršību, spraudnis ir diezgan viegls un efektīvs. Apskatīsim to tuvāk.

Demonstrācija

Lai redzētu, kā spraudnis darbojas, dodieties uz oficiālo vietni, un šeit tas ir jūsu priekšā!

Varat izvēlēties kārtot pēc pilsētas, dabas, nozares, saullēkta, saulrieta vai rādīt visus fotoattēlus (noklusējums). Ir poga Jauktā secībā, kas ļaus sajaukt attēlus. Pogas A.S.C. Un DESC kārtojiet attēlus attiecīgi augošā un dilstošā secībā. Ja vēlaties atrast attēlu pēc pozīcijas vai apraksta, nolaižamajā sarakstā atlasiet vajadzīgo vienumu un meklēšanas laukā ievadiet vaicājumu. Novietojot peles kursoru virs attēla, attēls pārvēršas no melnbalta uz krāsainu.

Uzstādīšana

Lai lejupielādētu bibliotēku, noklikšķiniet uz pogas Lejupielādēt vai izmantot NPM:

Npm instalējiet filtru

Spraudnis jau ir konfigurēts, taču, ja vēlaties ignorēt noklusējuma iestatījumus, varat:

1) Nodod konstruktoram objektu ar parametriem JQuery

Var filterizd = $(".filtr-container").filterizr((
// opcijas
})

2) Pārrakstiet parametrus, izmantojot setOptions() metode objektā Filtrētājs.

Filterizd.filterizr("setOptions", (
// opcijas
})

Iespējas

Noklusējuma parametri:

Opcijas = (
animācijas ilgums: 0,5,
atzvani:(
onFilteringStart: function() ( ),
onFilteringEnd: function() ( )
},
kavēšanās: 0,
delayMode: "progresīvs",
atvieglošana: "ease-out",
filtrs: "viss",
filterOutCss: (
necaurredzamība: 0,
pārveidot: "scale(0.5)"
},
filterInCss: (
necaurredzamība: 0,
pārveidot: "scale(1)"
},
izkārtojums: "sameSize",
atlasītājs: ".filtr-container",
setupControls: patiess
}

Detalizētākus norādījumus un katra parametra aprakstus var atrast vietnē

Šodien mēs apskatīsim spraudni jQuery Flipping Gallery, kas ļauj izveidot foršas attēlu galerijas ar ļoti oriģinālām pārejām. Piemērā ir 5 veidu pārejas, izmantojot šo spraudni. Spraudnis patiešām ir ļoti viegli lietojams, tāpēc ikviens var to pilnībā izmantot.

Piemēru var redzēt šeit:

Lejupielādēt

Sīkāk apskatīsim, kā izveidot izvēlni no Demo 2. Izvēlne tiek parādīta augšējā kreisajā stūrī.

HTML daļa

Vispirms starp tagiem ir jāsavieno jQuery bibliotēka, kuru varat lejupielādēt šeit, un spraudnis Flipping Gallery :

1 2 3 4 5 6

<galva> ... <"http://code.jquery.com/jquery-1.9.1.js"> <skripta veids = "teksts/javascript" src = "http://code.jquery.com/jquery.flipping_gallery.js"> ... </head>

Tad mēs sakārtojam attēlus. Varat pievienot tik daudz attēlu, cik vēlaties:

1 2 3 4 5 6 7 8

<div class = "galerija" > <a href = "#" > <a href = "#" > <a href = "#" > <a href = "#" > <a href = "#" > ... </div>

Un, lai attēliem pievienotu aprakstu (kā 4. un 5. demonstrācijā), ir jāizmanto atribūts datu paraksts:

1 2 3 4 5 6 7 8

<div class = "galerija" > <a href = "#" data-caption = "Ļoti" > <a href = "#" data-caption = "forši" > <a href = "#" data-caption = "galerija" > <a href = "#" data-caption = "izmantojot" > <a href = "#" data-caption = "Apvēršana" > ... </div>

JS daļa

1 2 3 4 5 6 7 8 9

$(.gallery") .flipping_gallery (( virziens: "uz priekšu" , atlasītājs: "> a" , atstarpes: 10 , parādītMaksimālais: 15 , enableScroll: true , flipDirection: "bottom" , autoplay: 500 ) ) ;

Apskatīsim katras metodes nozīmi:

• virziens— metode, kas atbild par to, kā attēli parādīsies. Ja “uz priekšu”, tad attēls no sākuma tiks novietots beigās, ja “atpakaļ” - otrādi. Noklusējuma vērtība ir “forward”.
• atlasītājs— selektors, ar kuru mēs izvēlamies attēlus, to var mainīt pēc vēlēšanās;
• atstarpes— iestata attālumu starp attēliem perspektīvā.
• parādītMaksimāli— iestata lietotājam redzamo attēlu skaitu. Jūs varat izmantot vismaz 100 attēlus, bet tiks parādīti tikai pirmie 15, kas ir ļoti ērti un neielādē pārlūkprogrammu.
• iespējot ritināšanu- Varat skatīt attēlus, izmantojot peles ritenīti.
• flipDirection— nosaka, kur attēls slīdīs: "pa kreisi" - pa kreisi, "pa labi" - pa labi, "augšā" - uz augšu un "apakšā" - uz leju. Pēc noklusējuma tas slīd uz leju.
• automātiskā atskaņošana— galerijas automātiskā palaišana. Norādīts milisekundēs, t.i. Cik ilgs laiks paies, līdz attēli mainīsies?

Secinājums

Tagad jums ir satriecoša galerija, ko izmantot, publicējot savus fotoattēlus.

Mūsu skriptu kolekcijā varat atrast mazus, bet ļoti noderīgus un funkcionālus spraudņus savai vietnei. Pievēršoties līdzekļiem jQueryGalerija, viegli sakārtojiet savu digitālo fotoattēlu galeriju ar jauku dizainu, ritināšanu, tālummaiņu, sīktēlu skatīšanu un daudzām citām noderīgām funkcijām. Ir gan stingri risinājumi profesionālām vietnēm, gan spilgti ar animāciju un citiem specefektiem izklaides projektiem.

Ar līdzekļiem jQuery attēli var apskatīt, nepārlādējot lapu un nepalielinot satiksmes plūsmu. Piedāvātie spraudņi ļauj optimizēt attēlu ielādi reāllaikā un prezentēt galeriju ērtā un lietotājam draudzīgā veidā. Pateicoties iestatīšanas vienkāršībai un daudziem pieejamiem risinājumiem, jūs pats jQuery fotogalerija tagad var izskatīties tieši tā, kā vēlaties. Iesniegtie skripti ir pārbaudīti dažādās platformās un tiem ir lieliska savietojamība.