Tasvirlar galereyasi va slayderlar eng mashhur jQuery formatlaridan biridir. Ularning yordami bilan siz qimmatli joyni tejash bilan birga saytingizga kerakli miqdordagi vizual tarkibni qo'shishingiz mumkin.

Galereyalar va slayderlar sahifani kamroq band qiladi, lekin baribir xabaringizni etkazish uchun kerak bo'lgan barcha rasmlarni qo'shish imkonini beradi. Ular, ayniqsa, onlayn-do'konlar uchun foydali bo'ladi.

Bugungi maqolada biz siz uchun eng yaxshi jQuery tasvir galereyalari va slayderlarini to'pladik.

Ularni o'rnatish uchun tanlangan plaginlarni jQuery kutubxonasi bilan birga HTML sahifasining bosh qismiga qo'shing va ularni hujjatlarga muvofiq sozlang (faqat bir nechta kod satri).

Ushbu elementlardan qaysi biri loyihangizga to'liq mos kelishini tanlang.

1. Bootstrap Slider

Bootstrap Slider - teginish va surish orqali bepul, mobil uchun optimallashtirilgan tasvir slayderi. U har qanday ekranda va istalgan brauzerda ajoyib ko'rinadi. Slayderlarga rasmlar, videolar, matnlar, eskizlar va tugmalarni yuklashingiz mumkin.

2. Mahsulotni ko'rib chiqish slayderi

Mahsulotni ko'rib chiqish slayderi jQuery'ning to'liq imkoniyatlarini o'zida mujassam etgan va har qanday interfeysga juda mos keladi. Siz ushbu plagin kodining sifati va tozaligidan ham mamnun bo'lasiz.

3. Kengaytiriladigan rasmlar galereyasi

Kengaytiriladigan rasmlar galereyasi bir marta bosish bilan to'liq ekranli galereyaga aylanadigan ajoyib plagindir. U "Biz haqimizda" bo'limi uchun yoki mahsulot ma'lumotlarini ko'rish uchun ishlatilishi mumkin.

4. Fotorama

Fotorama - bu ish stoli va mobil brauzerlar uchun ishlaydigan sezgir jQuery galereya plaginidir. U turli xil navigatsiya imkoniyatlarini taklif qiladi: eskizlar, aylantirish, oldinga va orqaga tugmalar, avtomatik slayd-shou va o'qlar.

5. Immersiv slayder

Immersive Slider sizga Google TV slayderiga o'xshash noyob slaydni ko'rish tajribasini yaratishga imkon beradi. Asosiy fotosuratni diqqat markazida ushlab turish uchun fon tasvirini loyqa qilib o'zgartirishingiz mumkin.

6. Eng kam

Leastjs - bu ajoyib galereya yaratishda yordam beradigan sezgir jQuery plaginidir. Kursorni rasm ustiga olib borganingizda, bosganingizda matn paydo bo'ladi, oyna to'liq ekranga kengayadi;

7. Sürgülü panellar shabloni

Ushbu plagin portfel uchun ideal. U gorizontal (vertikal ravishda kichik ekranlarda) joylashtirilgan tasvirlar bloklarini yaratadi, ularga tanlangan tarkib bog'lanadi.

8. Squeezebox portfolio shabloni

Squeezebox Portfolio Shabloni portfelingiz uchun harakat effektlarini taklif etadi. Kursorni asosiy tasvir (yoki blok) ustiga olib borganingizda, biriktirilgan elementlar paydo bo'ladi.

9. Tasvirlarni aralashtirish

Tasvirlarni aralashtirish - bu hayratlanarli sezgir plagin bo'lib, bu sizga sichqonchani ko'targanda o'zgaruvchan tasvirlar bilan galereya yaratish imkonini beradi.

10. Bepul jQuery Lightbox plagini

Bepul jQuery Lightbox plagini bir sahifada bir yoki bir nechta rasmni ko'rsatishga yordam beradi. Ularni kattalashtirish va asl hajmiga qaytarish ham mumkin.

11. PgwSlider – jQuery uchun javob beruvchi slayder

PgwSlider - minimalist tasvir slayderi. jQuery kodi engil, shuning uchun ushbu plaginni yuklash tezligi sizni hayratda qoldiradi.

12. Tarqalgan Polaroidlar galereyasi

Scattered Polaroids Gallery - bu tekis dizaynga ega ajoyib slayder. Tasvirlarni almashtirishda uning elementlari xaotik tarzda harakatlanadi, bu ajoyib ko'rinadi.

13. Bouncy Content Filter

Bouncy Content Filter - portfellar uchun ideal yechim. Ushbu plagin foydalanuvchilarga tezda bir toifadan ikkinchisiga o'tish imkonini beradi.

14. Oddiy jQuery Slider

Oddiy jQuery Slider o'z nomiga mos keladi. Ushbu plagin JavaScript, HTML5 va CSS3 elementlarini birlashtiradi. Standart demo faqat matnni yuklashga imkon beradi, lekin agar siz bir nechta o'zgarishlar qilsangiz, vizual tarkibni ham qo'shishingiz mumkin.

15. Glide JS

Glide JS oddiy, tez va sezgir jQuery slayderidir. Uni sozlash oson va plagin ko'p joy egallamaydi.

16. Parallaks bilan to'liq ekranli drag-slayder

Tasvirlar va matnlarni yuklash qobiliyatiga ega ushbu ajoyib jQuery slayderi har qanday veb-saytga mos keladi. U foydalanuvchilarni engil parallaks effekti va sekin matn ko'rinishi bilan quvontiradi.

Men bugungi mavzu uchun mavzuni tanlashda uzoq vaqt o'tkazdim. Natijada, men bilan hali tanlov o'tkazmaganimizni payqadim tasvir galereyalari. Menimcha, bu ajoyib mavzu, chunki galereyalar ko'plab saytlarda mavjud. Ochig'ini aytganda, ularning barchasi juda jozibali emas. Hozirgi rivojlanish tendentsiyalarini hisobga olgan holda jquery, html5 va hokazo. Men o'yladim, axir, men ilgari duch kelganlardan ko'ra ko'proq jozibali echimlar bo'lishi kerak. Shunday qilib. Bir kun o'tkazganimizdan so'ng, biz juda ko'p skriptlarni topishga muvaffaq bo'ldik. Bu butun tog'dan men faqat tanlashga qaror qildim, chunki men yaxshi ko'raman, siz avvalgi xabarlardan sezganingizdek.
Rasmlar galereyasi hollardagina emas, balki amal qiladi foto albomlar bilan. Skriptdan foydalanish mumkin, menimcha, bu yanada to'g'ri bo'lar edi, kabi fotosuratchilar, dizaynerlar uchun portfel va hokazo. Jquery effektlari tashrif buyuruvchilarning e'tiborini jalb qilishga yordam beradi va shunchaki saytingizga nafislik qo'shadi.
Shunday qilib. E'tiboringiz uchun to'plam jQuery rasm galereyasi plaginlari sayt uchun.
Ushbu to'plamni yo'qotmaslik uchun sharh va esda qoldirishni unutmang, maqolaning pastki qismidagi yulduzchani bosish orqali uni sevimlilaringizga qo'shishingiz mumkin.

FOTOBOX

Bepul, engil, sezgir tasvirlar galereyasi, unda barcha effektlar va o'tishlar css3 yordamida amalga oshiriladi. Fotosuratchi portfeli veb-saytini yaratish uchun ideal.

S galereyasi

Jozibali Jquery rasmlar galereyasi plagini. Animatsiya css3 yordamida ishlaydi.

DIAMONDS.JS

Asl rasmlar galereyasini yaratish uchun plagin. Miniatyuralar o'xshash shaklga ega romb, bu hozirda juda mashhur. Bu forma css3 yordamida tuzilgan. Ushbu galereyaning yagona kamchiliklari - fotosurat to'liq hajmda ochiladigan yorug'lik qutisining yo'qligi. Ya'ni, siz lightbox plaginini vidalashingiz kerak bo'ladi. Ushbu skript olmos shaklidagi tasvirlarning moslashuvchan panjarasini yaratadi.

Superboks

Zamonaviy tasvirlar galereyasidan foydalanish JQuery, css3 va html5. Oldindan ko'rishni bosganingizda to'liq tasvir layt qutisida (qalqib chiquvchi oyna) ochilishiga hammamiz o'rganib qolganmiz. Ushbu plaginni ishlab chiquvchilar yorug'lik qutisi o'z foydaliligini allaqachon o'tkazib yuborgan deb qaror qilishdi. Ushbu galereyadagi rasmlar oldindan ko'rish ostida ochiladi. Namoyishni tomosha qiling va ushbu yechim ancha zamonaviy ko'rinishini ko'ring.
|

Smooth Diagonal Fade Galereyasi

Zamonaviy tasvirlar galereyasi, unda oldindan ko'rishlar butun ekran maydoni bo'ylab taqsimlanadi. Skript serverdagi fotosuratlar bilan jildni skanerlashi mumkin, ya'ni har bir tasvirni alohida kiritish shart emas. Suratlarni serverdagi papkaga yuklang va sozlamalarda katalogga yo'lni belgilang. Keyin skript hamma narsani o'zi bajaradi.

Gamma galereyasi

Bugungi kunda juda mashhur bo'lgan Pinterest uslubidagi panjara bilan zamonaviy, engil, sezgir tasvirlar galereyasi. Skript ish stoli kompyuterlarida ham ajoyib ishlaydi mobil qurilmalar har qanday ekran o'lchamlari bilan. Veb-dizayner portfelini yaratish uchun ajoyib yechim.

OLDINDAN KOʻRISHNI KENGAYTIRISH BILAN ESKIRA TARTIBI

Plagin bu moslashtirilgan tasvirlar tarmog'i. Pastga bosganingizda, kattaroq fotosurat va tavsif paydo bo'ladi. Portfel yaratish uchun yaxshi.

jGallery

jGallery bu to'liq ekranli, sezgir tasvirlar galereyasi. Effektlar, o'tishlar va hatto uslublar osongina sozlanishi.

Glisse.js

Oddiy, ammo juda samarali rasm galereyasi plagini. Fotoalbom yaratish kerak bo'lganda aynan shu yechim. Plagin albomlarni qo'llab-quvvatlaydi va juda ajoyib aylantirish effektiga ega.

Mozaik oqim

Oddiy, moslashuvchan Pinterest uslubidagi grid tasvirlar galereyasi.

Galereya

Kategoriya bo'yicha filtrlangan Pinterest uslubidagi panjara bilan boshqa zamonaviy galereya. Brauzerlarda ishlaydi: Chrome, Safari, Firefox, Opera, IE7+, Android brauzeri, Chrome mobile, Firefox mobile.

kamida.js

Ajoyib bepul rasmlar galereyasi JQUERY, 5 va CSS3 yordamida. U juda jozibali ko'rinishga ega va shubhasiz tashrif buyuruvchilarning e'tiborini tortadi.

flipLightBox

Oddiy rasmlar galereyasi. Oldindan ko'rish tugmasini bosganingizda, to'liq rasm yorug'lik qutisida ochiladi.

blueimp galereyasi

Moslashuvchan galereya. Modal oynada nafaqat tasvirlarni, balki tasvirlarni ham ko'rsatishga qodir video. Sensorli qurilmalarda ajoyib ishlaydi. Uni sozlash oson va qo'shimcha plaginlar yordamida funksionallikni kengaytirish mumkin (Keyingi plaginga qarang).

Hammaga salom! Ushbu maqolada biz ko'rib chiqamiz, JQuery yordamida qanday qilib chiroyli va qulay saralanadigan galereyani yaratish.

Chiroyli, qulay tartiblangan galereya veb-saytingiz uchun sizni va tashrif buyuruvchilarni xursand qiladigan ajoyib narsadir. Bugun biz kutubxona plaginini o'rnatish va sozlash juda oson ko'rib chiqamiz JQuery- Filtrlash.

Foydalanish qulayligiga qaramay, plagin juda engil va samarali. Keling, buni batafsil ko'rib chiqaylik.

Namoyish

Plagin qanday ishlashini ko'rish uchun rasmiy veb-saytga o'ting va u sizning oldingizda!

Siz shahar, tabiat, sanoat, quyosh chiqishi, quyosh botishi bo'yicha saralashni tanlashingiz yoki barcha fotosuratlarni ko'rsatishingiz mumkin (standart). Bir tugma bor Aralash, bu sizga tasvirlarni aralashtirib yuborish imkonini beradi. Tugmalar A.S.C. Va DESC rasmlarni mos ravishda o'sish va kamayish tartibida tartiblang. Agar siz rasmni joylashuvi yoki tavsifi bo'yicha topmoqchi bo'lsangiz, ochiladigan ro'yxatda kerakli elementni tanlang va qidiruv maydoniga so'rovni kiriting. Sichqonchani tasvir ustiga olib borganingizda, rasm oq-qora rangdan rangga aylanadi.

O'rnatish

Kutubxonani yuklab olish uchun tugmani bosing Yuklab olish yoki foydalaning NPM:

Npm filterizr o'rnating

Plagin allaqachon qutidan tashqarida konfiguratsiya qilingan, lekin agar siz standart sozlamalarni bekor qilmoqchi bo'lsangiz, quyidagilarni qilishingiz mumkin:

1) Konstruktorga parametrlarga ega ob'ektni o'tkazish JQuery

Var filterizd = $(".filtr-konteyner").filterizr((
// variantlar
})

2) yordamida parametrlarni qayta yozing setOptions() ob'ektdagi usul Filtrlash.

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

Variantlar

Standart parametrlar:

Variantlar = (
animatsiya Davomiyligi: 0,5,
qayta qo'ng'iroqlar: (
onFilteringStart: function() ( ),
onFilteringEnd: function() ( )
},
kechikish: 0,
kechikish rejimi: "progressiv",
yengillashtirish: "ease-out",
filtr: "barchasi",
filterOutCss: (
shaffoflik: 0,
aylantirish: "shkala (0,5)"
},
filterInCss: (
shaffoflik: 0,
aylantirish: "shkala (1)"
},
tartib: "bir xil o'lcham",
selektor: ".filtr-konteyner",
setupControls: rost
}

Har bir parametr bo'yicha batafsil ko'rsatmalar va tavsiflarni quyidagi manzilda topishingiz mumkin

Bugun biz jQuery Flipping Gallery plaginini ko'rib chiqamiz, bu sizga juda original o'tishlar bilan ajoyib tasvir galereyalarini yaratish imkonini beradi. Misolda ushbu plagin yordamida 5 turdagi o'tishlar mavjud. Plaginni ishlatish haqiqatan ham juda oson, shuning uchun har kim undan to'liq foydalanishi mumkin.

Misolni bu erda ko'rish mumkin:

Yuklab olish

Demo 2 dan menyuni qanday yaratishni batafsil ko'rib chiqamiz, menyu yuqori chap tomonda paydo bo'ladi.

HTML qismi

Avval siz bu yerdan yuklab olishingiz mumkin bo'lgan jQuery kutubxonasini va Flipping Gallery plaginini teglar orasiga ulashingiz kerak. :

1 2 3 4 5 6

<bosh > ... <"http://code.jquery.com/jquery-1.9.1.js"> <skript turi = "matn/javascript" src = "http://code.jquery.com/jquery.flipping_gallery.js"> ... </head>

Keyin biz rasmlarni tartibga solamiz. Siz xohlagancha ko'p rasm qo'shishingiz mumkin:

1 2 3 4 5 6 7 8

<div sinf = "galereya" > <a href = "#" > <a href = "#" > <a href = "#" > <a href = "#" > <a href = "#" > ... </div>

Tasvirlarga tavsif qo'shish uchun (4 va 5 demolarda bo'lgani kabi) siz atributdan foydalanishingiz kerak ma'lumotlar sarlavhasi:

1 2 3 4 5 6 7 8

<div sinf = "galereya" > <a href = "#" data-caption = "Juda" > <a href = "#" data-caption = "cool" > <a href = "#" data-caption = "galereya" > <a href = "#" data-caption = "foydalanish" > <a href = "#" ma'lumotlar sarlavhasi = "Flipping" > ... </div>

JS qismi

1 2 3 4 5 6 7 8 9

$(".gallery") .flipping_gallery (( yo'nalish: "oldinga" , selektor: "> a" , interval: 10 , showMaximum: 15 , enableScroll: true , flipDirection: "pastki" , avtomatik ijro: 500 ) );

Keling, har bir usul nimani anglatishini ko'rib chiqaylik:

• yo'nalishi— tasvirlar qanday paydo bo'lishiga javob beradigan usul. Agar "oldinga" bo'lsa, u holda boshidan rasm oxirida joylashtiriladi, agar "orqaga" bo'lsa - aksincha. Standart qiymat “oldinga”.
• selektor— biz tasvirlarni tanlaydigan selektor, uni xohlagancha o'zgartirish mumkin;
• oraliq— istiqboldagi tasvirlar orasidagi masofani o'rnatadi.
• ko'rsatishMaksimal— foydalanuvchiga koʻrinadigan tasvirlar sonini oʻrnatadi. Siz kamida 100 ta rasmdan foydalanishingiz mumkin, lekin faqat birinchi 15 tasi ko'rsatiladi, bu juda qulay va brauzerni yuklamaydi.
• enableScroll- Sichqoncha g'ildiragi yordamida tasvirlarni ko'rishingiz mumkin.
• flipDirection— tasvir qayerga siljishini aniqlaydi: “chap” – chap, “o‘ng” – o‘ng, “yuqori” – yuqoriga va “pastki” – pastga. Odatiy bo'lib, u pastga siljiydi.
• avtomatik— galereyani avtomatik ishga tushirish. Millisekundlarda ko'rsatilgan, ya'ni. Rasmlar o'zgarishi uchun qancha vaqt kerak bo'ladi?

Xulosa

Endi sizda suratlaringizni joylashtirishda foydalanish uchun ajoyib galereya mavjud.

Bizning skriptlar to'plamida siz veb-saytingiz uchun kichik, ammo juda foydali va funktsional plaginlarni topishingiz mumkin. Vositalarga murojaat qilish jQueryGalereya, chiroyli dizayn, aylantirish, kattalashtirish, eskizlarni ko'rish va boshqa ko'plab foydali xususiyatlar bilan raqamli foto galereyangizni osongina tartibga soling. Professional veb-saytlar uchun qat'iy echimlar va ko'ngilochar loyihalar uchun animatsiya va boshqa maxsus effektlar bilan yorqin echimlar mavjud.

Orqali jQuery rasmlari sahifani qayta yuklamasdan va trafik oqimini oshirmasdan ko'rish mumkin. Taqdim etilgan plaginlar real vaqtda tasvirlarni yuklashni optimallashtirish va galereyani qulay va foydalanuvchilarga qulay tarzda taqdim etish imkonini beradi. Sozlamalarning qulayligi va ko'plab mavjud echimlar tufayli o'zingizniki jQuery foto galereyasi endi siz xohlagan tarzda ko'rishingiz mumkin. Taqdim etilgan skriptlar turli platformalarda sinovdan o'tgan va mukammal muvofiqlikka ega.