Bugun biz ko'rib chiqamiz jQuery plagini Flipping Gallery, bu juda original o'tishlar bilan ajoyib tasvir galereyalarini yaratishga imkon beradi. Misolda ushbu plagin yordamida o'tishning 5 turi 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 yuklab olishingiz mumkin bo'lgan jQuery kutubxonasi va Flipping Gallery plaginini teglar orasiga ulashingiz kerak. :

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 = "salqin" > <a href = "#" data-caption = "galereya" > <a href = "#" data-caption = "foydalanish" > <a href = "#" data-caption = "Flipping" > ... </div>

JS qismi

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 rasmlarni 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. Tasvirlar o'zgarishi uchun qancha vaqt kerak bo'ladi?

Xulosa

Endi sizda suratlaringizni joylashtirishda foydalanish uchun ajoyib galereya mavjud.

1. Sahifani aylantirish effektiga ega jQuery galereyasi

Shunga o'xshash yechim eng so'nggi blog maqolalarini ko'rsatish yoki mahsulotlarni taqdim etish uchun ishlatilishi mumkin.

Suratlaringizni ajoyib jQuery galereyasida ko'rsatishning noyob usuli.

3. Mahsulot uchun jQuery tasvirlar galereyasi, “slideJS” plagini

JQuery plagini bir nechta tasvirli mahsulot sahifasini amalga oshirish uchun juda mos keladi. Tasvirlar orasidagi o'tish kichik rasmlar yoki navigatsiya strelkalari yordamida amalga oshirilishi mumkin.

Sichqonchani uning ustiga olib borganingizda tasvir kattalashadi.

5. Elegant Lightbox galereyasi “ppGallery”

6. jQuery sensorli galereyasi

7. Eskizlar bilan yangi jQuery galereyasi

Professional jQuery galereyasi 2011.

8. jQuery plagini “Nivo Zoom”

Nivo slayderini ishlab chiquvchilardan yana bir yuqori sifatli jQuery plagini. Eskiz ustiga bosish orqali rasmni kattalashtiring.

9. jQuery 3d devor galereyasi

2011 yil uchun yangi jQuery galereyasi. Tasvirlar oqimi ekranning butun kengligini qamrab oladi. Siz fotosuratlar orasida uchta usulda harakat qilishingiz mumkin: sichqonchaning g'ildiragidan foydalanish, galereyaning yuqori qismida aylantirish va pastki qismidagi eskiz blokidan foydalanish. Galereya juda ta'sirli ko'rinadi.

Galereyadagi rasmlar tasodifiy ravishda kattalashtiriladi va yana kichraytirilib, qabariq effektini yaratadi.

11. jQuery galereyasida tasvirlarning noodatiy ko'rinishi

Yuqoridagi slayderdan foydalanib, stekdagi tasvirlar orasidagi masofani o'zgartirishingiz mumkin. Rasmni bosganingizda, u aylanadi.

12. jQuery galereya plagini “MB.Gallery”

13. Butun ekranni to'ldirish uchun cho'zilgan jQuery galereyasi

2011 yildan plagin. O'lchamidan qat'i nazar, brauzer oynasining butun maydoni bo'ylab cho'zilgan tasvirlar tavsifi bilan yangi galereya. Tasvirning eskizlari qiziqarli tarzda amalga oshiriladi. Rasmlar orasidagi o'tish eskiz yonidagi strelkalar va sichqonchaning g'ildiragi yordamida amalga oshiriladi.

14. Engil jQuery galereyasi

Plagin avtomatik ravishda jildni skanerlaydi va rasmlarning kichik nusxalarini yaratadi.

16. jQuery va Raphael kutubxonalaridan foydalangan holda zamonaviy galereya

Sichqonchani eskiz ustiga olib borishda qiziqarli effekt.

17. jQuery plaginining yangi versiyasi “Supersized” 3.1

Yaqinda men to'liq ekranli galereyalarni yaratish uchun ushbu jQuery yechimini aytib o'tdim. Bugun men sizni tanishtirmoqchiman oxirgi versiya Ushbu professional plagin. Skript butunlay qayta yozildi, endi galereya tezroq ishlaydi va ba'zi qiziqarli sozlamalar qo'shildi, masalan, klaviatura yordamida navigatsiya, tasvirlarni o'zgartirishning o'zgaruvchan tezligi, ekran o'lchami va boshqalar.

18. jQuery plagini “Galleria 1.2.2”

Loyihalaringiz uchun yangi jQuery galereyasi.

Tugmani bosganingizda galereya sahifada ochiladi. Kattalashtirilgan tasvir atrofida eskizlar paydo bo'ladi. Tasvirlarning avtomatik o'zgarishini boshqarishingiz mumkin. Amaldagi texnologiyalar: jQuery, CSS, PHP.

20. “Taymer galereyasi” plagini

jQuery galereyasi. Slaydlarni avtomatik o'zgartirish va agar ular juda ko'p bo'lsa, eskizlarni aylantirish amalga oshirildi.

JQuery yordamida rasm galereyasi plagini.

22. Mobil qurilmalarda ko'rish uchun JavaScript galereyasi “PhotoSwipe”

