Mahsulot sahifasida Modx tasvir karuseli. katta va qo'rqinchli

Salom hamjamiyat!

Ushbu eslatmada siz Ko'p shakl jadvallari nima ekanligini va boshqa ma'lumotlar to'plami bilan konfiguratsiyani qanday yaratishni bilib olasiz. Va, albatta, biz siz bilan har xil turdagi slaydlarga ega bo'lgan slayderni yaratamiz va oxirida siz juda ko'p narsalarni topasiz. qiziqarli hikoya bu men uzoq vaqt davomida hech kimga aytishga jur'at eta olmadim (agar, albatta, sizni qiziqtirmasa, lekin voqea qiziq - menga ishoning). Shunday qilib, slaydlarga misollar:

• Fon rasmi
• Video fon
• tekis rangli fon

Diqqat! Bu safar bolalar va homilador ayollarni ekranlardan olib tashlamang, chunki bu yosh va jinsga qarab qandaydir kamsitishdir!

Shunday bo'ladi

Yana bir e'lon! Men o'zimni takrorlamaslik uchun birinchi darsga tez-tez murojaat qilaman, shuning uchun men sizga tanishib chiqishingizni tavsiya qilaman.

Nima uchun?

Keling, tasavvur qilaylik: Siz, masalan, asosiy sahifada bir nechta turdagi slaydlarga ega slayder mavjud bo'lgan loyihaga ega bo'lasiz, birida video fon, boshqasida rasm va uchinchisida, masalan, tekis rang mavjud. Siz bitta maydonlar to'plamini (bitta konfiguratsiya) yaratmaysiz va bu maydonlarning barchasini (leksikon uchun uzr) unga kiritmaysiz va menejerga u bilan qanday yashashni va qanday bo'lishni aytasiz. U emas jiddiy munosabat!? (Umid qilamanki, kimdir tushunadi)

Sababi uchun

Biz siz bilan "nima uchun" ni tushundik, endi "qanday" ni bilib olaylik. Agar siz birinchi darsni o'qigan bo'lsangiz, MIGX komponentlar sahifasiga o'tishimiz va 3 ta konfiguratsiyani yaratishimiz kerak. Jako tomonidan ColorPicker-ni oldindan o'rnating (lekin bu muhim emas):

Men ko'rsatmagan hamma narsani o'tkazib yuboring!

qattiq konfiguratsiya (bitta rang)

• tab Sozlamalar
  • Ism- qattiq
  • Yangi turkum qo'shing- Slayder
• tab Forma varaqlari
  • Maydonlar Maydonlar 3 ta maydon yarating
    1. Fon rangi:
       • maydon nomi-bgcolor
       • Sarlavha- Fon rangini tanlang
       • Televizor turini kiritish- ColorPicker (yoki siz
         foydalanish)
    2. Sarlavha:
       • maydon nomi sarlavha
       • Sarlavha- Slayd sarlavhasi
    3. Tavsif:
       • maydon nomi- tavsif
       • Sarlavha- Slaydning tavsifi
       • Televizor turini kiritish- matn maydoni
  • Bir nechta forma varaqlari maydoni-turi( Berilgan qiymat ichida kalitning nomi bo'ladi
    chiqish massivi. Standart: MIGX_formname)
  • - Fonda bir tekis rang bilan (Matn
    bu konfiguratsiya tanlov ro'yxatida)
  • - qattiq (Bir xil turdagi maydonning qiymati
    massivda)

video konfiguratsiyasi

• tab Sozlamalar
  • Ism- video
  • Turkum- Slayder
• tab Forma varaqlari
  • Maydonlar- 1 ta yorliq va maydonda yarating Maydonlar yana 3 ta maydon yaratamiz, bu maydonlarning faqat bittasi boshqa turdagi.

    Bu erda aniqlik kiritishim kerakki, turli xil konfiguratsiyalardagi maydonlar soni va ularning turlari sizning tasavvuringiz cheklangani kabi har xil bo'lishi mumkin ... Lekin men hamma narsa sizning fantaziyalaringizga mos kelishini bilamanmi?

    1. Video (masalan, fayl):
       • maydon nomi- video
       • Sarlavha- Video yuklash
       • Televizor turini kiritish- fayl
    2. Sarlavha:
       • maydon nomi sarlavha
       • Sarlavha- Slayd sarlavhasi
    3. Tavsif:
       • maydon nomi- tavsif
       • Sarlavha- Slaydning tavsifi
       • Televizor turini kiritish- matn maydoni
  • Bir nechta forma varaqlari maydoni- turi
  • Bir nechta format varaqlari opsiya matni- Orqa fonda video bilan
  • Bir nechta Formtabs Optionsvalue- video

slayder konfiguratsiyasi

Odatiy bo'lib, u rasmni qabul qiladi va asosiy konfiguratsiyaning bir turi bo'ladi.

• tab Sozlamalar
  • Ism- slayder
  • Turkum- Slayder
  • "Element qo'shish" ni almashtiring- Slayd qo'shing
  • Shakl sarlavhasi
  • oyna sarlavhasi- Slayd qo'shish/tahrirlash
• tab Forma varaqlari
  • Maydonlar- 1 ta yorliq yarating va Maydonlar maydonida yana 3 ta maydon yarating
    1. Rasm:
       • maydon nomi- tasvir
       • Sarlavha- Rasm yuklang
       • Televizor turini kiritish- tasvir
       • Sizga kerak bo'lgan fayllar manbasini ko'rsating, men bu vazifani birinchi darsda tasvirlab berdim
    2. Sarlavha:
       • maydon nomi sarlavha
       • Sarlavha- Slayd sarlavhasi
    3. Tavsif:
       • maydon nomi- tavsif
       • Sarlavha- Slaydning tavsifi
       • Televizor turini kiritish- matn maydoni
  • Bir nechta forma varaqlari- Mana, juda sehrli, biz oldingi bosqichlarda yaratilgan konfiguratsiyalarni, shu jumladan hozir yaratayotganimizni tanlashimiz kerak, ya'ni. video, qattiq va slayderni tanlang

    Konfiguratsiyalar slayder ro'yxatda bo'lmaydi, chunki aslida u hali yaratilmagan, shuning uchun siz qolgan nuqtalardan o'tishingiz, konfiguratsiyani saqlashingiz, tahrirlash uchun ushbu konfiguratsiyani qayta ochishingiz kerak va bu safar u ro'yxatda mavjud bo'ladi. slayder

    
    

    Yana bir aniqlik: konfiguratsiyalar aynan siz tanlagan tartibda saralanadi, ya'ni. sukut bo'yicha, yangi slayd qo'shganda, ro'yxatda birinchi bo'lgan slayd tanlanadi
    

  • Bir nechta forma varaqlari yorlig'i- Slayd turini tanlang (Matn bu erda ko'rsatilgan
    foydalanuvchi slayd turini tanlash ro'yxati yonida ko'radi)
  • Bir nechta forma varaqlari maydoni- turi
  • Bir nechta format varaqlari opsiya matni- Fonda tasvir bilan
  • Bir nechta Formtabs Optionsvalue- tasvir
