Մենյու
տունՍտեղնաշարեր

jquery պատկերասրահ ամբողջ էկրանով: Fotorama - արձագանքող jQuery պատկերասրահ, տեղադրում և կազմաձևում: AD պատկերասրահի ընտրանքների կարգավորում

Պատկերասրահները և սլայդերները ամենաշատն են հանրաճանաչ ձևաչափեր jQuery. Դրանց շնորհիվ դուք կարող եք անհրաժեշտ քանակությամբ տեսողական բովանդակություն ավելացնել կայք՝ միաժամանակ խնայելով արժեքավոր տարածք։

Պատկերասրահները և սլայդերը էջը դարձնում են ավելի քիչ մարդաշատ, բայց այնուամենայնիվ թույլ են տալիս ավելացնել այն բոլոր պատկերները, որոնք անհրաժեշտ են հաղորդագրությունը փոխանցելու համար: Դրանք հատկապես օգտակար կլինեն առցանց խանութների համար։

Այսօրվա հոդվածում մենք ձեզ համար հավաքել ենք պատկերների լավագույն պատկերասրահները և jQuery սլայդերները:

Դրանք տեղադրելու համար պարզապես ավելացրեք ընտրված պլագինները գլխի բաժնում HTML էջեր jQuery գրադարանի հետ միասին և կարգավորեք դրանք ըստ փաստաթղթերի (ընդամենը մի քանի տող կոդ):

Ընտրեք, թե այս տարրերից որն է հիանալի տեղավորվում ձեր նախագծի մեջ:

1. Bootstrap Slider

Bootstrap Slider - անվճար, օպտիմիզացված շարժական սարքերպատկերի սահիչը հպումով և սահեցրեք ոլորելով: Այն զարմանալի տեսք կունենա ցանկացած էկրանին և ցանկացած բրաուզերում: Դուք կարող եք վերբեռնել պատկերներ, տեսանյութեր, տեքստ, մանրապատկերներ և կոճակներ սահիչներով:

2. Product Preview Slider

Product Preview Slider-ը մարմնավորում է jQuery-ի ողջ ներուժը, այն հիանալի տեղավորվում է ցանկացած ինտերֆեյսի մեջ: Դուք նույնպես գոհ կլինեք այս հավելվածի կոդի որակից և մաքրությունից:

3. Ընդլայնվող պատկերասրահ

Ընդլայնվող պատկերասրահը զարմանալի պլագին է, որը վերածվում է ամբողջ էկրանով պատկերասրահի ընդամենը մեկ սեղմումով: Այն կարող է օգտագործվել «Մեր մասին» բաժնում կամ ապրանքի մասին տեղեկությունները դիտելու համար:

4. Ֆոտորամա

Fotorama-ն արձագանքող jQuery պատկերասրահի հավելված է, որն աշխատում է ինչպես աշխատասեղանի, այնպես էլ աշխատասեղանի համար: բջջային բրաուզերներ. Այն առաջարկում է նավիգացիայի բազմաթիվ տարբերակներ՝ մանրապատկերներ, ոլորում, առաջ և հետ կոճակներ, ավտոմատ սլայդերի ցուցադրում և մարկերներ:

5. Ընկղմվող Slider

Immersive Slider-ը թույլ է տալիս ստեղծել սլայդների դիտման եզակի փորձ, որը նման է Google TV-ի սլայդերին: դու կարող ես փոխվել ֆոնային պատկեր, որը կմղվի՝ հիմնական լուսանկարների վրա կենտրոնանալու համար:

6. Leastjs

Leastjs-ը պատասխանող jQuery հավելված է, որը կօգնի ձեզ ստեղծել զարմանալի պատկերասրահ: Երբ սավառնում եք պատկերի վրա, տեքստը հայտնվում է, երբ սեղմում եք, պատուհանը ընդլայնվում է ամբողջ էկրանով:

7. Լոգարիթմական վահանակի կաղապար

Այս plugin-ը կատարյալ է պորտֆելների համար: Այն կստեղծի պատկերների բլոկներ, որոնք հորիզոնական են (ուղղահայաց փոքր էկրանների վրա), որոնց վրա կխարսխվի ընտրված բովանդակությունը:

8. Squeezebox Portfolio Կաղապար

Squeezebox Portfolio Template-ն առաջարկում է պորտֆելի շարժման էֆեկտներ: Երբ սավառնում եք հիմնական պատկերի (կամ բլոկի) վրա, հայտնվում են խարսխված տարրեր:

9. Խառնել պատկերները

Shuffle Images-ը զարմանալի արձագանքող պլագին է, որը թույլ է տալիս ստեղծել պատկերասրահ՝ սավառնելիս փոփոխվող պատկերներով:

10. Անվճար jQuery Lightbox Plugin

Անվճար jQuery Lightbox Plugin-ն օգնում է ձեզ ցույց տալ մեկ կամ մի քանի պատկեր մեկ էջում: Նրանք կարող են նաև մեծացնել և վերադարձնել իրենց սկզբնական չափը։

11. PgwSlider - Պատասխանող սահիչ jQuery-ի համար

PgwSlider-ը մինիմալիստական ​​պատկերի սահիչ է: jQuery կոդը փոքր է, ուստի այս plugin-ի բեռնման արագությունը ձեզ հաճելիորեն կզարմացնի։

12. Ցրված Polaroids պատկերասրահ

Scattered Polaroids Gallery-ը զարմանալի սլայդեր է, որը պատրաստված է հարթ դիզայն. Պատկերները փոխարկելիս նրա տարրերը պատահականորեն շարժվում են, ինչը զարմանալի տեսք ունի:

13. Bouncy բովանդակության զտիչ

Bouncy բովանդակության զտիչ - կատարյալ լուծումհամար և պորտֆելը: Այս հավելվածը թույլ է տալիս օգտվողներին արագ անցնել մի կատեգորիայից մյուսը:

14. Պարզ jQuery Slider

Պարզ jQuery Slider-ը համապատասխանում է իր անվանը: Այս փլագինը միավորում է JavaScript-ի, HTML5-ի և CSS3-ի տարրերը: Դեմոյում լռելյայն հասանելի է միայն տեքստի բեռնումը, բայց եթե մի քանի փոփոխություններ կատարեք, կարող եք նաև տեսողական բովանդակություն ավելացնել:

15. Սահել JS

Glide JS-ը պարզ, արագ և արձագանքող jQuery սլայդեր է: Հեշտ է կարգավորել, և հավելվածը շատ տեղ չի գրավի:

16. Ամբողջաէկրան քաշել-սահիչ պարալաքսով

Այս զարմանալի jQuery պատկերի և տեքստի վերբեռնման սահիչը կատարյալ է ցանկացած կայքի համար: Այն օգտատերերին կուրախացնի թեթև պարալաքսային էֆեկտով և դանդաղ տեքստի տեսքով:

Բարեւ բոլորին! Այս հոդվածում մենք կանդրադառնանք ինչպես ստեղծել գեղեցիկ և հարմար տեսակավորվող պատկերասրահ jQuery-ի միջոցով.

Գեղեցիկ, հեշտությամբ տեսակավորվող պատկերասրահը հիանալի բան է ձեր կայքի համար, որը կուրախացնի ձեզ և ձեր այցելուներին: Այսօր մենք կդիտարկենք գրադարանի համար շատ հեշտ տեղադրվող և կարգավորվող պլագին: jQuery– Filterizr.

Չնայած օգտագործման հեշտությանը, հավելվածը բավականին թեթև և արդյունավետ է: Եկեք նայենք դրան ավելի մանրամասն:

Ցույց

Տեսնելու համար, թե ինչպես է աշխատում plugin-ը, այցելեք պաշտոնական կայք, և ահա այն ձեր առջև է:

Դուք կարող եք ընտրել՝ տեսակավորել ըստ քաղաքի, բնության, արդյունաբերության, արևածագի, մայրամուտի կամ ցուցադրել բոլոր լուսանկարները (կանխադրված): Կա կոճակ Խառնել, որը թույլ կտա խառնել պատկերները: Կոճակներ ASCև DESCնկարները դասավորել համապատասխանաբար աճման և նվազման կարգով: Եթե ​​ցանկանում եք որոնել պատկեր ըստ դիրքի կամ նկարագրության, ընտրեք ցանկալի տարրը բացվող ցանկում և մուտքագրեք հարցումը որոնման դաշտում: Երբ մկնիկի օգնությամբ սավառնում եք պատկերի վրա, պատկերը սև-սպիտակից փոխվում է գունավոր:

Տեղադրում

Գրադարանը ներբեռնելու համար սեղմեք կոճակը Բեռնելկամ օգտագործել NPM:

npm տեղադրել filterizr

Փլագինը արդեն կազմաձևված է առանց տուփի, բայց եթե ցանկանում եք վերացնել կանխադրվածները, կարող եք կամ.

1) պարամետրերով օբյեկտ փոխանցեք կոնստրուկտորին jQuery

var filterizd = $(".filtr-container").filterizr((
// ընտրանքներ
})

2) Վերագրանցեք պարամետրերը՝ օգտագործելով setOptions ()մեթոդը օբյեկտում Filterizr.

Filterizd.filterizr("setOptions", (
// ընտրանքներ
})

Ընտրանքներ

Կանխադրված ընտրանքներ.

Ընտրանքներ = (
անիմացիաՏևողությունը՝ 0.5
հետզանգեր: (
onFilteringStart: function() (),
onFilteringEnd՝ ֆունկցիա() ( )
},
ուշացում՝ 0
delayMode՝ «առաջադեմ»,
թեթևացում՝ «թեթևացում»,
զտիչ՝ «բոլորը»,
filterOutCss: (
անթափանցիկություն՝ 0
փոխակերպում՝ «մասշտաբ (0.5)»
},
filterInCss: (
անթափանցիկություն՝ 0
փոխակերպում՝ «scale(1)»
},
դասավորությունը՝ «sameSize»,
ընտրիչ՝ «.filtr-container»,
setupControls՝ ճշմարիտ
}

Ավելին մանրամասն հրահանգներև յուրաքանչյուր պարամետրի նկարագրությունը կարելի է գտնել այստեղ

jQuery-ով վեբ դիզայնը շատ հեշտ է:

AD պատկերասրահ- լուսանկարչական պատկերասրահ մանրանկարներով:
Տեղադրում և տեղադրում

Շատ դեպքերում, կայքում կարելի է գեղեցիկ լուսանկարների պատկերասրահ պատրաստել՝ օգտագործելով կարուսել՝ մանրապատկերներով, որոնք բացվում են մեծ պատուհանում սեղմելով: Նման պատկերասրահ ստեղծելու համար բավական են միայն HTML և CSS գործիքները (տե՛ս, օրինակ, «Լուսանկարների պատկերասրահի ստեղծում» հոդվածը. ֆոտոշոփ), սակայն անվճար գրադարանի պլագինների օգտագործումը շատ ավելի մեծ հնարավորություններ է տալիս։ jQuery. Օրինակ, հաշվի առեք լուսանկարների պատկերասրահը AD պատկերասրահ, մշակված շվեդ ծրագրավորող Անդերս Էքդալի կողմից :

Այս լուսանկարների պատկերասրահը թույլ է տալիս ընտրել պատկերները փոխելու մի քանի տարբերակ, ցուցադրում է սանդղակ՝ մանրապատկերների նախադիտումներով և նկարների տակ տեքստով, ունի սլայդերի ցուցադրման ռեժիմ և շատ ուրիշներ: օգտակար հատկություններ. Փլագինը ճիշտ է աշխատում բրաուզերների մեծ մասում, ներառյալ IE 7, 8 և այլն: Լուսանկարների պատկերասրահի տարբերակներից մեկը AD պատկերասրահցույց է տրված ստորև (օրինակ, ինչպես միշտ, աշխատում է).

Լուսանկարների պատկերասրահի տեղադրում AD պատկերասրահ

Նախ, եկեք կայքում ստեղծենք նոր թղթապանակ և անվանենք այն գովազդային պատկերասրահ. Այնուհետև ներբեռնեք արխիվը և բացեք այն ստեղծված թղթապանակում: Մենք դրա մեջ կստանանք երկու js սցենար, CSS ոճի ֆայլ և մի քանի օժանդակ պատկերներ։

Հաջորդը, դուք պետք է ավելացնեք էջի վերնագիրը պիտակի ներսում ապագա լուսանկարների պատկերասրահով ... հետևյալ տողերը՝ ցույց տալով մեր նոր ֆայլերի ուղիները և մի փոքր JavaScriptսկզբնավորման համար AD պատկերասրահ:




Կարևոր նշում. եթե ձեր կայքը օգտագործում է բազմաթիվ պլագիններ jQuery, ապա ավելի հարմար է jquery.js ֆայլը (ցանկալի է վերջին տարբերակը) փոխանցել root թղթապանակ, որպեսզի մի քանի անգամ չներբեռնվի։ Այս դեպքում դրա հղման գիծը բոլոր պլագինների համար նույն տեսք կունենա: Մասնավորապես, մեր օրինակի համար ստացվում է այսպես.

Խորհուրդ չի տրվում օգտագործել մի քանիսը տարբեր տարբերակներ jQueryայնպես որ նրանք չեն հակասում միմյանց: Միևնույն ժամանակ, համոզվեք, որ ստուգեք պլագինները տեղադրված տարբերակը jQuery, քանի որ ոչ բոլոր տարբերակներն են փոխարինելի։

Պատկերներ տեղադրելու համար (մեծ - big.jpg և մանրապատկերներ - small.jpg) օգտագործվում է չդասավորված ցուցակ, որը տեղադրված է մի քանի պիտակների մեջ:

. Մեր հինգ պատկերներից բաղկացած օրինակի համար HTML կոդը այսպիսի տեսք ունի.

Պետք չէ շատ անհանգստանալ «div» արժեքների մասին և պարզապես պատճենեք ամբողջ կոնտեյները՝ տեղադրելով ձեր պատկերները պիտակների մեջ: Դրանցում տեղադրված պատկերների քանակը կարող է լինել ցանկացած: Ուշադրություն դարձրեք, թե ինչպես են ենթագրերը ցուցադրվում մեծացված նկարների տակ. հատկանիշ կոչումնշում է ընդհանուր անուն, և ալտ- ընդլայնված նկարագրություն: Հատկանիշն օգտագործվում է պատկերի հղումն իրականացնելու համար։ երկարաժամկետ(երրորդ պատկեր):

Ինչպես տեսնում եք, լուսանկարների պատկերասրահի տեղադրում AD պատկերասրահ, ինչպես, այնուամենայնիվ, պլագինների մեծ մասը jQuery, շատ պարզ է և չի պահանջում ծրագրավորման հատուկ գիտելիքներ։

Լուսանկարների պատկերասրահի ընտրանքների կարգավորում AD պատկերասրահ

Կարգավորումների մեծ մասը տեսքըլուսանկարների պատկերասրահներ AD պատկերասրահիրականացվում է օգտագործելով css կանոններըֆայլում jquery.ad-gallery.css. Հիմնականները տրամադրված են ռուսերեն մեկնաբանություններով և չունեն որևէ առանձնահատկություն, այսինքն՝ դժվարություններ։