Mobil qurilmalarda (telefonlar yoki planshetlar) ko'rish uchun optimallashtirilgan rasm galereyasi.

23. 3D effektli javascript galereyasi

24. jQuery morfing galereyasi

Yangi jQuery slayder. Slaydlarni almashtirishda bir nechta ajoyib animatsion effektlar.

25. jQuery plagini “Galleria 1.2.3”

26. jQuery rasm galereyasi “Image Wall”

Ekran bo'ylab tarqalgan miniatyuralar ko'rinishidagi original galereya har xil o'lchamlar, rasmlar sifatida stilize qilingan. Eskizni bosganingizda, tasvir tavsifi bo'lgan maydon paydo bo'ladi va yana bosganingizda, asl katta rasm paydo bo'ladi.

27. CSS3 galereyasi

Qiziqarli hover effekti.

28. “TN3 Gallery” miniatyura galereyasi

Eskizlar bilan jQyery galereyasi. Yilni oynada va to'liq ekranli oynada ko'rish imkoniyati, shuningdek, slaydni avtomatik o'zgartirishni o'chirish/yoqish imkoniyati amalga oshirildi.

29. “Grid-Galereya” tasvirlar panjarasi

Rasmlar panjarasi brauzer oynasining kengligiga qarab cho'ziladi. Qiziqarli kursor effekti: faol satr va ustun ta'kidlangan.

30. jQuery almashish galereyasi

Kodning bir necha satrida engil jQuery galereyasi.

Namoyish sahifasi turli uslublarda ochiladigan mega menyular uchun bir nechta variantni taqdim etadi. Ushbu menyuda siz quyidagilarni sozlashingiz mumkin: o'chirish effekti, chiqish tezligi, shuningdek, bosish yoki sichqonchani element ustiga olib borish orqali o'chirish o'rtasida tanlov qiling.

31. jQuery rasmlar galereyasi

Rasm sarlavhalari bilan jQuery galereyasi. Bir nechta slaydga o'tish effektlari. Tasvirlar orasidagi navigatsiya strelkalar yordamida yoki eskizni bosish orqali amalga oshiriladi.

Tasvir va uning miniatyuralari doira shaklida qilingan.

33. jQuery fotografining portfolio plagini “Portfolio Image Navigation”

Fotosuratchi portfelini loyihalash uchun original JavaScript yechimi. Tasvirlar o'rtasida navigatsiya yuqoriga/chapga/o'ngga strelkalar va mini-kvadratlar (2D fazoda harakatni taqlid qilish) yordamida amalga oshiriladi. Siz turli xil fotosessiyalardagi fotosuratlarni turli vertikal qatorlarga guruhlashingiz va navigatsiya elementlari yordamida ular bo'ylab harakat qilishingiz mumkin. Demoni tomosha qiling.

34. “jmFullZoom” plagini

Brauzer oynasining butun o'lchamiga cho'zilgan rasmlarni ko'rish uchun plagin. Portfeldagi ishlarni ko'rsatish uchun foydalanish mumkin.

35. Fotokarta

Galereya bilan birlashtirilgan Google xarita. Pastki o'ng burchakdagi belgini bosish orqali uni to'liq ekranga kengaytirishingiz mumkin. Sayohat veb-saytlari uchun juda mos keladi.

36. Eskizlar bilan tasvirlar galereyasi

Eskizlar bilan jQuery galereyasi.

37. jQuery galereyasi “Galleriffic”

Eskizlar bilan slayd-shou.

38. jQuery CSS3 plagini “Wave Display Effect”

Sahifadagi tasvirlar va kontentning to'lqinga o'xshash taqdimoti. Eskiz ustiga bosganingizda, barcha tasvirlar kattalashtiriladi va ularning nomlari paydo bo'ladi. Uni yana bosganingizda, fotosurat tavsifi bilan blok ochiladi.

Ko'p displey parametrlari va sozlamalari.

42. Plogger

43. Skriptlardan foydalanmasdan CSS yordamida yaratilgan oddiy, yoqimli galereya

Chiroyli ko'rinadi va barcha zamonaviy brauzerlarda ajoyib ishlaydi

Siz avtomatik slayd-shouni boshqarishingiz mumkin (boshlash/to'xtatish), klaviatura strelkalari yordamida slaydlarni almashtirish, slayd sarlavhalarini avtomatik sahifalash, agar ular ko'p bo'lsa, bir sahifada bir nechta galereyalarni qo'llab-quvvatlaydi, slaydlar uchun taglavhalar, API-ni qo'llab-quvvatlash va o'zingizni yaratish qobiliyati slaydga o'tish effektlari

46. ​​Fotosuratlar to'plami ko'rinishidagi galereya

Biz yaratadigan galereyaning natijasi shunday bo'lishi kerak. Siz demoni tomosha qilishingiz va agar xohlasangiz, galereyaning yakuniy natijasini yuklab olishingiz mumkin.

Hammaga salom!
Barcha chiziqlarni ishlab chiquvchilar, o'zlarining navbatdagi veb-loyihalarini yaratishda, ko'pincha o'z foydalanuvchilariga fotosuratlar yoki rasmlar to'plami bo'lishidan qat'iy nazar, har xil turdagi tasvirlarni qanday taqdim etishlari haqidagi savolga qiziqishadi. Buning uchun onlayn makonning qiziquvchan onglari, albatta, bu "burjua" maydoni, ajoyib, rang-barang va eng muhimi funktsional slayd-shou va foto galereyalarni yaratish uchun tobora ko'proq yangi echimlarni qidirmoqda. Ko'pincha, ular ishlab chiquvchilar tomonidan yaratilgan veb-loyiha shablonining dizayniga mos keladigan yoki ma'lum bir saytni boshqarish mexanizmi uchun plaginlar va modullar shaklida moslashtirilgan. Zamonaviy shablonlarni ko'rib chiqishga arziydi, kamdan-kam istisnolardan tashqari, biron bir mavzuni biron bir plagin slayderi yoki oddiy tasvir rotatorisiz bajara olmaydi. Shunday qilib, ko'plab veb-ishlab chiquvchilar o'zlarining arsenallarida shunga o'xshash narsaga ega bo'lishni va o'z saytlarida tasvirlarni samarali taqdim etish orqali o'z o'quvchilarini to'liq hayratda qoldirishni xohlashlari tushunarli.

Yaratishda paydo bo'layotgan yangi echimlarni ko'rib chiqishni davom ettirib, men jQuery sehridan foydalangan holda yaratilgan eng qiziqarli va samarali slayd-shou va foto galereyalarning to'liqroq to'plamini to'plashga qaror qildim.
Men sizni darhol ogohlantirmoqchimanki, ushbu sharhda muhokama qilingan manbalar asosan asoslanadi Ingliz tili, lekin menimcha, kimga kerak bo'lsa, buni intuitiv ravishda yoki o'nlab tiyinlar bo'lgan tarjimonlar yordamida aniqlaydi. Va agar siz etarlicha qidirsangiz, rus tilida ba'zi galereyalar va slayderlarni yaratish texnikasining tavsiflarini topishingiz mumkin, chunki bizning ko'plab veb-ishlab chiquvchilarimiz ma'lum bir loyiha ustida ishlash paytida avval o'zlari uchun tarjima qiladilar va keyin ularning barcha manipulyatsiyalarining batafsil tavsiflarini joylashtiradilar. bepul kirish uchun.
Misol uchun, men shunday qildim, yaratish mexanizmi ustida ishlaganimda, men birinchi navbatda burzhunetda o'zim uchun mos bo'lgan galereya variantini topdim, nima qilayotganimni yaxshiroq tushunish uchun uni tarjima qildim va kelajakda. Bu, umid qilishga jur'at etaman, Highslide skriptidan foydalanish haqida yomon maqola emas, turli xil ilovalardagi ish misollari bilan.
Shunday qilib, keraksiz qo'shiq so'zlari etarli, keling, to'g'ridan-to'g'ri ko'rib chiqishga o'tamiz, tomosha qilamiz, qisqacha tushuntirishlarni o'qamiz va qiziqarli rasm slayderlarini, foto galereyalarni, slayd-shoularni saytlaringizda amalga oshirish uchun juda ko'p yangi jQuery plaginlari va skriptlarini tanlang: bilan avtomatik va qo'lda o'zgartirish slayderlari, fon tasviri slayderlari, eskizli va eskizlarsiz va boshqalar. va h.k...

Of.Site | Namoyish

Slayd-shou elementlari, o'tish effektlari va bir nechta albom variantlari bilan to'liq, moslashtirilgan jQuery rasmlar galereyasi. Barcha zamonaviy ish stoli va mobil brauzerlar bilan mos keladi.

JQuery yordamida to'liq ekranli galereya yaratish bo'yicha o'quv qo'llanma. G'oya ko'rsatilgan narsani eskiz qilishdir to'liq ekranli tasvir strelkalar yoki sichqoncha tugmasi yordamida tasvirlar bo'ylab harakatlanayotganda aks ettirilgan holda yon tomonga ko'rsatiladi. Katta tasvirlar siz tanlagan o'tishga qarab slayd-shou uslubida yuqoriga yoki pastga siljiydi. Rasmni kattalashtirish, fonda tasvirni ko'rish imkoniyati to'liq ekran rejimi yoki sahifa hajmiga moslashtirilgan.

Parallaks slayder

Parallaks slayder Qo'lda boshqaruv elementlari bilan slayd-shou ko'rinishidagi tasvirlarni namoyish qilishni tashkil qilish uchun qiziqarli yechim. Eskiz rasmlarining asl joylashuvi e'tiborni tortadi. Rasmiy veb-saytda slayderni qanday integratsiya qilish va sozlash haqida to'liq ma'lumot mavjud.

JQuery bilan minimalistik slayd-shou galereyasi Rasmlarni avtomatik ravishda o'zgartirish uchun elementlarga ega ajoyib rasm galereyasi, shuningdek, eskizlar panjarasi bilan ochiladigan blokdan tasvirlarni ko'rsatish va tanlashni qo'lda boshqarish qobiliyati. Kamchiliklardan biri - to'liq o'lchamli tasvirlarni ko'rishning etishmasligi, ammo bu ushbu galereyaning minimalizmidir.

Bu to'liq ekranli slayd-shou bo'lib, tasvirlar avtomatik ravishda o'zgaradi, hech qanday hayratlanarli effektlar yo'q, hamma narsa sodda va mazali.

Minimal galereya Bu juda moslashtirilgan jQuery plaginidir, tasvirlarni ko'rsatishda o'tishlarning katta tanloviga ega. Minimit galereyasidan foydalanib, siz karusel, slayd-shou, oddiy rotator va oddiy tasvir aylantiruvchisi ko'rinishidagi tasvirlarni ko'rsatishni tashkil qilishingiz mumkin.

Bu kichik (2kb) jQuery plaginidir, u rasmlarni slayd-shou sifatida ko'rsatishning oddiy, bema'ni usulini ta'minlaydi.

Bu barcha kompyuterlar, iPhone va mobil qurilmalarda intuitiv boshqaruv va uzluksiz moslashuvga ega chiroyli ko‘rinishdagi JavaScript galereyasidir. O'rnatish va sozlash juda oson

Ko'pgina Javascript va jQuery tasvir slayderlaridan farqli o'laroq, Slider.js gibrid yechim bo'lib, u CSS3 o'tishlari va animatsiyalari bilan ta'minlangan.

Bu HTML5 va CSS3 da turli taqdimotlar yaratish uchun bir sahifali shablon.

Diapo slayd-shou - bu loyiha ochiq manba. Agar xohlasangiz, o'zgartirishlar yoki yaxshilanishlarni taklif qilishingiz mumkin. Siz uni bepul yuklab olishingiz va foydalanishingiz mumkin va hech narsa va hech kim sizni loyihalaringizda ushbu slayderdan foydalanishga to'sqinlik qilmaydi. Slayderni sozlash oson, taqdim etilgan tarkib o'rtasida qiziqarli o'tishlar mavjud va siz slayderga istalgan narsani joylashtirishingiz mumkin, u juda tez ishlaydi, hech qanday tiqilinchsiz.

veb-saytlar va boshqa veb-loyihalarda slayd-shou yaratish uchun boshqa vositadan boshqa narsa emas. Barcha zamonaviy brauzerlarni, gorizontal va vertikal animatsiyalarni, maxsus o'tishlarni qo'llab-quvvatlash, qayta qo'ng'iroq qilish API va boshqalarni qo'llab-quvvatlaydi. Slaydlaringizda istalgan HTML elementlaridan foydalanishingiz mumkin, u tushunarli va yangi boshlanuvchilar uchun ochiq va butunlay bepul tarqatiladi.

Agile rivojlantirish uchun JavaScript slayd-shou

Ushbu ajoyib jQuery plagini bilan slayd-shoularingizni amalga oshiring. O'zingizning talablaringizga muvofiq kontent taqdimotingizni yaratishingiz uchun juda moslashtirilgan vosita. Tashqi ma'lumotlar yoki CMS ma'lumotlari bilan osonroq integratsiyani ta'minlash uchun . Bu yangi versiya va noldan yozilgan. Ishlab chiquvchilar o'zlarining aqllari bilan ishlashning butun jarayonini juda aniq va tushunarli tasvirlashga harakat qilishdi.

tartibsiz roʻyxatlarni jozibali animatsiya effektlari bilan slayd-shoularga aylantirish imkonini beruvchi jQuery plaginidir. Slayd-shouda siz raqamlar yoki eskizlar yordamida yoki Oldingi va Keyingi tugmalari yordamida slaydlar ro'yxatini ko'rsatishingiz mumkin. Slayderda ko'plab original animatsiya turlari mavjud, jumladan kub (turli xil kichik turlar bilan), quvur, blok va boshqalar.

Veb-loyihalaringizdagi har xil tarkibdagi barcha turdagi taqdimotlarni tashkil qilish uchun to'liq vositalar to'plami. Burjua yigitlari jQuery sehridan foydalangan holda deyarli barcha turdagi slayderlar va galereyalarni o'z ichiga olgan holda qo'llaridan kelganini qilishdi. Surat slayderi, foto galereyasi, dinamik slayd-shou, karusel, kontent slayderi, yorliqlar menyusi va boshqa ko'p narsalar, umuman olganda, bizning cheksiz tasavvurimiz uchun joy bor.

Bu soddalikni hisobga olgan holda yaratilgan jQuery slayd-shou plaginidir. Yangi boshlanuvchilar va ilg'or ishlab chiquvchilar uchun faqat eng foydali funktsiyalar to'plami to'plangan bo'lib, ular oddiy, ammo ayni paytda foydalanuvchilarga qulay bo'lgan juda samarali slayd-shoularni yaratish imkoniyatini beradi.

— jQuery-da qurilgan oddiy slayder, har tomonlama sodda, maxsus ko'nikmalarni talab qilmaydi, menimcha, ko'pchilik uni o'z veb-saytlarida slayd-shoularni amalga oshirish uchun foydali deb topadi. Plagin barcha zamonaviy brauzerlarda, shu jumladan sekin IE brauzerida sinovdan o'tkazildi.

jbgallery jQuery kutubxonasining javaskriptida yozilgan foydalanuvchi interfeysi vidjetining bir turi. Uning vazifasi to'liq ekran rejimida saytning fonida bitta katta rasmni, slayder ko'rinishidagi bir nechta tasvirni ko'rsatishdir. Barcha ko'rish rejimlarida ko'rish boshqaruvlari mavjud. Bu o'ziga xos tarzda qiziqarli yechim va ba'zi hollarda u hatto standart emas.

Oson jQuery yordamida rasmlarni slayd-shou ko'rinishida tasvirlar orasidagi o'tish effektlari bilan ko'rsatish uchun plagin (biz qiziqroqlarini ko'rdik). jqFancyTransitions mos keladi va Safari 2+ bilan keng ko'lamda sinovdan o'tgan. Internet Explorer 6+, Firefox 2+, Gugl xrom 3+, Opera 9+.

Lightbox shaklida tasvirlar va boshqa ma'lumotlarni ko'rish uchun bepul tarqatiladigan jQuery plaginidir. Boshqaruv elementlari, soyali fon va shularning barchasi bilan qalqib chiquvchi oyna, sodda va mazali.

Lightbox seriyasidagi yana bir jQuery plagini, garchi u juda oz og'irlikka ega bo'lsa ham (9 KB), lekin juda ko'p funksiyalarga ega. CSS yordamida har doim yaxshilashingiz yoki sozlashingiz mumkin bo'lgan yaxshi ishlab chiqilgan interfeys mavjud.

Nomidan ma'lum bo'lishicha, hech qanday ajoyib narsa yo'q, bizda boshqaruv elementlari butunlay yo'q bo'lgan juda oddiy avtomatik tasvir aylantiruvchisi bor. Kim biladi, ehtimol bu slayder o'zining minimalizmi bilan sizning e'tiboringizni jalb qiladi.

Tasvir rotatori bilan har xil turlari o'tishlar. dagi kabi ishlaydi avtomatik rejim, va bosish orqali sozlash juda oson.

- shunchaki slayder emas, balki to'liq huquqli tasvirlar galereyasi. Eskizlarni oldindan ko'rish va o'tish effektlarini tanlash qobiliyati, barcha brauzerlarni to'liq qo'llab-quvvatlash, veb-loyihaga integratsiyalashuvning batafsil tavsifi va bepul tarqatish.

Bu scriptaculous/prototype yoki jQuery yordamida foydalanishga tayyor slayd-shoularni amalga oshirishdir. Horinaja biroz innovatsion yechim hisoblanadi, chunki u slayderga joylashtirilgan tarkibni aylantirish uchun g'ildirakdan foydalanish imkonini beradi. Sichqoncha ko'rsatkichi slayd-shou maydonidan tashqarida bo'lsa, aylantirish avtomatik ravishda amalga oshiriladi; kursor slayd-shou ustiga qo'yilganda, aylantirish to'xtaydi.

Bu ko'rishni boshqarish vositalariga ega bo'lsa-da, bir qator oddiy tasvirni aylantiruvchi xususiyatdir va shuning uchun ham avtomatik, ham qo'lda rejimlarda ishlaydi.

s3Slider tartibsiz rasmlar roʻyxatidan slayd-shou yaratuvchi jQuery plagini boʻlib, uni istalgan veb-platformada osongina amalga oshirish mumkin.

Bu saqlash paytida katta hajmdagi fotosuratlarni qayta ishlash uchun optimallashtirilgan jQuery plaginidir tarmoqli kengligi.

Vegas fon

Vegas Background jQuery plagini sizga veb-sahifalarga slayd-shou elementlari bilan chiroyli to'liq ekranli fon rasmlarini qo'shish imkonini beradi. Agar siz plagin bilan ishlashning nozik tomonlarini diqqat bilan o'rgansangiz, ko'plab qiziqarli echimlarni topishingiz mumkin, albatta, agar kerak bo'lsa.

— slayder sifatidagi slayder, ko'p emas, kam emas, tasvirlar yoki maqolalar e'lonlari uchun taglavhalar va oddiy boshqaruv elementlari bilan tasodifiy.

tasvirni ko'rishni tashkil qilish uchun engil (taxminan 5 KB) javascript. Katta tasvirlarning avtomatik o'lchamini o'zgartirish va masshtablash brauzer oynasida tasvirni to'liq hajmda ko'rish imkonini beradi

PikaChoose jQuery Rasmlar galereyasining 4-versiyasi mavjud! Pikachoose - bu ajoyib xususiyatlarga ega engil jQuery slayd-shou! Fancybox bilan integratsiya, ajoyib mavzular (bepul bo'lmasa ham) va boshqa ko'p narsalarni plagin ishlab chiquvchilari sizning e'tiboringizga taqdim etadi.

Ro'yxatingizdagi tasvirlar sonini tekshiradi va raqamli navigatsiya sifatida dinamik ravishda foto havolalar to'plamini yaratadi. Bundan tashqari, har bir rasmni bosish oldinga yoki orqaga siljiydi, shuningdek, siz rasmni bosgan joyingizga qarab rasmlarni aylanib chiqishingiz mumkin (masalan: rasmning chap tomoniga bosish slaydlarni oldinga va orqaga siljitadi, mos ravishda rasmning o'ng tomoni uchun).

Har qanday WordPress shabloniga juda mos keladigan boshqa jQuery slayderi.

"Nivo" ning yana bir ishlanmasi, ushbu studiyadagi yigitlar bajaradigan barcha narsalar kabi, plagin yuqori sifat bilan yaratilgan, 16 ta noyob o'tish effektlari, klaviatura navigatsiyasi va boshqalarni o'z ichiga oladi. Ushbu versiyada to'g'ridan-to'g'ri WordPress uchun maxsus plagin mavjud. Shunday qilib, ushbu bloglash mexanizmining barcha muxlislari uchun Nivo Slider sizga mos keladi.

jQuery plagini, bu sizga tezda istalgan o'lchamdagi tasvirlar uchun oddiy, samarali va chiroyli slayder yaratish imkonini beradi.

Pirobox engil jQuery "lightbox" skripti bo'lib, ko'rish barcha boshqaruv elementlari bilan avtomatik ravishda tasvir o'lchamiga moslashtiriladigan qalqib chiquvchi blokda amalga oshiriladi.

Ushbu galereya yaratuvchilari rasmlarning juda original taqdimotini taklif qilishadi. Tasvirlar miniatyuralarda to'lqin ko'rinishida ko'rsatiladi, eskiz ustiga bosganingizda biz rasmning o'rta o'lchamdagi versiyasini ko'ramiz, ikkinchi marta bosing va siz katta rasmni ko'rasiz. Siz buni tajriba deb hisoblashingiz mumkin, ammo tan olishingiz kerakki, yangi va g'ayrioddiy narsa har doim qiziqarli.

HTML5 va jQuery bilan to'liq ekranli slayd-shou

Slayd-shoularni yaratish va rasmlarni to'liq ekran rejimida ko'rsatish uchun ishlab chiquvchilar allaqachon tanish bo'lgan Vegas jQuery plaginidan foydalanganlar, unda ilgari guruh maqolalarida batafsil tavsiflangan ko'plab g'oyalar va usullar mavjud. HTML5 audio elementlarining mavjudligi va tasvirlar orasidagi o'tish uslubi jozibali.

Codrops jamoasining yana bir ishlanmasi, to'liq va funktsional tasvirlar galereyasi, lekin uni tasvirlashning ma'nosi yo'q, uni ko'rishingiz kerak.

Rasm slayd-shou, rasmlar ko'z o'ngingizda yo'qoladi, effekt shunchaki ajoyib.

Bu jQuery kutubxonasi ustiga qurilgan JavaScript tasvir galereyasi ramkasidir. Maqsad veb va mobil qurilmalar uchun professional tasvirlar galereyasini ishlab chiqish jarayonini soddalashtirishdir. Siz uni qalqib chiquvchi oynada yoki to'liq ekran rejimida ko'rishingiz mumkin.

Biz jimgina ko'nikishni boshlaymiz va Codrops jamoasidan yangi asarlarni kutamiz. Rasmlarni toʻliq ekran rejimida koʻrish uchun ajoyib 3D oʻtish effektiga ega ajoyib tasvir slayderini oling.

Slayd-shou tashkilotchisi seriyasidan yana bir WordPress plagini. Deyarli har qanday dizaynga osongina qo'shiladi va tajribali foydalanuvchilar va tajribasiz foydalanuvchilar uchun ko'plab sozlash variantlarini taklif etadi.

WordPress uchun yozilgan yana bir plagin, bu sizning bloglaringizdagi rasmlar yoki boshqa kontentning slayd-shousini tashkil qilishni ancha osonlashtiradi.

WordPress-ga integratsiya qilish uchun yaxshi slayd-shou plagini. Xili-floom-slideshow avtomatik ravishda o'rnatiladi va shaxsiy sozlamalarga ham ruxsat beriladi.

Slimbox2 Lightbox effekti bilan tasvirlarni ko'rsatish uchun yaxshi o'rnatilgan WordPress plaginidir. Brauzer oynasida avtomatik slayd-shou va tasvirlarning o'lchamini o'zgartirishni qo'llab-quvvatlaydi. Va umuman olganda, ushbu plagin ushbu seriyadagi boshqa plaginlarga nisbatan juda ko'p afzalliklarga ega.

Ushbu plagin/vidjet WordPress dvigatelida ishlaydigan veb-saytingiz yoki blogingiz uchun dinamik, boshqariladigan slayd-shou va taqdimotlar yaratish imkonini beradi.

Ushbu WordPress plagini o'rnatilgan galereya rasmlarini oddiy va moslashuvchan slayd-shouga aylantiradi. Plagin FlexSlider jQuery tasvir slayderidan va foydalanuvchining shaxsiy sozlamalaridan foydalanadi.

- Bu WordPress plagin sof Javascript yordamida SmugMug, Flickr, MobileMe, Picasa yoki Photobucket RSS tasmalaridan rasmlar, rasmlar, ishlar va displeylar slayd-shousini tashkil qilish.

WordPress uchun oddiy slayder va boshqalar. Ortiqcha yoki og'ir narsa yo'q, ish minimalist uslubda amalga oshiriladi, barqarorlik va tezlikka urg'u beriladi, u blogni boshqarish mexanizmiga mukammal darajada ulanadi.

Menimcha, Skitter WordPress bilan ishlashni qo'llab-quvvatlaydigan eng yaxshi slayderlardan biridir. Meni barqarorlik va ishlash tezligi, unchalik ko'zga ko'rinmas boshqaruv elementlari, o'tish effektlari va mavzuga juda oddiy ulanish o'ziga jalb qiladi.

WordPress uchun plagin boʻlib, uning yordamida veb-saytingizda rasmlar galereyasini slayd-shou rejimida koʻrish imkoniyati bilan osongina va tezda tashkil qilishingiz mumkin. Displey avtomatik yoki tasvirlar uchun eskizlar va sarlavhalar namoyishi bilan to'liq boshqarilishi mumkin.

Of.Site | Namoyish

Post/sahifa uchun barcha rasmlarni slayd-shou sifatida ko'rsatadi. Oson o'rnatish. Ushbu plagin talab qiladi Adobe Flash o'tish animatsiyasi bo'lgan versiya uchun, agar Flash topilmasa, slayder normal rejimda ishlaydi.

WordPress uchun yana bir oddiy slayder, u postlar va maqolalarning qisqa e'lonlari uchun rasmlarni ko'rsatadi. Men vaqti-vaqti bilan ushbu blogda shunday plagindan foydalanaman.

Meteor Slides - bu jQuery WordPress slayderi bo'lib, yigirmadan ortiq o'tish uslublarini tanlash mumkin. Muallif plaginni "meteor" deb atagan bo'lsa kerak, bu ish tezligini anglatadi; ehtimol men meteorik hech narsani sezmaganman.

oQey Gallery - bu WordPress uchun slayd-shou elementlariga ega, o'rnatilgan video va musiqa imkoniyatlariga ega to'liq huquqli tasvirlar galereyasi.

Bu veb-saytlar va bloglarda tasvir va videolarni ko'rish uchun flesh-animatsiya elementlariga ega slayd-shou. Siz ushbu slayderni istalgan veb-saytga, istalgan hajmda va o'zingiz yoqtirgan kontent bilan joylashtirishingiz mumkin.

Flash Gallery plagini sizning oddiy galereyalaringizni ajoyib tasvir devorlariga aylantiradi, har bir post uchun bir nechta albomlar, to'liq ekranda ko'rish va slayd-shou rejimini qo'llab-quvvatlaydi.

WOW Slider - bu WordPress uchun jQuery tasvir slayderi vizual effektlar(Burst, Fly, Blinds, Squares, Fragments, Basic, Fade, Stack, Vertical Stack va Lineer) va professional tarzda ishlab chiqilgan andozalar.

Promotion Slider — это jQuery плагин, с помощью которого легко забабахать простое слайд-шоу, или осуществить несколько зон вращающихся объявлений на странице, потому как это высоко настраиваемый инструмент, вы будете иметь полный контроль над тем, что показываете в слайдере, и над работой модуля umuman.

| Namoyish

2.4-versiyadagi yangilik: WordPress muharriri orqali to‘g‘ridan-to‘g‘ri sudrab-n-tomchi suratlarni saralashni qo‘llab-quvvatlash, shuningdek, asosiy rasmlarga fotosurat havolalarini qo‘shish imkoniyati. (IE8-da ba'zi xatolar bo'lishi mumkin, barcha asosiy brauzerlarda yaxshi ishlaydi. Mualliflar kelajakda IE8-ni to'liq qo'llab-quvvatlashga va'da berishadi.)

| Namoyish

Ushbu sharhning yakuniy akkordi WordPress uchun ushbu plagin, tasvirlarni tanlash va o'zgartirish uchun qiziqarli vizual effektlarga ega yana bir slayder bo'ladi.

Men yuqorida tavsiflangan hamma narsani ko'rib chiqaman va hayratda qoldim, bu odamlarning qanday hayratlanarli parvozi bor, lekin bu har xil veb-ishlab chiquvchilar so'nggi paytlarda veb-loyihalarda tasvirlarni tashkil qilish mavzusida o'ylab topgan narsa emas. Galereyalar va slayd-shoularni yaratish uchun bunday ajoyib echimlarni endi amalga oshirish mumkinligi juda yaxshi.
Men jimgina umid qilamanki, ushbu to'plamda siz o'zingiz uchun qiziqarli narsalarni topasiz, o'zingizning noyob galereyangizni yoki slayderingizni yaratasiz, foydalanuvchilaringizni va, albatta, sizning sevimli odamingizni xursand qilasiz va busiz biz qayerda bo'lardik...

Dmitriy Semenov tomonidan
jQuery tasvir galereyasi va kontent slayderi plaginidir. Bu butunlay sezgir, teginish uchun qulay va modulli arxitekturaga ega, bu sizga faqat fayl hajmi va ishlashini optimallashtirish uchun kerak bo'lgan xususiyatlarni kiritish imkonini beradi.

Andy - The Coffeescripter tomonidan
JQuery uchun juda moslashtirilgan galereya/vitrin plagini.

Trent tomonidan
Galleriffic - bu jQuery plagini bo'lib, u o'tkazish qobiliyatini tejash va katta hajmdagi fotosuratlarni qayta ishlash uchun optimallashtirilgan boy, orqadan keyin bepul tajribani ta'minlaydi.

Tonik galereyasi - jQuery XML portfolio galereyasi | $6

Aino tomonidan
Galleria - jQuery kutubxonasi ustiga qurilgan JavaScript tasvir galereyasi ramkasi. Maqsad veb va mobil qurilmalar uchun professional tasvir galereyalarini yaratish jarayonini soddalashtirishdir.

CatchMyFame tomonidan
Boshqa kuni men jQuery yordamida sahifadagi rasmlar to'plamini o'chirishning oddiy usulini qidirdim. Shunday qilib, koder sifatida men o'z plaginimni yaratishga kirishdim.

Tomas Kan tomonidan
Smooth Div Scroll - jQuery plaginidir, u tarkibni gorizontal ravishda chapga yoki o'ngga aylantiradi. JQuery uchun yozilgan boshqa ko'plab aylantirish plaginlaridan tashqari, Smooth Div Scroll aylantirishni aniq qadamlar bilan cheklamaydi.

Viktor Zambrano tomonidan - frwrd.net
Minishowcase kichik va oddiy php/javascript onlayn foto galereyasi boʻlib, AJAX tomonidan taʼminlangan boʻlib, u sizga murakkab maʼlumotlar bazalarisiz yoki kodlashsiz rasmlaringizni osongina onlayn koʻrsatish imkonini beradi va bir necha daqiqada ishlayotgan galereyaga ega boʻlish imkonini beradi.

Kaspar Devid Fridrix tomonidan
EOGallery - jQuery yordamida yaratilgan veb-animatsiyali slayd-shou galereyasi. Kattaroq rasmlarni ko'rsatish uchun u faqat jQuery-ning asosiy funktsiyalari va Cody Lindley's Thickbox-dan foydalanadi.

Arnault Pachot tomonidan
JQuery uchun ko'p formatli karusel, bir nechta ommaviy axborot vositalarini qo'llab-quvvatlaydigan to'siqsiz va kirish mumkin portfel: fotosuratlar, video (flv), audio (mp3). JQuery uchun ushbu plagin avtomatik ravishda har bir media kengaytmasini aniqlaydi va moslashtirilgan pleerni qo'llaydi.

Devor – Media galereyasi – jQuery quvvatli | $5

Stefan Petre tomonidan
Kosmik effektli yana bir rasm galereyasi plagini, juda engil va oddiy plagin.

Moreno Di Domeniko tomonidan
jmFullWall - bu ta'sirchan portfel yaratish uchun jQuery plaginidir.

Fabritsio Kalderan tomonidan
Mosaiqy - Opera 9+, Firefox 3.6+, Safari 3.2+, Chrome va IE7+ da ishlaydigan fotosuratlarni ko'rish va kattalashtirish uchun jQuery plaginidir. Rasmlar JSON/JSONP maʼlumotlar tuzilmasidan olinadi va tasodifiy tarmoq ichida koʻchiriladi. Barcha qimmat animatsiyalar sizning GPU tomonidan so'nggi brauzerlarda CSS3 o'tishlari yordamida qabul qilinadi, bu esa protsessorning ortiqcha sarfini kamaytiradi.

Cody tomonidan
Quyidagi jQuery plagini tasvirlar to'plamini bir nechta variantli kichik galereyaga aylantiradi. Mikro tasvirlar galereyasi rasmlarni eskiz sifatida oldindan ko'rishni va faqat bitta rasmni ko'rsatadigan bitta ko'rinishni ko'rsatadigan panjara ko'rinishini almashtirish imkonini beradi.

VION – jQuery rasmlar galereyasi plagini | $7

Malihu tomonidan
JQuery ramkasi va bir nechta oddiy CSS yordamida yaratilgan oddiy, ammo oqlangan to'liq ekranli tasvirlar galereyasi.

Rasm galereyalari va slayderlar jQuery-ning eng mashhur 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 qatori).

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

1. Bootstrap Slider

Bootstrap Slider - bepul, optimallashtirilgan mobil qurilmalar Tegish va surish bilan 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 ish stoli uchun ishlaydigan sezgir jQuery galereya plaginidir. mobil brauzerlar. U turli xil navigatsiya variantlarini taklif etadi: 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 matn paydo bo'ladi, bosganingizda oyna to'liq ekranga kengayadi.

7. Sürgülü panellar shabloni

Ushbu plagin portfel uchun ideal. U gorizontal ravishda joylashtirilgan tasvirlar bloklarini yaratadi (vertikal kichik ekranlar) tanlangan kontent bog'langan bo'ladi.

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 saytga mos keladi. U foydalanuvchilarni engil parallaks effekti va sekin matn ko'rinishi bilan quvontiradi.