• tab ustunlar
  • Maydon Ustunlar. Ikki element qo'shish
    1. sarlavha
       • tab Ustun
         • sarlavha- Sarlavha
         • maydon sarlavha
       • tab Hujayra muharriri
         • muharrir- this.textEditor
    2. Tavsif
       • tab Ustun
         • sarlavha- Tavsif
         • maydon- tavsif
       • tab Hujayra muharriri
         • muharrir- this.textEditor

Siz allaqachon sezganingizdek, dastlabki ikkita konfiguratsiyada biz boshqaruv panelida chiqish uchun ustunlar deb ataladigan narsalarni yaratmadik, ya'ni. televizor parametrining o'zini tahrirlashda. Ushbu ustunlar ikkinchisida yaratilishi kerak, ya'ni. televizorda va qaysi sohada ko'rsatiladigan konfiguratsiyada Bir nechta forma varaqlari tab Forma varaqlari bizga kerak bo'lgan barcha konfiguratsiyalar, shu jumladan bir xil konfiguratsiyaning o'zi ham ro'yxatga olinadi

Keling va tezda migx kirish turi bilan televizor yarataylik , maydonda Konfiguratsiyalar konfiguratsiyamiz nomini yozing, ya'ni. slayder , kerakli shablonlarni tayinlang va tahrirlash uchun resursni oching yoki uni yarating. Agar biz hamma narsani to'g'ri bajargan bo'lsak, unda quyidagi rasmni ko'rishimiz kerak:

Rasmni bosish mumkin va agar siz eslatmaning boshidagi havoladagi gif-ni allaqachon ko'rgan bo'lsangiz, demak bu bitta.

Biz tezda ma'lumotlarni to'ldiramiz va slaydlarimiz chiqishiga o'tamiz.

Qanday qilib qaytarib olish kerak?

Ma'lumotlarni kiritish yaxshi, lekin chiqish haqida nima deyish mumkin? Xavotir olmang o'rtoqlar hammasi yaxshi bo'ladi. Chiqarish uchun bizda yana ikkita yaxshi variant bor va biz ushbu ikkala variantni ham ko'rib chiqdik, bu MIGX snippetidir. getImageList va qudratli hodisa. Keling, bizning ma'lumotlarimiz qanday ko'rinishini ko'rib chiqaylik:

getImageList

Xom ma'lumotlarni ko'rish uchun tpl parametrini ko'rsatmasdan parchani chaqiramiz:

[] Massiv ( => 14 => rasm => files/avatar.png => Bu rasmli slayd => Xo'sh, qisqacha tavsif) [_alt] => 0 [_first] => 1 [_so'nggi] => => 1 = > slider) Massiv ( => 15 => video => fayllar/Mening uyim sharmandali.MOV => Va bu video => Ha, albatta! [_alt] => 1 [_first] => [ _last] => => 2 => slayder) Massiv ( => 16 => qattiq => ff0000 => Qizil rang esa bu erda juda chiroyli => Menga yoqadi! [_alt] => 0 [_first] => [_last ] => 1 => 3 = > slayder)

hodisa

($_modx->resource.slider| fromJSON | print) Array ( => Array ( => 14 => image => files/avatar.png => Это слайд с изображением => Ну короче описание)) => Array ( = > 15 => video => files/Моё домашнее позорно.MOV => А это уже видео => Да, действительно!) => Array ( => 16 => solid => ff0000 => А тут красный-прекрасный цвет => Menga yoqadi!))
Ko'rib turganimizdek, bizning massivimizda, boshqa narsalar qatorida, kalit turi konfiguratsiyalarni yaratishda biz ko'rsatgan qiymatlar bilan.

Slayderimizni ko'rsatish uchun getImageList, biz asosiy qadriyatlarimiz nomlari bilan 3 ta bo'lak yaratishimiz kerak turi, ya'ni: tasvir, video va qattiq. Buning sababini keyinroq tushunasiz.

Bo'laklarga misollar:

// Bo'lak tasvir

// Bo'lak video // Qattiq bo'lak
Va qo'ng'iroq quyidagicha ko'rinishi kerak:

Bu erda biz har bir slaydning massivlaridan qiymatlarni olamiz va shuning uchun nomlari maydon qiymatlariga mos keladigan uchta bo'lak yaratdik. Bir nechta forma varaqlari maydoni

Xo'sh, davom eting hodisa hamma narsa ancha sodda ko'rinadi:

(var $slider = $_modx->resource.slider| fromJSON) (agar $slider)

(/agar)

Natija va va'da qilingan hikoya

Ko'rib turganimizdek, MIGX bu vazifani "a'lo" deb aytmasa ham, hech bo'lmaganda "yaxshi" deb hisoblaydi. Yana bir bor takror aytamanki, MIGX sizni konfiguratsiyalar soni, har bir konfiguratsiyadagi yorliqlar va ulardagi maydonlar soni bilan cheklamaydi. Va misollar, siz tushunganingizdek, juda oddiy, shuning uchun siz ushbu funksionallik bilan tanishishingiz mumkin. Va yana bir muhim narsa: bo'laklarni chiqarishda men maydonlarning to'liqligini tekshirishni qat'iy tavsiya qilaman va har doim ma'lumotlar to'ldirilishi yoki to'ldirilmasligi yoki biron sababga ko'ra kelmasligi mumkinligini hisobga olaman va shuning uchun MODX sintaksisi uchun phx filtrlaridan foydalaning. yoki fenomdagi sharoitlar.

E'tiboringiz uchun barchangizga rahmat, men hammaga omad tilayman, lekin aytmayman, chunki ular aytganidek: "Yo'qotilganlarga omad tilayman", shuning uchun sizga baxt va sog'lik yoki boshqa narsa tilayman, lekin kimga qiziq, keyin hikoya.

Bir kuni qarindoshlarim bizga tashrif buyurishdi, ular orasida mening jiyanim (singlimning o'g'li) ham bor edi qo'shni davlat va mening ikki jiyanim (Biz deyarli bir xil yoshdamiz). Qishloq uyi, quyoshli Markaziy Osiyo, kichik tog' va yaqin daryo. O'sha oqshom to'rttamiz shu daryo bo'ylab sayr qilishga qaror qildik va dastlab hamma narsa tinch edi, hayajonlanish uchun hech qanday sabab yo'q edi. Ular juda ko'p zavqlanishdi, hikoyalar aytib berishdi (ba'zan qo'rqinchli va qo'rqinchli), hazil qilishdi va shunga o'xshash narsalar. Ammo bir payt men jiyanlarimdan biri oqarib ketganini payqadim va bu shunchaki og'zaki burilish yoki bezak emas, chunki men bu voqeadan oldin ham, keyin ham odamning yuzida bunday qo'rquv va hayratni ko'rmaganman. Ko'zini uzmay, orqam burilgan tomonga qaradi, ya'ni. u orqamdan biror narsaga yoki kimgadir qarab turganday tuyuldi, lekin to'g'ridan-to'g'ri orqa va yaqin emas, menga uzoqdan qayoqqadir qarab turgandek tuyuldi. Bu qo'rqinchli edi va men undan so'radim: - Nima bo'ldi? Va u…

Ushbu xatboshida ushbu eslatmadagi voqea davomi borligini ko'rsatishga to'g'ri keladi, lekin aslida men sizni texnik, zerikarli va katta matndan biroz xursand qila olaman deb umid qilib, sizni biroz aldadim va siz yaxshi holatda bo'lasiz. kayfiyat. Hikoyaning o'zi haqiqiy va juda qiziqarli. Endi e'tiboringiz uchun barchangizga rahmat!

UPD:
Agar men nima bo'lsam, Baha!?

Agar to'satdan kimdir rublga rahmat aytmoqchi bo'lsa, unda shunday bo'lsin: Sberbank kartasi +79609354545

Ushbu darsda biz MIGX asoslarini yoritamiz va blogingizda foydalanishingiz mumkin bo'lgan yangi slayder ustida ishlaymiz.

Talablar:

• MODX Revolution veb-sayti.
• O'rnatilgan MIGX maxsus shablon o'zgaruvchan turi (paketlarni boshqarish orqali).
• Biz birlashtirmoqchi bo'lgan galereya slayderi yoki skript. Men WooThemes-ning FlexSlider-dan foydalandim, chunki u o'zini idishning kengligiga moslashtiradi (ta'sirchan dizayn uchun juda muhim!). Bundan tashqari, u juda sozlanishi, smartfonlarda aylantirishni qo'llab-quvvatlaydi va qutidan tashqarida juda yaxshi ko'rinadi.
• Tasvirlarni avtoqirqish uchun Paket menejeri orqali o'rnatilgan phpthumbof snippet.
• Har qanday tasvir!

Boshlanishi

Ish bir nechta qismlardan foydalanadi. Avval biz MIGX TV-ni o'rnatishimiz kerak va biz ushbu ma'lumotlarni old tomondan olib, slayderimizni ishlashimiz kerak. Ushbu qo'llanma FlexSlider-dan foydalanishni o'z ichiga oladi, biz belgilash kerakli narsa ekanligiga ishonch hosil qilamiz, ammo boshqa slayderlarga moslashish ham juda oson bo'lishi kerak.

1-qadam: Rasmlarni boshqarish uchun MIGX TV-ni o'rnating

Keling, televizorni sozlashdan boshlaylik. MIGX ning kuchli tomoni shundaki, siz kerakli maydonlarni belgilashingiz mumkin. Siz ularni jadval sifatida ko'rasiz va faqat sarlavhalarni nomlashingiz kerak. Bunday holda, menga uchta turli soha kerak bo'ladi:

• Fayl tizimidagi rasmni tanlash uchun kiritish maydoni (yoki media manbalaringizdan 2.2 da).
• Sarlavha / teg / tavsifni kiritish uchun matn kiritish maydoni. FlexSlider taglavhalar bilan ajoyib ishlaydi, shuning uchun biz ulardan foydalanamiz.
• Bundan tashqari, "Set" uchun matn kiritishni qo'shdim. Keyinchalik ko'rib turganimizdek, men uni resursning istalgan joyidan qo'shiladigan cheksiz miqdordagi individual slayderlar uchun ishlataman ..

Agar xohlasangiz, boshqa maydonlardan foydalanishingiz mumkin, ammo o'quv qo'llanma yuqorida sanab o'tilgan maydonlardan foydalanadi.

Keling, televizorni yaratishga o'tamiz. Bu erda tasvirlarning tavsiflari bilan slayder (agar eskizda hech narsa ko'rinmasa).

Elementlar yorlig'ida yangi shablon o'zgaruvchisini yarating va unga mos nom bering. Men uni ws.images deb nomlayman, agar siz unga oʻz nomingizni bersangiz, [[*ws.images]] ni oʻz ismingiz bilan almashtirishni unutmang. Kirish parametrlari yorlig'ida ochiladigan menyudan "migx" turini tanlang. Agar siz ushbu turni ko'rmasangiz, MIGX paketini Paket menejeri orqali o'rnatganingizni tekshiring. Ekranning pastki qismida bir nechta parametrlar, jumladan, Shakl yorliqlari va Grid ustunlari qo'shilganligini sezasiz. Bu MODX > 2.0 uchun amal qiladi, oldingi versiyalar uchun men yangilashni tavsiya qilaman.

Shakl yorliqlari va Grid ustunlari maydonlari haqiqiy JSON satrlari bilan to'ldirilishi kerakligini unutmang. JSON asosan ob'ektlarni, massivlarni yoki kalit -> qiymat birikmalarini deyarli har qanday dasturlash tilini qo'llab-quvvatlaydigan tarzda ko'rsatish usulidir. Bu erda texnik xususiyatlar va rasmiy JSON saytidan ba'zi misollar.

Shakl yorliqlarini sozlash

Shakl turli yorliqlardan foydalanish imkonini beradi. Har bir yorliqda tavsif va bir nechta maydonlar mavjud. Bu bilan siz ko'plab ilg'or narsalarni qilishingiz mumkin, chunki siz ko'pincha bitta yorliqdan foydalanasiz, shuning uchun hozircha esda tuting. Men foydalanadigan forma yorliqlari uchun JSON kodi:

[("tasvir":"Rasm", "maydonlar": [ ("maydon":"to'plam","sarlavha":"Set"), ("maydon":"tavsif","ta'rif":"tavsif") , ("maydon":"tasvir","sarlavha":"Rasm","inputTVtype":"tasvir") ] )]

Keling, har bir qatorni ko'rib chiqaylik:

• Birinchisi kvadrat qavs ([) bilan yorliqlar massivining ochilishini va jingalak qavs (() bilan yorliqning ochilish ob'ektini ko'rsatadi. Shundan so'ng biz Rasm maydonining sarlavhasini aniqlaymiz. E'tibor bering, sizga kerak bo'ladi. xususiyatlar va ularning qiymatlari uchun qo‘sh qo‘shtirnoq (" ") ishlatish uchun , yakka qo‘shtirnoqlar kutilmagan natijalarga olib kelishi mumkin. Agar sizda bu qavslar biron-bir xususiyat va qiymatda bo‘lsa, ularni qiya chiziq (\) bilan qoching. Tavsifni (sarlavha) aniqlagandan so‘ng, Davom etamiz va "maydonlar" massivini belgilashni boshlaymiz, uni kvadrat qavslar ([) bilan ochamiz.
• Biz birinchi maydonimizni to'siq sifatida belgilaymiz. "maydon": "to'siq" bu sohada oddiy matn kiritishni xohlayotganimizni bildiradi. "Sarlavha":"Set" - biz "to'plam" nomining tavsifini beramiz - bu oddiy matnni kiritish uchun nom bo'ladi. Keyin unga "Set" sarlavhasini bering, bu shaklda maydon yorlig'i sifatida ko'rsatiladi.
• Keyin tavsif maydonini xuddi shu tarzda belgilang
• 4-qator tasvirni belgilaydi. Bu erda o'ziga xos narsa shundaki, biz kirish turi sifatida boshqa televizordan (“tasvir” deb nomlangan) foydalanmoqdamiz. Bu MIGX ning juda kuchli xususiyati bo'lib, u sizning shaklingizni yaratish uchun boshqa televizorlardan foydalanish imkonini beradi. Bu holda "tasvir" televizori juda oddiy: kirish turi tasvirdir va 2.2 da siz uni to'g'ri media manbasiga belgilashingiz mumkin. Oddiy televizorda bo'lgani kabi, uni andozalar bilan bog'lashingiz shart emas. Buni amalga oshirishning yana bir usuli (men boshqa MIGX televizorlarida foydalanaman) radio qutilari yoki qutilarni tanlashdir.
• Beshinchi qator maydonlar qatorini yopadi. Shuni ham yodda tutingki, maydonni (tasvirni) belgilaydigan oxirgi qator vergul bilan tugamaydi - bu muhim! Agar siz massivga vergul qo'ysangiz, JSON tahlil qilinmaydi va sizning formangiz ishlamaydi.
• Oltinchi qator yorliq ob'ektini va yorliqlarning butun qatorini yopadi.

Shunday qilib, biz "image" televizorini yaratdik! Sizda allaqachon ma'lumotlarni to'ldirish uchun shakl bo'lishi kerak, lekin uni ko'rsatish uchun belgilash kerak...

Ustunni belgilashni o'rnatish

Ustunning joylashuvi resursning televizor panelidagi jadvaldir. Ustunni belgilash kiritish parametrlari orqali ushbu jadval uchun sarlavhalarni belgilashingiz kerak. Mana men foydalanayotgan narsaning (yana JSON) ta'rifi: [( "sarlavha": "Set", "tartiblanuvchi": "true", "dataIndex": "set" ),( "sarlavha": "Ta'rif" , "sortable" : "true", "dataIndex": "description" ),( "sarlavha": "Rasm", "sortable": "false", "dataIndex": "tasvir","renderer": "bu. renderImage")]

Keling, har bir qatorni ko'rib chiqaylik:

• Sarlavhalar qatorini kvadrat qavslar ([) va beshinchi ustun sarlavhasini jingalak qavslar (() bilan oching.
• Sarlavhani "Set" deb nomlaymiz, uni saralash (tartiblash) mumkinligini ko'rsatamiz va "maydon": "to'siq" bo'lgan Set Form Tabs ta'rifiga mos keladigan "to'plam" parametrini belgilaymiz.
• To'plamning oxiri / Tavsifning boshlanishi
• Biz sarlavhani "Tavsif" deb nomlaymiz, tartiblanadi va uni dataIndex maydon tavsifi bilan moslashtiramiz.
• Yakuniy tavsif / Tasvirni boshlash
• Sarlavhani "Rasm" deb nomlang, tartiblanmaydi va uni dataIndex - rasm maydoniga joylashtiring. Shuningdek, biz ExtJS da chiqish ma'lumotlarining ko'rinishini o'zgartirishga imkon beradigan rendererni aniqlaymiz. Bu holda "this.renderImage" renderer avtomatik ravishda tanlangan rasmning url manzilini oladi va uning o'rniga eskizni yaratadi.
• Image ob'ektining oxiri va sarlavhalar massivi.

Shundan so'ng siz ushbu MIGX televizorini shabloningizga belgilashingiz va natijani tekshirishingiz mumkin. Belgilash ko'rsatilmayaptimi? Yorliqlarga qayting va barcha qiymatlar bitta tirnoq emas, qo'sh tirnoq ichiga olinganligiga ishonch hosil qiling va qo'shimcha vergullarni tekshiring.

Ma `lumot

JSONni tekshirish uchun JSONLint dan foydalaning.

• Tafsilotlarni to'ldiring
• Saytga ma'lumotlarni olib keling

Bizning ws.image shablon o'zgaruvchimizni ixtiyoriy ma'lumotlar bilan to'ldiring

Agar siz ushbu ma'lumotni oddiy televizor sifatida ko'rsatishga harakat qilsangiz, shunga o'xshash narsani ko'rasiz:

[( "MIGX_id":"1","set":"set1","description":"Kolbasa o'g'irlab, uyg'oq bo'lganida ovqatlanadigan mushukni belgilang","image":"demo/uroki/15/1 .jpg" ),( "MIGX_id":"2","set":"set1","tavsif":"baraban","image":"demo/uroki/15/2.jpg" ),( "MIGX_id" ":"3","set":"set1","description":"como esta nuevo","image":"demo/uroki/15/3.jpg" ),( "MIGX_id":"4", "set":"set1","description":"siz bu kitob bilan odamni o'ldirishingiz mumkin","image":"demo/uroki/15/4.jpg" )]

Bu kiritilgan maydonlar va qiymatlarga ega JSON massivi!

MIGX getImageList parchasi bilan birga kelganligi sababli, siz undan foydalanib ma'lumotlarni ko'rsatishga harakat qilishingiz mumkin. Ushbu parcha uchun hujjatlarni bu yerda topishingiz mumkin. Yoki men televizor maʼlumotlari asosida &tpl boʻlagidan belgilar yaratish uchun foydalaniladigan oʻz parchangizni (parseMIGXToGallery) yarating:

fromJSON($input); $output = massiv(); agar (!$input || empty($tpl)) “no stuff”ni qaytaradi; foreach ($input as $row) ( agar (isset($set) && !empty($set) && ($set != $row["set"])) davom ettirilsa; $output = $modx->getChunk($) tpl, $row); ) return implode("\n", $output);

Keling, har bir qatorni ko'rib chiqaylik:

• Biz $input o'zgaruvchisini olamiz (u parcha chaqiruvidagi &input parametridagi ma'lumotlarni oladi, bu haqda keyinroq) va JSON-ni PHP massiviga ajratamiz.
• Chiqishimizni ushlab turish uchun bo'sh massivni o'rnatamiz.
• Keling, $input oʻzgaruvchisi NULL yoki False emasligiga ishonch hosil qilaylik, bu JSON oʻtkazilmaganligini yoki uning notoʻgʻri ekanligini bildiradi, shuningdek, $tpl oʻzgaruvchisi (parcha qoʻngʻiroqda &tpl parametri tomonidan oʻtkazilgan) boʻsh emasligini tekshiring. Agar ikkala shart rost bo'lsa, biz "bo'sh" xato xabarini chop qilamiz, bu esa kontent menejeriga nimadir noto'g'ri ekanligi haqida maslahat beradi.
• Keyin $input massivining har bir elementini $satr sifatida takrorlang.
• Biz $set o'zgaruvchisi o'rnatilgan yoki yo'qligini tekshiramiz (u &set parametridagi parcha chaqiruvida o'rnatiladi) va agar u bo'sh bo'lmasa, uning qiymatini joriy qatorning "to'siq" qiymatiga nisbatan tekshiramiz. Agar bu siz xohlagan narsa bo'lmasa, massivdagi keyingi elementga o'ting.
• Biz $tpl nomli bo'lakni olamiz va unga joriy qatorning qiymatlarini to'ldiruvchi sifatida kiritamiz.
• Biz foreach tsiklini yopamiz.
• Nihoyat, biz $output massivini bir-biriga yopishtiramiz, har bir elementni chiziq chizig'i bilan ajratamiz va uni sahifaga chiqaramiz.
• Shunday qilib, yuqoridagilarni umumlashtirish uchun biz kiritilgan ma'lumotlarni olamiz, har bir qatorni ko'rib chiqamiz va uning biz aniqlagan to'plamga tegishli ekanligini tekshiramiz, keyin u bo'lak oladi va chiqishga hamma narsani qo'shadi.
• Snippetni ishga tushirish

Bizga kerak bo'lgan narsa - bu bizga rasmlarimiz kerak bo'lgan parcha va FlexSlider uchun hamma narsani to'g'ri yo'l bilan chiqaradigan bo'lak. Snippet qanday nomlanadi:

[]` &set=`set1` ]]

Va images.gallery.tpl bo'lagi:

[[+tavsif]]

Bundan tashqari, FlexSlider hujjatlariga ko'ra, butun parcha chiqishini div va tartibsiz ro'yxatga o'rashingiz kerak. Hammasini osonlashtirish uchun keling, barchasini bir bo'lakka joylashtiramiz. Mening bo'lim slayder deb ataladi va quyidagilarni o'z ichiga oladi:

Ushbu bo'lakdan foydalanib, men shunchaki tarkibdagi biror narsani bog'lashim mumkin, uni eslab qolish yoki hiyla-nayrangga qo'yish osonroq.

[[$slider?set=`to'plam nomi`]]

Endi siz FlexSlider-ni joylashtirishni boshlashingiz mumkin.

3-qadam: FlexSlider-dan foydalanish

FlexSliderdan foydalanish nisbatan oson (uning fayllarini yuklab oling) va uning veb-saytida ko'plab misollar mavjud. Shuningdek, sahifaga jQuery-ga qo'ng'iroqni va uning CSS faylini (zip faylga o'ralgan) va FlexSlider plaginini (shuningdek, zip arxivida) kiritishingiz kerak. Shundan so'ng siz quyidagi kod yordamida to'g'ri elementni ishga tushirishingiz kerak:

Sayt hamma narsani faylning boshiga qo'yishni maslahat beradi, lekin men shaxsan hammasini pastki qismga qo'yaman. Agar slayderingiz sahifaning yuqori qismida ko'rsatilsa, uni joylashtirish yaxshiroqdir Shunday qilib, u sahifa paydo bo'lishidan oldin yuklanadi, shuning uchun uni xohlagan joyga joylashtiring.

Ana xolos! Umid qilamanki, bu uzoq maqola kimgadir MIGX va FlexSlider kabi slayderlardan foydalanishni boshlashga yordam beradi!

Bugun haqida kichik maqola modx-da slayderni qanday yaratish kerak BanerY to'plamidan foydalanish. Ushbu paketni ombordan yuklab olish va o'rnatish mumkin.

BanerY bilan slayder yaratish

Shunday qilib, statik slayder mavjud, u oddiy yuklash slayderi bo'lsin, bu belgi bilan:

Maqsad - bu belgidan boshqariladigan slayder yaratish. Qani boshladik.

Keling, BannerY da slaydlar yaratishdan boshlaylik, buning uchun biz Ilovalar - BannerY - Pozitsiyalar bo'limiga o'tamiz va pozitsiyani yaratamiz (masalan, uy-slayder).

Shundan so'ng, Bannerlar yorlig'iga o'ting va Yangi banner tugmasini bosing. Yangi banner yaratish uchun oyna ochiladi.

Biz hamma narsani to'ldiramiz:

• Ism, uni [[+name]] yordamida ko'rsatish mumkin.
• Rasmni tanlang - [[+rasm]].
• Qaerga borish kerakligini ko'rsating - [[+url]].
• Tavsifni to'ldiring - [[+ta'rif]] - bu erda, aytmoqchi, siz nafaqat matnni, balki oddiy html-ni ham zaryad qilishingiz mumkin va bu ajoyib.
• Xo'sh, pozitsiyani tanlang (u ilgari yaratilgan).