Շարժապատկերը և այլ պարամետրերը կարող են փոխվել ֆայլում jquery.ad-gallery.js. Դա անելու համար բացեք այն խմբագրիչում կամ Notepad-ում և հենց սկզբում կտեսնեք մեկնաբանություններով տողեր։ Փոխելով պարամետրերի արժեքները և դիտելով արդյունքը զննարկիչում, կարող եք հարմարեցնել լուսանկարների պատկերասրահի աշխատանքը ձեր առաջադրանքներին համապատասխան: Օրինակ, գիծը
էֆեկտ՝ «slide-hori», // սլայդերի էֆեկտներ՝ «slide-vert», «fade», «size», «none», «slide-hori»
սահմանում է նկարները փոխելիս անցումների հինգ տարբերակներից մեկը:

Լուսանկարների պատկերասրահի պատուհանի չափերը որոշվում են ավտոմատ կերպով՝ ըստ ամենամեծ պատկերի: Ուստի ցանկալի է, որ նկարները շատ չտարբերվեն բարձրությամբ, հակառակ դեպքում շատ դատարկ տեղ կա։

ֆոտոշարք AD պատկերասրահԱյն հարմար է օգտագործել փոքր թվով պատկերներով։ Եթե ​​ձեր հավաքածուն բաղկացած է հարյուր-երկու պատկերից, ապա սպասել, որ դրանք բոլորը ոլորվեն, չափազանց հոգնեցուցիչ է, և ամեն օգտատեր չի «թռչի մինչև Դնեպրի կեսը»: Ցավոք, ներս AD պատկերասրահչկա սահիչ, որը կարող է արագ շարժվել մանրապատկերների միջով: Հետեւաբար, մեծ լուսանկարների պատկերասրահների համար խորհուրդ եմ տալիս օգտագործել մեկ այլ jQuery plugin - PP պատկերասրահ, որը քննարկվում է հաջորդ հոդվածում։

Կայքում լուսանկարների պատկերասրահների, պատկերների կարուսելների և սլայդ շոուների ստեղծման այլ ծրագրերի համար տես և բաժնում «

Այս ձեռնարկում ես ձեզ ցույց կտամ, թե ինչպես ստեղծել մինիմալիստական, բայց միևնույն ժամանակ հարմարավետ և ֆունկցիոնալ jQuery լուսանկարների պատկերասրահ, կամ պատկերների պատկերասրահ, ինչպես ցանկանում եք: Պատկերասրահն ունի կատեգորիաներ ստեղծելու հնարավորություն, որին հաջորդում է զտումը: Հնարավոր է նաև սլայդ շոու վարել: Պատկերասրահն աշխատում է բոլոր բրաուզերներում, ուստի հարմարվելու հետ կապված խնդիրներ չեն լինի:

Այս պատկերասրահը ստեղծելու համար կօգտագործվեն երկու անվճար գրադարաններ jQuery՝ Արագավազև PrettyPhoto. Դրանք մեծապես պարզեցնում են պատկերասրահի ստեղծումը։ Ինչպես միշտ, դուք կարող եք տեսնել աշխատանքի արդյունքը ցուցադրական էջում, ինչպես նաև ներբեռնել արխիվը աշխատանքային պատկերասրահից և բոլոր սկզբնաղբյուր ֆայլերը: Միակ բացասականը, եթե կարող եմ այդպես ասել, մեծ պատկերների համար մանրապատկերների ձեռքով ստեղծումն է: Մնացած ամեն ինչի համար սա պատկերասրահուշադրության արժանի.

ԱՂԲՅՈՒՐՆԵՐ

HTML նշում

Նախ, եկեք վերլուծենք վահանակը կատեգորիաների ցանկով, սա կետավոր ցուցակ ul. Ավելին, ցանկի յուրաքանչյուր տարր պետք է ունենա դասի եզակի անվանում։


  • Կատեգորիաներ:

  • Բոլորը

  • Կատեգորիա 1

  • Կատեգորիա 2

  • Կատեգորիա 3

  • Կատեգորիա 4







  • Նկարի անունը




    • Ինչպես նշվեց վերևում, ցանկի տարրերը պատկերասրահի պատկերներն են: Ցանկի յուրաքանչյուր տարր ներառում է բաղադրիչներ: Սա ինքնին պատկերն է, ավելի ճիշտ՝ նրա մանրապատկերը, ինչպես նաև նկարագրությունը։ Մանրապատկերը հղում է դեպի հիմնական պատկերը: Rel հատկանիշը պահանջվում է Javascript-ը կանչելու և հիմնական պատկերը բացելու համար:

    Մի մոռացեք նաև 2 կարևոր բանի մասին, li list տարրը պետք է ունենա յուրահատուկ data-id հատկանիշ։ Data-type հատկանիշը պարունակում է կատեգորիայի դաս, որի ցանկը նկարագրեցի վերևում։ Ամեն ինչ կարծես նշագրման մասին է:

    CSS ոճեր

    Ես չեմ կենտրոնանա ոճերի վրա, քանի որ մենք օգտագործում ենք պատրաստի գրադարան PrettyPhoto, որը պատասխանատու է պատկերի մեծացման համար, և css կոդըբավական. Այնուամենայնիվ, հարկ է նշել, որ ընդլայնված պատկերի համար կա 5 դիզայնի տարբերակ, թեև իդեալական տարբերակում միայն 3-ը, քանի որ երկու տարբերակում կլորացումը միայն հանվում է:

    Հետևաբար, ես ցույց կտամ միայն CSS ոճերը մանրապատկերների և կատեգորիաների ցանկի համար:

    Պորտֆոլիո-կատեգորիա (լուսանցք-ներքև:30px;)
    .portfolio-categ li(
    ցուցադրում: inline;
    լուսանցք-աջ:10px;
    }
    .image-block(
    ցուցադրում:բլոկ;
    պաշտոնը` հարաբերական;
    }
    .image-block img(
    եզրագիծ՝ 1px կոշտ #d5d5d5;
    սահման-շառավիղ՝ 4px 4px 4px 4px;
    ֆոն:#FFFFFF;
    լիցք: 10px;
    }
    .image-block img:hover (
    եզրագիծ՝ 1px կոշտ #A9CF54;
    տուփ-ստվեր:0 0 5px #A9CF54;
    }
    .պորտֆոլիո-տարածք լի (
    բոց: ձախ;
    լուսանցք՝ 0 12px 20px 0;
    վարարում: թաքնված;
    լայնությունը՝ 245px
    լիցք: 5px;
    }
    .home-portfolio-text ( margin-top:10px;)
    li.active a (տեքստի ձևավորում: ընդգծում; )

    Սկզբունքորեն ամեն ինչ պետք է պարզ լինի ոճերի հետ կապված։ Որպեսզի կատեգորիաները շարվեն, ցուցադրման հատկությունը դրված է inline . Պատկերի հարվածի էֆեկտ տալու համար սահմանեք Ֆոնի գույնը(սպիտակ) և 10 պիքսել լիցք: Ցանկի տարրերի չափերը սահմանվում են .portfolio-area li .

    jQuery

    Եվ վերջապես ամենակարեւորը, հանուն որի ամբողջ դասը։ Սա jQuery կոդը է: Սկսենք պատկերները զտելով ըստ կատեգորիաների:

    // Ընտրեք պորտֆոլիո-տարածքի բոլոր մանկական տարրերը և գրեք փոփոխականին
    var $data = $(".portfolio-area").clone();

    $(".portfolio-categ li").click(function(e) (
    $("filter li").removeClass("active");

    Var filterClass=$(this).attr("class").split(" ").slice(-1);

    Եթե ​​(filterClass == «բոլորը») (
    var $filteredData = $data.find(".portfolio-item2");
    ) ուրիշ (
    var $filteredData = $data.find(".portfolio-item2");
    }
    $(".portfolio-area").quicksand($filteredData, (
    տեւողությունը՝ 600
    ճշգրտում Բարձրությունը՝ «ավտոմատ»
    ), ֆունկցիա () (

    LightboxPhoto ();
    });
    $(this).addClass("ակտիվ");
    վերադարձ կեղծ;
    });

    Օգտագործելով clone() մեթոդը և ընտրիչը՝ մենք ընտրում ենք .portfolio-area-ի բոլոր երեխաներին և գրում $data փոփոխականում։ Այնուհետև մենք հետևում ենք կատեգորիաներից մեկի՝ ցանկի li տարրի սեղմմանը .portfolio-categ դասի հետ: Մենք բոլոր կատեգորիաները դարձնում ենք ոչ ակտիվ՝ հեռացնելով removeClass("active"), եթե դա չկատարվի, ապա ժամանակի ընթացքում բոլոր կատեգորիաները կակտիվանան, և զտումը կդադարի:

    Քանի որ մենք սեղմում ենք ցուցակի տարրը, այս ընտրիչը պարունակում է ցուցակի տարրը, այսինքն՝ li , մենք դրանից վերցնում ենք class հատկանիշի արժեքը և օգտագործում ենք split մեթոդը՝ դասի անունը մի քանի մասի բաժանելու համար, սահմանը բացատ է։ (այսինքն, եթե դասը «բոլոր ակտիվ» էր, ապա բաժանվելուց հետո մենք ստանում ենք «բոլորը» և «ակտիվ» զանգվածը): Եվ այնուհետև, օգտագործելով slice մեթոդը, մենք ընտրում ենք զանգվածի առաջին տարրը (մեր դեպքում՝ «բոլորը»), և ստացված արդյունքը գրում filterClass փոփոխականում։ Եթե ​​բացակայում էր, ապա դասի անունը չի փոխվի։

    Հաջորդը, մենք ստուգում ենք, արդյոք տողը filterClass փոփոխականում բոլորը, ապա օգտագործելով .find մեթոդը $data զանգվածից ընտրում ենք portfolio-item2 դասի բոլոր տարրերը, որոնք վերը դիտարկել ենք։ Ընտրված տարրերը (և սրանք ցանկի բոլոր տարրերն են, այսինքն՝ բոլոր նկարները) տեղադրվում են filteredData փոփոխականում։

    Հակառակ դեպքում, եթե filterClass-ը հավասար չէ բոլորը, այնուհետև filterData փոփոխականի մեջ կդնենք ցանկի ոչ բոլոր տարրերը, այլ միայն նրանց, որոնց տվյալների տիպի հատկանիշը համապատասխանում է կատեգորիայի դասին։ Մի խոսքով, միայն մեկ կատեգորիայի տարրեր։

    Եվ վերջապես ստացված փոփոխականը փոխանցում ենք գրադարան jquery արագավազ, որն իրականացնում է պատկերի զտում։ Ամեն ինչ զտման մասին է:

    Այժմ, ինչ վերաբերում է ելնող պատուհանում պատկերի մեծացմանը: Այստեղ ամեն ինչ շատ ավելի պարզ է.

    jQuery("a").prettyPhoto((
    անիմացիա Արագություն՝ «արագ»,
    սլայդերի ցուցադրություն՝ 5000
    թեմա՝ «Ֆեյսբուք»,
    show_title՝ կեղծ
    overlay_gallery՝ կեղծ
    });

    Հետևում է հղման վրա սեղմելը, որի rel հատկանիշը սկսվում է prettyPhoto-ով: Հետո գրադարանը մտնում է խաղի մեջ: գեղեցիկ Լուսանկար, և պատկերը հրաշքով մեծանում է։ Ի դեպ, մի քանի պարամետր էլ ենք անցնում. Օրինակ՝ անիմացիայի արագությունը արագ է, սլայդ շոուի ուշացումը՝ 5 վայրկյան, Facebook-ի թեման (ընդհանուր առմամբ 5 թեմա կա, դրանք պատկերների / prettyPhoto թղթապանակում են), ինչպես նաև արգելում ենք ցուցադրել նկարի անվանումը և մեծացնելով նկարը մկնիկի վրա սավառնելիս:

    Այսօր ռեսպոնսիվ դիզայնը դարձել է թիվ մեկ ընտրությունը դիզայներների և մշակողների համար, քանի որ ավելի ու ավելի շատ մարդիկ ցանկանում են, որ իրենց կայքերը աշխատեն խելացի սարքերով: Պատասխանատու դիզայնը գրավում է բջջային օգտատերերի ուշադրությունը և օգնում ձեզ առաջացնել առաջատարներ և վաճառքներ, որոնք ձեր բիզնեսը տեղափոխում են այլ մակարդակ:

    Այժմ դուք կարող եք ստեղծել արձագանքող դասավորություն գրեթե ամեն ինչի համար, ինչպիսիք են ցանկը, ցանցը, սյունակը և նույնիսկ նկարներն ու պատկերները: Եթե ​​ցանկանում եք ցուցադրել ձեր կայքի բովանդակությունը, պատկերները և տեսանյութերը արձագանքող պատկերասրահի ոճով, ապա հետևյալը jQuery Պատկերասրահի պլագիններկարող է օգնել ձեզ դրանում:

    Այս հոդվածը ներառում է մի քանիսը Լավագույն արձագանքող jQuery Image Gallery հավելվածներըորը ոչ միայն հնարավորություն կտա ստեղծել ձեր վեբկայքերի համար պատասխանատու պատկերասրահներ, այլև դրանք ցուցադրել էլեգանտ ոճով, որպեսզի ձեր կայքը ավելի գեղեցիկ և տեսողականորեն ապշեցնող լինի:

    Ստորև ներկայացված է ցուցակը Լավագույն արձագանքող jQuery Image Gallery հավելվածները, որոնք արժե հաշվի առնել 2016 թվականին.

    Bootstrap Photo Gallery-ը պարզ jQuery հավելված է, որը ձեր պատկերների համար կստեղծի Bootstrap-ի վրա հիմնված արձագանքող Լուսանկարչական պատկերասրահ:
    Այս փլագինը աջակցում է փոփոխական բարձրություն պատկերների և ենթագրերի համար: Ներառված է նաև ընտրովի «մոդալ» տուփ «հաջորդ» և «նախորդ» էջերով:
    Դեմո և ներբեռնում

    2. JK Responsive YouTube և Image Gallery


    Սա ժամանակակից, լայթբոքս ոճի պատկերասրահ է՝ ձեր կայքում պատկերներ և YouTube տեսանյութեր ցուցադրելու համար: Պատկերասրահի ինտերֆեյսը լիովին արձագանքող է և գեղեցիկ է աշխատում բոլոր մեծ կամ փոքր սարքերում:
    Դեմո և ներբեռնում

    3.Ֆաբա


    FABA-ն արձագանքող Facebook ալբոմների և լուսանկարների պատկերասրահի jquery հավելված է, որը կբեռնի ընտրված ֆեյսբուքյան էջից բոլոր ալբոմներն ու լուսանկարները:

    Կան մոտ 90 տարբերակ, որոնք կարող եք խմբագրել, և կարող եք հարմարեցնել գրեթե ամեն ինչ՝ անիմացիաներ, սավառնող էֆեկտներ, սավառնող անիմացիաների յուրաքանչյուր մաս, տեքստեր, վարքագծեր և շատ ավելին: Դուք կարող եք գեղեցիկ ալբոմներ ինտեգրել ձեր նախագծի կամ վեբ էջում:


    xGallerify-ը թեթև, արձագանքող պատկերասրահի հավելված է, որը թույլ է տալիս ստեղծել գեղեցիկ պատկերասրահներ ձեր կայքերի համար: Այս plugin-ը թեթև է (3 կբ ֆայլի չափ), հեշտ օգտագործման համար և գալիս է մի շարք հարմարեցվող տարբերակների և ոճերի հետ:
    Դեմո և ներբեռնում


    Instagram Element-ը պրեմիում Instagram հավելված է բլոգերների, լուսանկարիչների, մոդելների և բոլոր նրանց համար, ովքեր ցանկանում են մեծացնել իրենց ներկայությունը Instagram-ում:
    Այս փլագինը լիովին արձագանքող է և թույլ է տալիս հեշտությամբ կառավարել 50+ տարբերակները և թույլ է տալիս գեղեցիկ կերպով ցուցադրել ձեր լուսանկարները ցանկացած սարքի վրա:


    SnapGallery-ը պարզ jQuery հավելված է, որը տարբեր չափերի պատկերների տգեղ ցանկը վերածում է գեղեցիկ, հարմարեցված պատկերասրահի՝ JavaScript-ի մեկ տողով:

    Այն լիովին արձագանքող է, կարգավորելի և թույլ է տալիս ընտրել պատկերների միջև հեռավորությունը, թույլատրելի նվազագույն լայնությունը մինչև կուտակումը և առավելագույն թվով սյունակներ՝ ճանապարհին ավելի շատ տարբերակներով:
    Դեմո և ներբեռնում


    Eagle Gallery-ը սա ժամանակակից պատկերասրահ է՝ պատկերի խոշորացման ֆունկցիոնալությամբ: Պատկերասրահը կառավարելու համար կարող եք օգտագործել ժեստերը կամ կառավարման կոճակները: Սա լիովին արձագանքող պատկերասրահ է, որն ունի աջակցություն սենսորային էկրանև ստեղծվել է շարժական սարքերի, նոութբուքերի և աշխատասեղանների համար:

    Այս պատկերասրահով դուք կարող եք հեշտությամբ ստեղծել ապրանքների պատկերասրահ ձեր ինտերնետային խանութում՝ մանրամասն դիտելու համար և հարմարեցնել այն տարբերակների օգնությամբ:


    Unite Gallery-ը բազմաֆունկցիոնալ JavaScript պատկերասրահ է, որը հիմնված է jQuery գրադարանի վրա: Այն կառուցված է մոդուլային տեխնիկայով՝ օգտագործման հարմարավետության և հարմարեցման մեծ շեշտադրմամբ: Շատ հեշտ է հարմարեցնել պատկերասրահը, փոխելով դրա երեսը css-ի միջոցով և նույնիսկ գրել ձեր սեփական թեման: Այնուամենայնիվ, այս պատկերասրահը շատ հզոր է, արագ և ունի ամենաշատը մեր օրերում պետք է ունենալառանձնահատկություններ, ինչպիսիք են արձագանքողությունը, հպումը միացված և նույնիսկ խոշորացման գործառույթը, դա եզակի էֆեկտ է:
    Դեմո և ներբեռնում


    jQuery lightGallery-ը թեթև jQuery lightbox պատկերասրահ է՝ պատկերների և վիդեո պատկերասրահի ցուցադրման համար:

    Lightgallery-ն աջակցում է հպումով և սահեցրած նավարկությանը սենսորային էկրանով սարքերում, ինչպես նաև աշխատասեղանի համար մկնիկի քաշում: Սա թույլ է տալիս օգտատերերին նավարկելու սլայդների միջև կամ սահեցրեք կամ մկնիկը քաշելով:

    Lightgallery-ն ունի բազմաթիվ ընտրանքներ, որոնք թույլ են տալիս շատ հեշտությամբ հարմարեցնել հավելվածը: Դուք կարող եք հեշտությամբ հարմարեցնել պատկերասրահի տեսքն ու զգացողությունը՝ թարմացնելով SASS փոփոխականները:
    Դեմո և ներբեռնում


    Սա jQuery պատկերասրահի ևս մեկ հիանալի հավելված է, որը թույլ է տալիս ստեղծել ցանցային դասավորության պատկերասրահ ձեր նկարների և տեսանյութերի համար: Այս հավելվածները լիովին արձագանքող են և միացված են մի շարք գործառույթներով, ինչպիսիք են սոցիալական փոխանակումը, անսահման ոլորումը, css3 անիմացիաները, ֆիլտրերը և շատ ավելին:


    blueimp Gallery-ը հպումով միացված, արձագանքող և հարմարեցվող պատկերների և վիդեո պատկերասրահ, կարուսել և լուսատուփ է, որը օպտիմիզացված է ինչպես բջջային, այնպես էլ աշխատասեղանի վեբ բրաուզերների համար:

    Այն ունի սահեցման, մկնիկի և ստեղնաշարի նավարկություն, անցումային էֆեկտներ, սլայդերի ցուցադրման գործառույթ, ամբողջ էկրանով աջակցություն և բովանդակության բեռնում ըստ պահանջի և կարող է ընդլայնվել՝ ցուցադրելու լրացուցիչ բովանդակության տեսակներ:
    Դեմո և ներբեռնում


    nanoGALLERY-ն հպման հնարավորություն ունեցող և արձագանքող պատկերասրահ է՝ հիմնավորված, կասկադային և ցանցային դասավորությամբ: Այն աջակցում է ինքնատեղակայված պատկերների և Flickr, Picasa, Google+ և SmugMug լուսանկարների ալբոմների ներգրավմանը:

    Ալբոմներում բազմամակարդակ նավիգացիա, մանրապատկերների վրա համակցված սավառնող էֆեկտներ, արձագանքող մանրապատկերների չափսեր, բազմաթիվ դասավորություններ, սլայդերի ցուցադրում, ամբողջ էկրանով, էջադրում, պատկերի ծույլ բեռնվածություն և շատ ավելին:
    Դեմո և ներբեռնում


    FlipGallery-ն անվճար jQuery-ով աշխատող լուսանկարների պատկերասրահ է՝ մանրապատկերների և լուսատուփի ընդլայնումների միջև փայլուն շրջվող անցումներով: Այլ առանձնահատկությունները ներառում են դինամիկ պատկերի հոսք, ավտոմատ էջադրում, ավտոմատ կտրում և թափանցիկ պատկերի ծածկույթ:

    Այս հավելվածն ունի նաև պրեմիում տարբերակ, որը գալիս է մի քանի սրամիտ հատկություններով և, անշուշտ, ներառում է արձագանքողություն:
    Դեմո և ներբեռնում


    Fancy Gallery-ը jQuery պատկերասրահի պատասխանող հավելված է, որը թույլ է տալիս ցուցադրել ձեր պատկերներն ու տեսանյութերը շքեղ ոճով: Այս պլագիններն ունեն անհատականացման բազմաթիվ տարբերակներ, և դուք կարող եք ավելացնել անսահմանափակ ալբոմներ, տեսանյութեր, նկարներ և շատ ավելին:

    Փլագինը գալիս է տարբեր սավառնող էֆեկտներով մանրապատկերների և վերնագրերի համար, որոնք նույնպես կարող են ճշգրտվել: Դուք կարող եք ընտրել 7 նախապես սահմանված գունային թեմաներից կամ պարզապես ստեղծել ձերսեփական գունային թեման հեշտությամբ:


    Balanced Gallery-ը jQuery հավելված է, որը հավասարաչափ բաշխում է լուսանկարները տողերի կամ սյունակների միջև՝ առավելագույնս օգտագործելով տրամադրված տարածքը: Լուսանկարները լռելյայնորեն չափվում են «կոնտեյներ» տարրի չափի հիման վրա՝ հավասարակշռված պատկերասրահը դարձնելով լավ ընտրություն ռեսպոնսիվ կայքերի համար:
    Դեմո և ներբեռնում

    16.S պատկերասրահ


    S Gallery-ն օգտագործում է HTML5-ի Ամբողջ էկրանով API-ն և մեծապես հենվում է CSS3 անիմացիայի լավության և CSS3 փոխակերպումների վրա, այնպես որ այն կաշխատի միայն այն բրաուզերներում, որոնք աջակցում են այս հնարավորությունները:
    Դեմո և ներբեռնում

    17. Ultimate Grid Responsive Gallery


    Սա HTML | css | jQuery Grid-ը Lightbox-ով, դուք կարող եք նշել մանրապատկերներ ցանցի համար, և երբ սեղմում եք դրա վրա լուսատուփը բացելու համար, այն կբեռնվի սովորական պատկերը, կարող եք նշել ենթագրերի և լուսատուփի տեքստը: Նաև պետք չէ միանգամից բեռնել բոլոր պատկերները (կատարողական նպատակներով), որպեսզի կարողանաք նշել պատկերների քանակը, որոնք պետք է բեռնվեն, երբ այն առաջին անգամ բեռնվի, և պատկերների քանակը, որոնք պետք է բեռնվեն, երբ սեղմում եք «բեռնել ավելի շատ պատկերներ» կոճակը:


    Responsive Thumbnail Gallery-ը jQuery պլագին է՝ պատկերների պատկերասրահներ ստեղծելու համար, որոնք չափվում են իրենց կոնտեյներով:
    Դեմո և ներբեռնում


    SuperBox-ը jQuery հավելված է, որը մեկ քայլ առաջ է տանում ամբողջ «պատկերը» և «լայթբոքսը»՝ նվազեցնելով JavaScript-ի և պատկերի բեռնվածության կախվածությունը՝ լայթբոքսինգը անցյալի բան դարձնելու համար: Օգտագործելով HTML5 data-* հատկանիշներ, արձագանքող դասավորություններ և jQuery:

    SuperBox-ը հրաշքներ է գործում որպես ստատիկ պատկերասրահ, որի վրա կարող եք սեղմել՝ պատկերի ամբողջական տարբերակը բացահայտելու համար:
    Դեմո և ներբեռնում


    The Ultimate Thumbnail Gallery-ը լիովին արձագանքող պատկերների պատկերասրահի հավելված է, որը գալիս է դասավորության երկու տեսակի (ցանց և գիծ, ​​ուղղահայաց և հորիզոնական), ոլորման (jScrollPane) կամ կոճակի նավարկմամբ: Մանրապատկերների տուփերը աջակցում են իրենց ներսում գտնվող ցանկացած HTML տարր: