Bootstrap - Rasmlar galereyasini yaratish. Moslashuvchan tartib, uchinchi dars

BlocksIt - bu dinamik belgilash panjarasini yaratishga imkon beruvchi plagin. U HTML elementlarini "bloklarga" aylantirishni boshqaradi va ularni sahifalar tarmog'ida tartibga soladi. Buni amalga oshirish uchun ustunlar sonini ko'rsatish kifoya, qolganini plagin bajaradi. Bundan tashqari, siz hatto "bloklarni" birlashtirib, bitta kattaroq qilishingiz mumkin.

BlocksIt.js mutlaq joylashishni aniqlash yordamida tanlangan elementlarning o‘rnini o‘zgartiradi. U muayyan mezonlar asosida elementning yuqori va chap pozitsiyasini hisoblab chiqadi:

Chapdan o'ngga yangi blokni boshlang va
Eng qisqa blok ostiga yangi blok qo'ying.

Foydalanish uchun jQuery kutubxonasi va plagin skriptini ulashingiz kerak:

Keyin jQuery obyektidagi .BlocksIt() funksiyasini chaqiramiz. Bir nechta sozlamalar mumkin. $(hujjat).ready(function() ( $("#objectID").BlocksIt(); )); Va tamom.
Agar bloklar mavjud bo'lsa elementlar, .BlocksIt() ga qo'ng'iroq qilishdan oldin ularning o'lchamiga ishonch hosil qiling va tasvirlar allaqachon yuklanganligiga ishonch hosil qiling. Buni amalga oshirish uchun DOM-ga hamma narsa yuklanganligiga ishonch hosil qilish uchun $(window).load() dan foydalanishingiz yoki tasvirlar holatini tekshirish uchun waitForImages-ga o'xshash plagindan foydalanishingiz mumkin.

Variantlar

Plaginni chaqirganda siz bir nechta qo'shimcha parametrlarni belgilashingiz mumkin:

numOfCol:
Turi: Int Standart: 5
Yaratiladigan ustunlar soni.

ofsetX:
Turi: Int Standart: 5
Har bir blok uchun chap va o'ng to'ldirish.

ofsetY:
Turi: Int Standart: 5
Har bir blok uchun yuqori va pastki chegara.

blok elementi:
Turi: String Standart: 'div'
Bloklarga aylantiriladigan bola element.

HTML

Belgilash misoli:

... ... ... ... ... Data-size atributi blok hajmini bildiradi (bloklar birikmasi uchun).
Va chaqiruv skripti shunday ko'rinishi mumkin: $(document).ready(function() ( $("#container").BlocksIt(( numOfCol: 5, ofsetX: 8, ofsetY: 8, blockElement: ".grid" ) );

Ushbu qo'llanmada biz plitkali panjara yordamida portfel sahifasi tartibini yaratishni ko'rib chiqamiz. Mesh yaratish uchun kutubxonalar va Deyv DeSandro ishlatiladi. Namoyishda ko'rsatilgan rasmlar Unsplash.com saytidan olingan.

Masonlik - ustunga asoslangan panjara. Float o'rash yordamida yaratilgan panjaradan farqli o'laroq, Masonry panjarasi qat'iy satr balandligiga ega emas, bu veb-sahifa ichidagi bo'sh joydan optimal foydalanishni ta'minlaydi va keraksiz bo'sh joyni kamaytiradi. Ushbu panjara portfel sahifalari, rasm galereyasi bo'lgan sahifalar va blog postlari bo'lgan sahifalar uchun mos keladi.

1. Meta teglar va bo'lim

Duvarcılık galereyasi

2. Sahifa sarlavhasi

Sahifa sarlavhasi - bo'limda quyidagi konteyner elementlari mavjud:
- logotip;
- Asosiy menyu

Xelen Parker shaxsiy fotograf

Sahifaning asosiy qismi fotosuratlar bilan bloklardan iborat bo'lib, ular uchun kulrang rang filtri o'rnatilgan bo'lib, ularga qora va oq fotosuratlar effektini beradi. Agar kursorni o'rnatsangiz, bu effekt yo'qoladi.

Altbilgida mualliflik huquqi haqidagi ma'lumotlar va ijtimoiy tarmoqlarga havolalar mavjud.

To'liq ishlash uchun siz quyidagi skriptlarni ulashingiz kerak:

To'r tasvirlarini joylashtirish bilan bog'liq muammo tasvirlar yuklangan plagin yordamida hal qilinadi. U tasvir qachon yuklanganligini aniqlaydi va keyin Masonry panjarasini yaratadi.

Bunday komponent veb-sayt dizaynida fon yoki dekorativ element sifatida juda mos kelishi mumkin, chunki biz rasmlarni ko'rsatish va ularga tasodifiy o'tishlarni qo'llash imkoniyatiga egamiz.

Biz quyidagi qo'shimcha jQuery plaginlaridan foydalanamiz:

*ko'pchilik CSS o'tishlari uchun
* mos keladigan CSS parametrlari uchun brauzerni qo'llab-quvvatlashni tekshirish

Ushbu qo'llanmadagi chiroyli rasmlar Sherman Geronimo-Tan () tomonidan yaratilgan va Creative Commons Attribution 2.0 Umumiy litsenziyasi (CC BY 2.0) ostida tarqatilgan.

HTML strukturasi langar elementlari va rasmlari bilan oddiy tartibsiz ro'yxatni o'z ichiga oladi:

$("#ri-grid").gridrotator();

});
Boshqa kerakli skriptlarni qo'shishni unutmang.