Va shuning uchun biz kerakli miqdordagi slaydlarni yaratamiz.

Endi siz yuqoridagi belgini bo'laklarga bo'lishingiz va kodni bo'laklarga BanerY sintaksisiga moslashingiz kerak.

Sinf bilan alohida slayder uchun bo'lak yarating faol, tinch qo'y, hamma narsa o'z holidagiday qo'sin; shunday bo'lsin slayd va unga sintaksisni kiriting:

Endi bu bo'lakdan nusxa oling va unga nom bering slayd 2 va sinfni olib tashlang faol

Xo'sh, aslida, faqat slaydlarni ko'rsatish uchun qoladi.

[]

Natijada biz quyidagilarni olamiz:

Hammasi shunday) BanerY yordamida modx-da slayder yaratish juda oson.

Ha, aytmoqchi, uning hujjatlari bu erda: docs.modx.pro/components/bannery/snippet

Slider Revolution juda ko'p xususiyatlar va foydalanish qulayligi tufayli eng mashhur slayderlardan biridir.
ThemePunch dan. Ushbu slayder 273 441+ marta sotib olingan va butun dunyo bo'ylab 2500000+ saytlar tomonidan qo'llaniladi.

Quyida ushbu slayderning asosiy afzalliklaridan ba'zilari keltirilgan bo'lib, uni bepul va ajratib turadi
eng premium analoglari:

• Kuchli vizual muharrir - qulay menyu orqali loyihangiz ehtiyojlariga mos ravishda slayder displeyini sozlang
  har bir funktsiya o'z o'rnida. Qattiq gradatsiya sizni chalkashtirishga yo'l qo'ymaydi. Faqatgina qiyinchilik
  birinchi marta ularning barchasini sinab ko'rish istagi bo'ladi.
• Har bir slaydning o'zgaruvchanligini nazorat qilish - kompyuter, planshet va telefon ekranida bloklarni rejalashtirilgan ko'rsatish.
  vizual muharririda ko'rsatilgan. Slaydlar hajmini har bir qurilma uchun alohida o'zgartirishingiz mumkin.
  Javob beruvchi shablon rasm va videolarning buzilishiga yoki talab qilinganidan ko‘proq joy egallashiga yo‘l qo‘ymaydi
  qulay ko'rish.
• Ijtimoiy tarmoqlar va videoxosting bilan ishlash - Slider Revolution beshinchi avlodi sizga slayderga qo'shish imkonini beradi
  Instagramm, Facebook, Flickr, Twitter, Vimeo va Youtube-dan ma'lumotlar. Agar siz videoni o'zingiz joylashtirishni rejalashtirmoqchi bo'lsangiz
  serverda siz HTML5 tilidan foydalanishingiz mumkin. Kodning qismlari avtomatik ravishda yoziladi.
• Yuqori unumdorlik va slaydni optimallashtirish - plagin tahrirlash rejimida tez ishlaydi va kamaytiradi
  tarkibning sifatini yo'qotmasdan slayderning og'irligi. Sahifani yuklashning uzoq vaqtlari haqida tashvishlanishingiz shart emas. Ayniqsa nima
  Wi-Fi ulanishi mumkin bo'lmagan mobil qurilmalarga tegishli.
• Slaydlarni o'tkazishda juda ko'p maxsus effektlar
• Matn, video va rasmlarni ko'rsatishda ko'plab animatsiya effektlari
• Saytni ochishda videoni avtomatik ravishda yoki qo'lda boshlash, tanlash uchun, videoni tomosha qilishda slayderni to'xtatish,
  orqaga o'rash va boshqalar.
• Navigatsiya sozlamalarining katta tanlovi
• Seo optimallashtirish uchun sozlangan holda to'g'ridan-to'g'ri slayderga havolalar bilan post e'lonlarini joylashtiring
• Google shriftlarini qo'llab-quvvatlash va o'rnatish
• Bitta slaydda ko'plab qatlamlardan (rasmlar, videolar, sarlavhalar va havolalar) foydalangan holda, ularning son-sanoqsizlari mavjud.
  bir-birining ustiga qo'ying va shu bilan real video yoki biron bir taqdimot yarating.

Diqqat! Onlayn premium slayder shablonlarini va kutubxona ob'ektlarini yuklab olish uchun siz ThemePunch-dan alohida litsenziyani sotib olishingiz kerak, bu matnni yozish paytida 19 dollar turadi, so'ngra ushbu bo'limda ko'rsatilgan maydonga sotib olish kodini kiritib faollashtirishingiz kerak. quyidagi rasm.

Video ko'rib chiqish modSliderRevolution

Bugun biz MIGX yordamida Bootstrap slayderini qanday yaratishni ko'rib chiqamiz. Tadqiqotni boshlashdan oldin, men birinchi navbatda bu erga tashrif buyurishni maslahat beraman.

MIGX konfiguratsiyasini yaratish

Men boshqaruvga boraman MIGX va nomli yangi element qo'shing slayder, almashtirish maydoniga " deb yozing Slaydlar qo'shish"va tabga o'ting" Forma varaqlari».

• Maydon nomi - sarlavha, Sarlavha - Sarlavha.
• Maydon nomi - slayd, Sarlavha - Slayd, Kirish TV turi - tasvir.
• Maydon nomi - tavsif, Sarlavha - Tavsif.
• Maydon nomi - idstranici, Sarlavha - Bog'lanish uchun hujjatning identifikatorini ko'rsating.

• Sarlavha - Sarlavha, Maydon - sarlavha.
• Sarlavha - Slayd, Field - slayd, Renderer - this.renderImage.
• Sarlavha - Tavsif, Maydon - tavsif.
• Sarlavha - hujjat identifikatori, Field - idpage.

Eslatma: Aslida, biz elementlarni Formtabs-dan o'tkazamiz. Ha, siz maydonlarni ham to'ldirishingiz mumkin Ustun kengligi - ustunlar kengligi.

Saqlash (bajarish).

Umuman yuvinishni istamaydiganlar uchun biz bo'sh konfiguratsiya yaratamiz va unga quyidagi kodni eksport qilamiz:

( "formtabs":[ ( "MIGX_id":1, "taglavha":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438\u0442\u044c \u0430\u043b\u0430\u049\u049\u049\u043b uchun chop etish" ", "tabs_oldin_ chop etish" ":"0", "maydonlar":[ ( "MIGX_id":1, "maydon":"sarlavha", "sarlavha":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432 \u043e\u043a" , "tavsif":"\u0417\u0430\u0433\u043e\u0432\u043e\u043a \u0441\u043b\u0441\u043b\u0430\u043b\u0430\u04"u0430\u04",u0430\u04",u0430\u04",u0430\u0de3"uscription "u0430\u04",u0430\u04"u0430\u0de3"u0417\u0430\u0433"de3"3"de3 , "inputTV": "", "inputTVtype":"", "validation":"", "configs":"", "cheklovchi_shart":"", "display":"", "sourceFrom":"config" , "manbalar": "", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":1 ), ( "MIGX_id":2, "maydon":"slide ", "taglavha" :"\u0421\u043b\u0430\u0439\u0434", "tavsif":"", "tavsif_kod":"0", "inputTV":"", "inputTVtype":"image", " validation":"" , "configs":"", "cheklovchi_shart":"", "display":"", "sourceFrom":"config", "manbalar":"", "inputOptionValues":"", " default":"" , "useDefaultIfEmpty":"0", "pos" :2 ), ( "MIGX_id":3, "maydon":"tavsif", "sarlavha":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435", "tavsif":"", " tavsif_kodi":"0", "inputTV":"", "inputTVtype":"", "tasdiqlash":"", "configs":"", "cheklovchi_shart":"", "displey":"", " sourceFrom":"config", "sources":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":3 ), ( "MIGX_id":4, "maydon":"idstranici", "sarlavha":"\u0423\u043a\u0430\u0436\u0438\u0442\u0435 identifikatori \u0434\u043e\u043a\u0443\u043c\u0430\u043c\u043034\03400\u0430\u0436\u \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f", "description":"", "description_is_code":"0", " inputTV":"", "inputTVtype":"", "validation":"", "configs":"", "cheklovchi_shart":"", "display":"", "sourceFrom":"config", " manbalar":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":4 ) ], "pos":1 ) ], "contextmenus":"" , "actionbuttons":"", "ustun tugmasi s":"", "filtrlar":"", "kengaytirilgan":( "migx_add":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0439\0439\u u044b", "disable_add_item":"", "add_items_directly":"", "formcaption":"", "update_win_title":"", "win_id":"", "maxRecords":"", "addNewItemAt":" pastki", "media_source_id":"", "multiple_formtabs":"", "multiple_formtabs_label":"", "multiple_formtabs_field":"", "multiple_formtabs_optiontext":"", "multiple_formtabs_optionsvalue":"", "actionbuttonsperrow":4 , "winbuttonslist":"", "extrahandlers":"", "filtersperrow":4, "packageName":"", "classname":"", "task":"", "getlistsort":"", " getlistsortdir":"", "sortconfig":"", "gridpagesize":"", "use_custom_prefix":"0", "prefiks":"", "grid":"", "gridload_mode":1, "check_resid" ":1, "check_resid_TV":"", "join_alias":"", "has_jointable":"yes", "getlistwhere":"", "joins":"", "hooksnippets":"", "cmpmaincaption" :"", "cmptabcaption":"", "cmptabdescription":"", "cmptabcontroller":"", "winbuttons" ":"", "onsubmitsuccess":"", "submitparams":"" ), "ustunlar":[ ( "MIGX_id":1, "sarlavha":"\u0417\u0430\u0433\u043e\u043b\u043e\ u0432\u043e\u043a", "dataIndex":"header", "width":100, "sortable":"false", "show_in_grid":1, "customrenderer":"", "renderer":"", " clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" ), ( "MIGX_id":2, "header":"\u0421\ u043b\u0430\u0439\u0434", "dataIndex":"slide", "width":100, "sortable":"false", "show_in_grid":1, "customrenderer":"", "renderer":"this .renderImage", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" ), ( "MIGX_id":3, "header" :"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435", "dataIndex":"tavsif", "width":200, "sortable":"false", "show_in_grid":1, "customrenderer ":"", "renderer":"", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "Editor":"" ), ( " MIGX_id":4, "sarlavha":"id \u0434\u043 e\u043a\u0443\u043c\u0435\u043d\u0442\u0430", "dataIndex":"idstranici", "width":50, "sortable":"false", "show_in_grid":1, "customrenderer":" ", "renderer":"", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "Editor":"" ) ], "category": "")

MIGX konfiguratsiyasi bilan televizor yaratish

MODX daraxtida, " Elementlar"-ni bosing + nuqtaga qarama-qarshi Qo'shimcha maydonlar" va quyidagilarni kiriting:

• "Ism" - slayder; "Imzo" - Slayder.
• "Kirish opsiyalari" yorlig'ida "Kirish turi" ni tanlang migx va "Konfiguratsiyalar" maydoniga kiriting slayder.
• "Shablonlar uchun mavjud" yorlig'ida ushbu maydonga kiritish mumkin bo'lgan shablonlarni tanlang.

Ma'lumotlarni kiritish

Keling, MIGX konfiguratsiyasi bilan slayder maydoni tayinlangan hujjatni ochamiz va unga ba'zi ma'lumotlarni kiritamiz.

Sahifaga yuklash 3 karusel chiqishi

Bizda standart HTML belgilash getbootstrap.com/docs/3.3/javascript/#carousel-examples bor, uni MIGX uchun qayta yarating va shablonning kerakli joyiga quyidagi kodni yozing:

Va bo'laklarni yarating:

tplsliderIndikator:

va bo'lak tplsliderItem quyidagi mazmun bilan:

Bootstrap har bir sahifada 4 karusel chiqishi

Oldingi holatda bo'lgani kabi, biz standart belgini olamiz getbootstrap.com/docs/4.1/components/carousel/ va uni qayta bajaring, natijada biz olamiz

Bo'lak qayerda tplsliderIndikator quyidagi kodga ega:

va bo'lak tplsliderItem quyidagi kod bilan: