Зургийн галерей болон гулсагч нь jQuery-ийн хамгийн алдартай форматуудын нэг юм. Тэдний ачаар та үнэ цэнэтэй орон зайг хэмнэхийн зэрэгцээ шаардлагатай хэмжээний харааны контентыг сайтдаа нэмж оруулах боломжтой.

Галерей болон гулсагч нь хуудсыг завгүй болгодог ч мессежээ дамжуулахад шаардлагатай бүх зургийг нэмэх боломжийг танд олгоно. Тэд ялангуяа онлайн дэлгүүрүүдэд ашигтай байх болно.

Өнөөдрийн нийтлэлд бид танд зориулж jQuery-ийн шилдэг зургийн галерей болон гулсагчуудыг цуглуулсан.

Тэдгээрийг суулгахын тулд сонгосон залгаасуудыг jQuery номын сангийн хамт HTML хуудасны толгой хэсэгт нэмж, баримт бичгийн дагуу тохируулна уу (хоёр мөр код).

Эдгээр элементүүдийн аль нь таны төсөлд төгс тохирохыг сонго.

1. Bootstrap Slider

Bootstrap Slider нь хөдөлгөөнт төхөөрөмжид тохирсон үнэгүй дүрс гулсагч юм. Энэ нь ямар ч дэлгэц, ямар ч хөтөч дээр гайхалтай харагдах болно. Та гулсагч руу зураг, видео, текст, өнгөц зураг, товчлуурыг ачаалж болно.

2. Бүтээгдэхүүнийг урьдчилан харах гулсагч

Product Preview Slider нь jQuery-ийн бүрэн боломжуудыг агуулсан бөгөөд ямар ч интерфейстэй төгс тохирно. Мөн та энэ залгаасын кодын чанар, цэвэр байдалд сэтгэл хангалуун байх болно.

3. Өргөтгөх боломжтой зургийн цомог

Expandable Image Gallery нь нэг товшилтоор бүтэн дэлгэцийн галерей болж хувирдаг гайхалтай залгаас юм. Үүнийг "Бидний тухай" хэсэгт ашиглах эсвэл бүтээгдэхүүний мэдээллийг үзэх боломжтой.

4. Фоторама

Fotorama нь суурин болон гар утасны хөтөч дээр ажилладаг jQuery галерейн нэмэлт өргөтгөл юм. Энэ нь янз бүрийн навигацийн сонголтыг санал болгодог: өнгөц зураг, гүйлгэх, урагш болон буцах товчлуурууд, автомат слайд шоу, сум.

5. Immersive Slider

Immersive Slider нь Google TV-ийн гулсагчтай төстэй өвөрмөц слайд үзэх туршлагыг бий болгох боломжийг танд олгоно. Үндсэн зургийг фокустай байлгахын тулд арын дэвсгэр зургийг бүдэгрүүлэх боломжтой.

6. Хамгийн бага

Leastjs бол гайхалтай галерей үүсгэхэд тань туслах jQuery-ийн мэдрэмжтэй залгаас юм. Зурган дээр курсорыг аваачихад дарахад текст гарч ирэх бөгөөд цонх бүтэн дэлгэц рүү тэлэх болно.

7. Sliding Panels Template

Энэ залгаас нь портфолио хийхэд тохиромжтой. Энэ нь сонгосон контентыг холбох хэвтээ (жижиг дэлгэцэн дээр босоо) байрлуулсан зургийн блокуудыг үүсгэх болно.

8. Squeezebox Portfolio Template

Squeezebox Portfolio Template нь таны багцын хөдөлгөөнт эффектийг санал болгодог. Та үндсэн зураг (эсвэл блок) дээр хулганыг аваачихад бэхлэгдсэн элементүүд гарч ирнэ.

9. Зургийг холих

Shuffle Images бол хулганыг аваачихад өөрчлөгддөг зургуудтай галерей үүсгэх боломжийг олгодог гайхалтай мэдрэмжтэй залгаас юм.

10. Үнэгүй jQuery Lightbox Plugin

Үнэгүй jQuery Lightbox Plugin нь нэг хуудсан дээр нэг буюу хэд хэдэн зургийг харуулахад тусална. Мөн тэдгээрийг томруулж, анхны хэмжээнд нь буцааж өгч болно.

11. PgwSlider – jQuery-д зориулсан хариу үйлдэл үзүүлэх слайдер

PgwSlider бол минималист дүрс гулсагч юм. jQuery код нь хөнгөн тул энэ залгаасын ачаалах хурд нь таныг гайхшруулах болно.

12. Тарсан Polaroids галерей

Scattered Polaroids Gallery бол хавтгай загвартай гайхалтай гулсагч юм. Зургийг солих үед түүний элементүүд эмх замбараагүй хөдөлдөг бөгөөд энэ нь гайхалтай харагдаж байна.

13. Bouncy Content Filter

Bouncy Content Filter нь портфолио хийхэд тохиромжтой шийдэл юм. Энэхүү залгаас нь хэрэглэгчдэд нэг ангиллаас нөгөөд хурдан шилжих боломжийг олгодог.

14. Энгийн jQuery Slider

Энгийн jQuery Slider нь нэрэндээ нийцдэг. Энэхүү залгаас нь JavaScript, HTML5 болон CSS3-ийн элементүүдийг нэгтгэдэг. Анхдагч демо нь зөвхөн текстийг ачаалах боломжийг олгодог боловч хэрэв та хэд хэдэн өөрчлөлт хийвэл визуал контентыг нэмж болно.

15. Glide JS

Glide JS бол энгийн, хурдан бөгөөд мэдрэмжтэй jQuery гулсагч юм. Энэ нь тохируулахад хялбар бөгөөд залгаас нь их зай эзэлдэггүй.

16. Параллакс бүхий бүтэн дэлгэцийн чирэгч

Зураг болон текстийг ачаалах чадвартай энэхүү гайхалтай jQuery слайдер нь ямар ч сайтад тохиромжтой. Энэ нь бага зэрэг параллакс эффект, удаан текст харагдах байдлаар хэрэглэгчдийг баярлуулах болно.

Би өнөөдрийн сэдвийн сэдвийг сонгох гэж удаан хугацаа зарцуулсан. Үүний үр дүнд бид сонголтоо хараахан хийгээгүй байгааг анзаарсан зургийн галерей. Их сайхан сэдэв гэж бодож байна, учир нь галерейолон сайт дээр байдаг. Үнэнийг хэлэхэд тэд бүгд тийм ч сэтгэл татам биш юм. Өнөөгийн хөгжлийн чиг хандлагыг харгалзан үзэх jquery, html5гэх мэт. Эцсийн эцэст миний өмнө тулгарч байсан шийдлүүдээс хамаагүй илүү сэтгэл татам шийдлүүд байх ёстой гэж би бодсон. Тэгэхээр. Нэг өдрийг өнгөрөөсний дараа бид асар олон тооны скриптийг олж чадсан. Энэ бүхэл бүтэн уулнаас би зөвхөн сонгохоор шийдсэн, учир нь би хайртай тул та өмнөх нийтлэлүүдээс анзаарсан.
Зургийн цомогтохиолдолд хамаарахгүй зургийн цомогтой. скрипт ашиглаж болно, Би энэ нь бүр ч зөв байх болно гэж бодож байна гэрэл зурагчин, дизайнеруудын багцгэх мэт. JQuery эффектүүдзочдын анхаарлыг татахад тусалж, таны сайтад дэгжин байдлыг нэмэх болно.
Тэгэхээр. Таны анхааралд зориулсан цуглуулга сайтад зориулсан jquery зургийн галерей залгаасууд.
Сэтгэгдэл бичихээ бүү мартаарай, энэ цуглуулгыг алдахгүйн тулд та нийтлэлийн доод хэсэгт байрлах од дээр дарж дуртай зүйлсдээ нэмж болно.

ФОТОБОКС

Үнэгүй, хөнгөн, мэдрэмжтэй зургийн цомог, бүх эффект, шилжилтийг css3 ашиглан хийдэг. Гэрэл зурагчдын багцын вэб сайт хийхэд тохиромжтой.

S галерей

Сэтгэл татам JQuery зургийн галерей залгаас. Хөдөлгөөнт дүрс нь css3 ашиглан ажилладаг.

DIAMONDS.JS

Жинхэнэ зургийн цомог үүсгэх залгаас. Бяцхан зургууд нь иймэрхүү хэлбэртэй байдаг ромб, энэ нь одоогоор маш их алдартай. Энэ маягтыг css3 ашиглан хийсэн. Энэхүү галерейн цорын ганц сул тал бол зургийг бүрэн хэмжээгээр нь нээх гэрлийн хайрцаг байхгүй явдал юм. Өөрөөр хэлбэл, та lightbox залгаасыг шургуулах хэрэгтэй болно. Энэхүү скрипт нь очир алмааз хэлбэртэй дасан зохицох дүрсний сүлжээг үүсгэдэг.

Супербокс

Орчин үеийн зургийн галерейг ашиглаж байна JQuery, css3 болон html5. Урьдчилан үзэх дүрс дээр дарахад гэрэлт хайрцагт (попап цонх) бүтэн зураг нээгддэгт бид бүгд дассан. Энэхүү залгаасын хөгжүүлэгчид гэрэл хайрцаг аль хэдийн хуучирсан гэж шийджээ. Энэ галерей дахь зургууд нь урьдчилан үзэхийн доор нээгдэнэ. Демо-г үзээд энэ шийдэл нь илүү орчин үеийн харагдаж байгааг хараарай.
|

Smooth Diagonal Fade Gallery

Орчин үеийн зургийн галерей урьдчилан харах нь дэлгэцийн бүх орон зайд тархсан. Скрипт нь сервер дээрх зураг бүхий хавтсыг сканнердах боломжтой, өөрөөр хэлбэл зураг бүрийг тусад нь оруулах шаардлагагүй. Зүгээр л сервер дээрх хавтас руу зургуудаа байршуулж, тохиргоонд лавлах замыг зааж өгнө үү. Дараа нь скрипт өөрөө бүгдийг хийх болно.

Гамма галерей

Пинтерест маягийн тор бүхий загварлаг, хөнгөн, мэдрэмжтэй зургийн цомог нь өнөө үед маш их алдартай болсон. Скрипт нь ширээний компьютер болон хоёуланд нь маш сайн ажилладаг хөдөлгөөнт төхөөрөмжүүдямар ч дэлгэцийн нягтралтай. Вэб дизайнерын багцыг бий болгох маш сайн шийдэл.

УРЬДЧИЛАН ҮЗҮҮЛЭХ ТЭРГЭЖ БАЙГАА ТӨГСӨН ЗУРАГ

Plugin нь дасан зохицох зургийн сүлжээ. Доор дарахад том зураг болон тайлбар гарч ирнэ. Портфолио үүсгэхэд тохиромжтой.

jGallery

jGallery бол бүрэн дэлгэц, мэдрэмжтэй зургийн галерей. Эффект, шилжилт, тэр ч байтугай хэв маягийг хялбархан өөрчлөх боломжтой.

Glisse.js

Энгийн боловч маш үр дүнтэй зургийн галерей залгаас. Энэ бол зургийн цомог үүсгэх шаардлагатай үед яг ийм шийдэл юм. Plugin нь цомгийг дэмждэг бөгөөд маш гайхалтай эргүүлэх нөлөөтэй.

Мозайк урсгал

Энгийн, дасан зохицох чадвартай Pinterest загварын сүлжээ зургийн цомог.

Галерей

Ангилалаар шүүсэн Pinterest загварын сүлжээ бүхий өөр нэг загварлаг галерей. Хөтөч дээр ажилладаг: Chrome, Safari, Firefox, Opera, IE7+, Android хөтөч, Chrome mobile, Firefox mobile.

хамгийн бага.js

Маш сайн үнэгүй зургийн цомог JQUERY, 5 болон CSS3 ашиглан. Энэ нь маш дур булаам дүр төрхтэй бөгөөд таны зочдын анхаарлыг татах нь дамжиггүй.

flipLightBox

Энгийн зургийн галерей. Урьдчилан харах дээр дарахад бүрэн дүрс нь гэрэлт хайрцагт нээгдэнэ.

blueimp галерей

Уян хатан галерей. Зөвхөн модаль цонхонд зураг харуулахаас гадна бас харуулах боломжтой видео. Мэдрэгч төхөөрөмж дээр маш сайн ажилладаг. Үүнийг тохируулахад хялбар бөгөөд нэмэлт залгаасуудыг ашиглан функцийг өргөжүүлэх боломжтой (Дараагийн залгаасыг үзнэ үү).

Сайн уу! Энэ нийтлэлд бид харах болно, JQuery ашиглан хэрхэн үзэсгэлэнтэй, эвтэйхэн эрэмбэлэх боломжтой галлерей хийх вэ.

Үзэсгэлэнт, тохиромжтой галерей нь танд болон таны зочдод таалагдах вэбсайтын хувьд гайхалтай зүйл юм. Өнөөдөр бид номын сангийн залгаасыг суулгах, тохируулахад маш хялбарыг үзэх болно JQuery- Шүүлтүүр.

Хэрэглэхэд хялбар хэдий ч залгаас нь нэлээд хөнгөн бөгөөд үр дүнтэй байдаг. Үүнийг илүү нарийвчлан авч үзье.

Жагсаал

Plugin хэрхэн ажилладагийг харахын тулд албан ёсны вэбсайт руу очно уу, энэ нь таны өмнө байна!

Та хот, байгаль, үйлдвэр, нар мандах, нар жаргах зэргээр эрэмбэлэх эсвэл бүх зургийг харуулах боломжтой (өгөгдмөл). Товч байна Холимог, энэ нь танд зургуудыг холих боломжийг олгоно. Товчлуурууд A.S.C.Тэгээд DESCзургуудыг өсөх, буурах дарааллаар эрэмбэлэх. Хэрэв та зургийг байрлал эсвэл тайлбараар нь олохыг хүсвэл унадаг жагсаалтаас хүссэн зүйлээ сонгоод хайлтын талбарт асуулга оруулна уу. Зурган дээр хулганаа аваачихад зураг хар цагаанаас өнгөтэй болж хувирна.

Суурилуулалт

Номын санг татаж авах бол товчийг дарна уу Татаж авахэсвэл ашиглах NPM:

Npm filterizr суулгана

Энэ залгаасыг хайрцагнаас нь аль хэдийн тохируулсан байгаа хэдий ч хэрэв та өгөгдмөл тохиргоог хүчингүй болгохыг хүсвэл дараахь зүйлийг хийж болно.

1) Параметр бүхий объектыг бүтээгчид дамжуулна JQuery

Var filterizd = $(".filtr-container").filterizr((
// сонголтууд
})

2) Параметрүүдийг ашиглан дахин бичнэ үү setOptions()объект дахь арга Шүүлтүүр.

Filterizd.filterizr("setOptions", (
// сонголтууд
})

Сонголтууд

Өгөгдмөл параметрүүд:

Сонголтууд = (
хөдөлгөөнт дүрс Үргэлжлэх хугацаа: 0.5,
Буцах дуудлага: (
onFilteringStart: функц () ( ),
onFilteringEnd: function() ( )
},
саатал: 0,
delayMode: "progressive",
easing: "ease-out",
шүүлтүүр: "бүгд",
filterOutCss: (
тунгалаг байдал: 0,
хувиргах: "масштаб (0.5)"
},
filterInCss: (
тунгалаг байдал: 0,
хувиргах: "масштаб(1)"
},
зохион байгуулалт: "ижил хэмжээ",
сонгогч: ".filtr-container",
setupControls: үнэн
}

Параметр бүрийн дэлгэрэнгүй заавар, тайлбарыг эндээс авах боломжтой

Өнөөдөр бид jQuery Flipping Gallery залгаасыг үзэх бөгөөд энэ нь танд маш анхны шилжилттэй гайхалтай зургийн галерей үүсгэх боломжийг олгодог. Жишээн дээр энэ залгаасыг ашиглан 5 төрлийн шилжилт байна. Plugin нь хэрэглэхэд үнэхээр хялбар тул хэн ч үүнийг бүрэн ашиглах боломжтой.

Жишээг эндээс харж болно:

Татаж авах

Бид Демо 2-оос цэсийг хэрхэн үүсгэх талаар илүү дэлгэрэнгүй авч үзэх бөгөөд цэс зүүн дээд буланд гарч ирнэ.

HTML хэсэг

Эхлээд та эндээс татаж авах боломжтой jQuery номын сан болон Flipping Gallery залгаасыг шошгуудын хооронд холбох хэрэгтэй. :

1 2 3 4 5 6

<толгой > ... <"http://code.jquery.com/jquery-1.9.1.js"> <скриптийн төрөл = "текст/жаваскрипт" src = "http://code.jquery.com/jquery.flipping_gallery.js"> ... </толгой>

Дараа нь бид зургуудыг цэгцлэнэ. Та хүссэнээрээ олон зураг нэмж болно:

1 2 3 4 5 6 7 8

<div анги = "галерей" > <a href = "#" > <a href = "#" > <a href = "#" > <a href = "#" > <a href = "#" > ... </div>

Зургийн тайлбарыг нэмэхийн тулд (4 ба 5-р үзүүлэнгийн адил) та шинж чанарыг ашиглах хэрэгтэй өгөгдлийн тайлбар:

1 2 3 4 5 6 7 8

<div анги = "галерей" > <a href = "#" data-caption = "Маш" > <a href = "#" data- caption = "cool" > <a href = "#" өгөгдлийн тайлбар = "галерей" > <a href = "#" data-caption = "ашиглах" > <a href = "#" data-caption = "Flipping" > ... </div>

JS хэсэг

1 2 3 4 5 6 7 8 9

$(".gallery") .flipping_gallery (( чиглэл: "урагш" , сонгогч: "> a" , зай: 10 , showMaximum: 15 , enableScroll: үнэн , flipDirection: "доод" , автоматаар тоглуулах: 500 ) );

Арга тус бүр нь юу гэсэн үг болохыг харцгаая.

• чиглэл- зураг хэрхэн харагдахыг хариуцдаг арга. Хэрэв "урагшаа" бол эхнээс нь авсан зургийг төгсгөлд нь байрлуулна, хэрэв "учирсан" бол эсрэгээр. Өгөгдмөл утга нь "урагш" юм.
• сонгогч- зураг сонгох сонгогчийг хүссэнээр өөрчилж болно.
• зай— хэтийн төлөв дэх зургийн хоорондох зайг тохируулна.
• Хамгийн их харуулах— хэрэглэгчдэд харагдах зургийн тоог тохируулна. Та дор хаяж 100 зураг ашиглаж болно, гэхдээ зөвхөн эхний 15-ыг харуулах бөгөөд энэ нь маш тохиромжтой бөгөөд хөтөчийг ачаалахгүй.
• идэвхжүүлэх Scroll- Та хулганы дугуйг ашиглан зургийг үзэх боломжтой.
• flipDirection— зураг хаашаа гулсахыг тодорхойлдог: "зүүн" - зүүн, "баруун" - баруун, "дээд" - дээш, "доод" - доош. Анхдагч байдлаар энэ нь доошоо гулсдаг.
• автоматаар тоглох- галлерейг автоматаар эхлүүлэх. Энэ нь миллисекундээр тодорхойлогддог, i.e. Зургууд өөрчлөгдөхөд хэр хугацаа шаардагдах вэ?

Дүгнэлт

Та одоо зургаа нийтлэхдээ ашиглах гайхалтай галерейтай боллоо.

Манай скриптүүдийн цуглуулгаас та вэбсайтдаа жижиг боловч маш хэрэгтэй, ажиллагаатай залгаасуудыг олох боломжтой. Арга хэрэгсэл рүү эргэж байна jQueryГалерей, сайхан дизайн, гүйлгэх, томруулах, өнгөц зургийг харах болон бусад олон ашигтай функцээр дижитал зургийн цомгоо хялбархан зохион байгуулаарай. Мэргэжлийн вэбсайтуудад зориулсан хатуу шийдлүүд, мөн зугаа цэнгэлийн төслүүдэд зориулсан хөдөлгөөнт дүрс болон бусад тусгай эффект бүхий тод шийдлүүд байдаг.

Утгаар jQuery зургуудхуудсыг дахин ачаалахгүйгээр, хөдөлгөөний урсгалыг нэмэгдүүлэхгүйгээр үзэх боломжтой. Үзүүлсэн залгаасууд нь бодит цаг хугацаанд зураг ачааллыг оновчтой болгож, галерейг хэрэглэгчдэд хялбар, ээлтэй байдлаар харуулах боломжийг олгодог. Тохиргооны хялбар байдал, олон боломжит шийдлүүдийн ачаар өөрийн гэсэн jQuery зургийн цомогяг одоо хүссэнээрээ харагдах боломжтой. Үзүүлсэн скриптүүдийг өөр өөр платформ дээр туршиж үзсэн бөгөөд маш сайн нийцтэй байна.