Variantlar

// qatorlar soni
qatorlar: 4,

// ustunlar soni
ustunlar: 10,

// turli ekran kengliklari uchun qatorlar/ustunlar
//ya'ni w768 768 pikseldan kichik ekranlar uchun
w1024: (
qatorlar: 3,
ustunlar: 8
},

w768: (
qatorlar: 3,
ustunlar: 7
},

w480: (
qatorlar: 3,
ustunlar: 5
},

w320: (
qatorlar: 2,
ustunlar: 4
},

w240: (
qatorlar: 2,
ustunlar: 3
},

// qadam: bir vaqtning o'zida almashtiriladigan elementlar soni
// tasodifiy ||
// eslatma: ishlash bilan bog'liq muammolar uchun raqam > options.maxStep bo'lmasligi kerak
qadam: "tasodifiy",
maksimal qadam: 3,

// foydalanuvchining elementlarni bosishini oldini olish
preventClick: rost,

// animatsiya turi
// ko'rsatishYashirish || fadeInOut || slideLeft ||
// slideRight || slideTop || slideBottom ||
// rotateLeft || rotateRight || rotateTop ||
// rotateBottom || masshtab || rotate3d ||
// rotateLeftScale || rotateRightScale ||
// rotateTopScale || rotateBottomScale || tasodifiy
animType: "tasodifiy",

// animatsiya tezligi
animatsiya tezligi: 500,

// animatsiyani yumshatish
animEasingOut: "chiziqli",
animEasingIn: "chiziqli",

// element(lar) har 3 soniyada almashtiriladi
// Eslatma: ishlash muammolari uchun vaqt "bo'lishi mumkin emas"< 300 ms
interval: 3000
To'r o'lchamini aniqlayotganda, siz ro'yxatga qo'yganingizdan ko'ra, panjarada kamroq tasvirga ega bo'lishingizni hisobga olishingiz kerak. Aytaylik, ro'yxatda sizda 50 ta rasm bo'ladi va 5 ta ustun va 4 qatorni aniqlaysiz. Shunday qilib, biz 20 ta rasm va qolgan 30 ta rasmga o'tish imkoniyatiga ega bo'lgan panjara olamiz.

Ushbu demolarni uch xil konfiguratsiya bilan tekshiring:

* : Tasodifiy animatsiyalar / 55% konteyner kengligi / kalitlar orasidagi 3 soniya

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.

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.

Sichqoncha kursorini uning ustiga olib borganingizda tasvir kattalashadi.

Professional jQuery galereyasi 2011 yil.

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

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.

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

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.

Plagin avtomatik ravishda jildni skanerlaydi va rasmlarning kichik nusxalarini yaratadi.

Sichqonchani eskiz ustiga olib borishda qiziqarli effekt.

Yaqinda men to'liq ekranli galereyalarni yaratish uchun ushbu jQuery yechimini aytib o'tdim. Bugun men sizni ushbu professional plaginning so'nggi versiyasi bilan tanishtirmoqchiman. 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.

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.

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

JQuery yordamida rasm galereyasi plagini.

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

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

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

Qiziqarli hover effekti.

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.

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

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.

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.

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.

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

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

Eskizlar bilan jQuery galereyasi.

Eskizlar bilan slayd-shou.

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.

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

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

Xuddi shu galereyaga misol, lekin Bootstrap 3 ramkasida yaratilgan:

Biz Gridify plaginiga asoslangan rasm galereyasining ikkinchi versiyasini yaratamiz. Ushbu plagin Pinterest kabi tasvirlar panjarasini yaratish uchun mo'ljallangan.

Ushbu galereyani yaratish jarayonini quyidagi bosqichlarda taqdim etamiz:

Eslatma: gridify.js plaginining bir nechta ilovalari mavjud. Ushbu loyihada biz jQuery kutubxonasiga asoslanganini tanlaymiz.

$(funksiya () ( var options = ( srcNode: "img", // panjara elementlari (sinf, tugun) chegarasi: "15px", // piksel kengligidagi chekka: "240px", // panjara elementi kengligi pikselning max_width : "", // dinamik kamar elementi kengligi o'lchamlarini o'zgartirish: rost, // agar oyna o'lchamini o'zgartirish: "barchasi 0,5s osonlikcha" // CSS3 uchun o'tishni qo'llab-quvvatlash ));

2. Galereya uchun HTML kod yaratish:

...

Biz fancyBox-dan foydalanib, oldingi misoldagi kabi galereya tasvirini ko'rib chiqamiz.

Bootstrap 4 uchun Pinterestga o'xshash rasm galereyasining yakuniy kodi:

Bootstrap 4 - gridify.js img (to‘ldirish: 4px; fon rangi: #fff; chegara: 1px qattiq #ddd; chegara radiusi: 4px; ) img: hover ( shaffoflik: 0,6; filtr: alfa) yordamida sezgir tasvirlar galereyasini yaratish (shaffoflik=60); ... $(function() ( var options = ( srcNode: "img", // grid elementi chegarasi: "15px", // piksel kengligidagi chekka: "240px", // grid elementi kengligi piksel max_width: " ", // dinamik kamar elementi kengligi oʻlchami oʻzgartirilishi mumkin: rost, // agar oyna oʻlchamini oʻzgartirishga oʻtishni oʻzgartirish: “barcha 0.5s oson” // CSS3 uchun oʻtishni qoʻllab-quvvatlash ); $(".grid").gridify(options); ) );

Bootstrap 3 da xuddi shu galereyaga misol.