Modx გამოსახულების კარუსელი პროდუქტის გვერდზე. დიდი და საშინელი

გამარჯობა საზოგადოება!

ამ ჩანაწერში შეიტყობთ, რა არის მრავალი ფორმატის ჩანართი და როგორ შექმნათ კონფიგურაცია მონაცემთა სხვა ნაკრებით. და რა თქმა უნდა, ჩვენ შევქმნით თქვენთან ერთად სლაიდერს, რომელსაც ექნება სხვადასხვა ტიპის სლაიდები და ბოლოს ნახავთ ძალიან საინტერესო ამბავირომლის თქმაც დიდხანს ვერ გავბედე ვინმესთვის (თუ, რა თქმა უნდა, არ გაინტერესებთ, მაგრამ ამბავი საინტერესოა – დამიჯერეთ). ასე რომ, სლაიდების მაგალითები:

• ფონის სურათი
• ვიდეო ფონი
• მყარი ფერის ფონი

ყურადღება! ამჯერად არ მოშორდეთ ბავშვებს და ორსულებს ეკრანებიდან, რადგან ეს არის ერთგვარი დისკრიმინაცია ასაკისა და სქესის მიხედვით!

ასე იქნება

კიდევ ერთი განცხადება! ხშირად მივმართავ პირველ გაკვეთილს, რათა არ განმეორდეს, ამიტომ გირჩევთ გაეცნოთ

Რისთვის?

მოდით ვიფანტაზიოროთ: თქვენ მიიღებთ პროექტს, სადაც, მაგალითად, მთავარ გვერდზე არის სლაიდერი რამდენიმე ტიპის სლაიდებით, ერთს აქვს ვიდეო ფონი, მეორეს აქვს სურათი და მესამეს აქვს მყარი ფერი, მაგალითად. თქვენ არ შექმნით ველების ერთ კომპლექტს (ერთი კონფიგურაცია) და არ ჩაყრით (ბოდიში ლექსიკისთვის) ყველა ამ ველს მასში და არ ეტყვით მენეჯერს, როგორ იცხოვროს მასთან და იყოს. Არ არის სერიოზული დამოკიდებულება!? (იმედია ვინმე გაიგებს)

მიზეზის გამო

„რატომ“ თქვენთან გავიგეთ, ახლა „როგორ“ გავარკვიოთ. თუ თქვენ უკვე წაიკითხეთ პირველი გაკვეთილი, მაშინ უნდა გადავიდეთ MIGX კომპონენტის გვერდზე და შევქმნათ 3 კონფიგურაცია. წინასწარ დააინსტალირე ColorPicker by Jako (მაგრამ არ აქვს მნიშვნელობა):

ყველაფერი, რაც ჩემს მიერ არ არის მითითებული, გამოტოვეთ!

მყარი კონფიგურაცია (მყარი ფერი)

• ჩანართი პარამეტრები
  • სახელი- მყარი
  • დაამატეთ ახალი კატეგორია- სლაიდერი
• ჩანართი ფორმატის ჩანართები
  • ველები ველებიშექმენით 3 ველი
    1. Ფონის ფერი:
       • ველის სახელი-bgcolor
       • წარწერა- აირჩიეთ ფონის ფერი
       • შეყვანის ტელევიზორის ტიპი- ColorPicker (ან თქვენ
         გამოყენება)
    2. სათაური:
       • ველის სახელისათაური
       • წარწერა- სლაიდის სათაური
    3. აღწერა:
       • ველის სახელი- აღწერა
       • წარწერა- სლაიდის აღწერა
       • შეყვანის ტელევიზორის ტიპი-ტექსტარეა
  • მრავალი ფორმატის ველი-ტიპი ( მოცემული ღირებულებაიქნება გასაღების სახელი
    გამომავალი მასივი. ნაგულისხმევი: MIGX_formname)
  • - მყარი ფერით ფონზე (ტექსტი
    ეს კონფიგურაცია შერჩევის სიაში)
  • - მყარი (იგივე ტიპის ველის მნიშვნელობა
    მასივში)

ვიდეო კონფიგურაცია

• ჩანართი პარამეტრები
  • სახელი- ვიდეო
  • კატეგორია- სლაიდერი
• ჩანართი ფორმატის ჩანართები
  • ველები- შექმენით 1 ჩანართი და ველში ველებიისევ ვქმნით 3 ველს, ამ ველებიდან მხოლოდ ერთია სხვა ტიპის.

    აქვე უნდა განვმარტო, რომ სხვადასხვა კონფიგურაციებში ველების რაოდენობა და მათი ტიპები შეიძლება იყოს ისეთივე განსხვავებული, რამდენადაც თქვენი ფანტაზია შეზღუდულია... ვიცი, რომ ყველაფერი რიგზეა თქვენი ფანტაზიებით?

    1. ვიდეო (ანუ ფაილი):
       • ველის სახელი- ვიდეო
       • წარწერა- ატვირთეთ ვიდეო
       • შეყვანის ტელევიზორის ტიპი- ფაილი
    2. სათაური:
       • ველის სახელისათაური
       • წარწერა- სლაიდის სათაური
    3. აღწერა:
       • ველის სახელი- აღწერა
       • წარწერა- სლაიდის აღწერა
       • შეყვანის ტელევიზორის ტიპი-ტექსტარეა
  • მრავალი ფორმატის ველი- ტიპი
  • მრავალი Formtabs Optionstext- ვიდეოს ფონზე
  • Multiple Formtabs Optionsvalue- ვიდეო

სლაიდერის კონფიგურაცია

ნაგულისხმევად, ის მიიღებს სურათს და იქნება ერთგვარი ძირითადი კონფიგურაცია.

• ჩანართი პარამეტრები
  • სახელი- სლაიდერი
  • კატეგორია- სლაიდერი
  • ჩაანაცვლეთ "საქონელის დამატება"- დაამატეთ სლაიდი
  • ფორმის წარწერა
  • ფანჯრის სათაური- სლაიდის დამატება/რედაქტირება
• ჩანართი ფორმატის ჩანართები
  • ველები- შექმენით 1 ჩანართი და ველებში კვლავ შექმენით 3 ველი
    1. სურათი:
       • ველის სახელი- გამოსახულება
       • წარწერა- ატვირთეთ სურათი
       • შეყვანის ტელევიზორის ტიპი- გამოსახულება
       • მიუთითეთ თქვენთვის საჭირო ფაილების წყარო, მე აღვწერე ეს დავალება პირველ გაკვეთილზე
    2. სათაური:
       • ველის სახელისათაური
       • წარწერა- სლაიდის სათაური
    3. აღწერა:
       • ველის სახელი- აღწერა
       • წარწერა- სლაიდის აღწერა
       • შეყვანის ტელევიზორის ტიპი-ტექსტარეა
  • მრავალი ფორმატის ჩანართი- აი, სწორედ მაგია, უნდა ავირჩიოთ წინა ნაბიჯებში შექმნილი კონფიგურაციები, მათ შორის ის, რასაც ამჟამად ვქმნით, ე.ი. აირჩიეთ ვიდეო, მყარი და სლაიდერი

    კონფიგურაციები სლაიდერისიაში არ იქნება, რადგან რეალურად ის ჯერ არ არის შექმნილი, ამიტომ დაგჭირდებათ დარჩენილი პუნქტების გავლა, კონფიგურაციის შენახვა, ამ კონფიგურაციის ხელახლა გახსნა რედაქტირებისთვის და ამჯერად ის ხელმისაწვდომი იქნება სიაში სლაიდერი

    
    

    კიდევ ერთი დაზუსტება: კონფიგურაციები დალაგდება ზუსტად იმ თანმიმდევრობით, რომელიც თქვენ აირჩიეთ, ე.ი. ნაგულისხმევად, ახალი სლაიდის დამატებისას შეირჩევა ის, რომელიც იქნება პირველი სიაში
    

  • Multiple Formtabs Label- აირჩიეთ სლაიდის ტიპი (ტექსტი მითითებულია აქ
    რომელსაც მომხმარებელი დაინახავს სლაიდების ტიპის შერჩევის სიის გვერდით)
  • მრავალი ფორმატის ველი- ტიპი
  • მრავალი Formtabs Optionstext- გამოსახულებით ფონზე
  • Multiple Formtabs Optionsvalue- გამოსახულება
• ჩანართი სვეტები
  • ველი Სვეტები.ორი ელემენტის დამატება
    1. სათაური
       • ჩანართი სვეტი
         • სათაური- სათაური
         • ველისათაური
       • ჩანართი უჯრედის რედაქტორი
         • რედაქტორი- this.textEditor
    2. აღწერა
       • ჩანართი სვეტი
         • სათაური- აღწერა
         • ველი- აღწერა
       • ჩანართი უჯრედის რედაქტორი
         • რედაქტორი- this.textEditor

როგორც უკვე შენიშნეთ, პირველ ორ კონფიგურაციაში ჩვენ არ შეგვიქმნია ე.წ. სვეტები გამოსასვლელად სამართავ პანელში, ე.ი. თავად ტელევიზორის პარამეტრის რედაქტირებისას. ეს სვეტები უნდა შეიქმნას ამ უკანასკნელში, ე.ი. კონფიგურაციაში, რომელიც მითითებული იქნება ტელევიზორში და რომელშიც ველში მრავალი ფორმატის ჩანართიჩანართი ფორმატის ჩანართებიჩამოთვლილი იქნება ყველა კონფიგურაცია, რომელიც ჩვენ გვჭირდება, მათ შორის იგივე კონფიგურაცია

მოდით წავიდეთ და სწრაფად შევქმნათ ტელევიზორი შეყვანის ტიპის migx , ველში კონფიგურაციებიდაწერეთ ჩვენი კონფიგურაციის სახელი, ე.ი. სლაიდერი, მიანიჭეთ საჭირო შაბლონები და გახსენით რესურსი რედაქტირებისთვის, ან შექმენით იგი. თუ ყველაფერი სწორად გავაკეთეთ, მაშინ უნდა ვნახოთ შემდეგი სურათი:

სურათის დაწკაპუნება შესაძლებელია და თუ თქვენ უკვე უყურეთ გიფს ჩანაწერის დასაწყისში მოცემული ბმულიდან, მაშინ ეს არის ის.

ჩვენ სწრაფად ვავსებთ მონაცემებს და გადავდივართ ჩვენი სლაიდების გამოსავალზე.

როგორ ამოიღონ?

მონაცემთა შეყვანა კარგია, მაგრამ რაც შეეხება გამომავალს? ნუ ღელავთ ამხანაგებო, ყველაფერი კარგად იქნება. გამოსასვლელად, ჩვენ ისევ გვაქვს 2 კარგი ვარიანტი, და განვიხილეთ ორივე ვარიანტი ში, ეს არის MIGX-ის მშობლიური სნიპეტი getImageListდა ყოვლისშემძლე ფენომენი. ვნახოთ, როგორ გამოიყურება ჩვენი მონაცემები:

getImageList

მოდით გამოვიძახოთ ფრაგმენტი tpl პარამეტრის მითითების გარეშე, რათა ნახოთ ნედლეული მონაცემები:

[] მასივი ( => 14 => სურათი => ფაილები/avatar.png => ეს არის სლაიდი გამოსახულებით => მოკლე აღწერა) [_alt] => 0 [_first] => 1 [_last] => => 1 = > სლაიდერი) მასივი ( => 15 => ვიდეო => ფაილები/ჩემი სახლი სამარცხვინოა. MOV => და ეს არის ვიდეო => დიახ, ნამდვილად! [_alt] => 1 [_first] => [ _ბოლო] => => 2 => სლაიდერი) მასივი ( => 16 => მყარი => ff0000 => და წითელი მშვენიერი ფერია აქ => მომწონს! [_alt] => 0 [_first] => [_ბოლო ] => 1 => 3 = > სლაიდერი)

ფენომენი

($_modx->resource.slider| fromJSON | ბეჭდვა) Array ( => Array ( => 14 => image => files/avatar.png => ეს არის სურათის სლაიდი => მოკლე აღწერა)) => მასივი ( = > 15 => ვიდეო => ფაილები/ჩემი სახლი სამარცხვინოა. MOV => და ეს უკვე ვიდეოა => დიახ, ნამდვილად!) => მასივი ( => 16 => მყარი => ff0000 => და აქ არის წითელი ლამაზი ფერია => მომწონს!))
როგორც ვხედავთ, ჩვენს მასივებში, სხვა საკითხებთან ერთად, გასაღები ტიპიიმ მნიშვნელობებით, რომლებიც ჩვენ დავაზუსტეთ კონფიგურაციის შექმნისას.

იმისათვის, რომ აჩვენოთ ჩვენი სლაიდერი getImageList, ჩვენ უნდა შევქმნათ 3 ბლოკი ჩვენი ძირითადი მნიშვნელობების სახელებით ტიპი, ანუ : გამოსახულება , ვიდეო და მყარი . შემდგომ გაიგებთ რატომაც.

ნაჭერი მაგალითები:

// ცალი გამოსახულება

// ნაჭერი ვიდეო // ნაჭერი მყარი
და ზარი ასე უნდა გამოიყურებოდეს:

აქ ჩვენ ვიღებთ მნიშვნელობებს თითოეული სლაიდის მასივებიდან და ამიტომ შევქმენით სამი ბლოკი, რომელთა სახელები ემთხვევა ველების მნიშვნელობებს მრავალი ფორმატის ველი

კარგად, ჩართეთ ფენომენიყველაფერი ბევრად უფრო მარტივი ჩანს:

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

(/თუ)

შედეგი და დაპირებული ამბავი

როგორც ვხედავთ, MIGX უმკლავდება ამ დავალებას, თუ არა "შესანიშნავი", მაგრამ მაინც "კარგი". კიდევ ერთხელ ვიმეორებ, რომ MIGX არ გზღუდავთ კონფიგურაციების რაოდენობაში, ჩანართებში თითოეულ კონფიგურაციაში და მათში ველების რაოდენობაში. და მაგალითები, როგორც უკვე იმედია მიხვდით, საკმაოდ მარტივია, ასე რომ თქვენ ასევე შეგიძლიათ მარტივად გაეცნოთ ამ ფუნქციას. და კიდევ რაღაც მნიშვნელოვანი: ნაწილაკების გამოტანისას, მე გირჩევთ შეამოწმოთ ველების სისრულე და ყოველთვის გავითვალისწინოთ, რომ მონაცემები შეიძლება იყოს ან არ იყოს შევსებული ან რაიმე მიზეზით არ მოვიდეს და, შესაბამისად, გამოიყენოთ phx ფილტრები MODX სინტაქსისთვის. ან პირობები ფენომში.

მადლობა ყველას ყურადღებისთვის, ყველას წარმატებებს ვუსურვებ, მაგრამ არა, რადგან, როგორც ამბობენ: "დამარცხებულებს წარმატებას ვუსურვებ", ასე გისურვებ ბედნიერებას და ჯანმრთელობას ან რაღაცას, მაგრამ ვის აინტერესებს, მერე ამბავი. .

ერთხელ ჩემი ახლობლები მოვიდნენ ჩვენთან, მათ შორის ჩემი ძმისშვილი (ჩემი დის შვილი). მეზობელი ქვეყანადა ჩემი ორი ძმისშვილი (ჩვენ თითქმის ყველა ერთი ასაკის ვართ). აგარაკი, მზიანი შუა აზია, პატარა მთა და მდინარე ახლოს. იმავე ღამეს ჩვენ ოთხმა გადავწყვიტეთ გასეირნება სწორედ ამ მდინარეზე და თავიდან ყველაფერი მშვიდად იყო, მღელვარების მიზეზი არ იყო. ისინი ძალიან მხიარულობდნენ, უყვებოდნენ ისტორიებს (ზოგჯერ საშინელი და შემზარავი), ხუმრობდნენ და მსგავსი რაღაცეები. მაგრამ ერთ მომენტში შევამჩნიე, რომ ჩემი ერთ-ერთი ძმისშვილი გაფერმკრთალდა და ეს არ არის მხოლოდ სიტყვიერი შემობრუნება ან გაფორმება, რადგან ასეთი შიში და დაბნეულობა არასოდეს მინახავს ადამიანის სახეზე ამ ინციდენტამდე და მის შემდეგ. თვალი არ მოუშორებია, იმ მიმართულებით გაიხედა, სადაც ზურგი მქონდა მოქცეული, ე.ი. თითქოს რაღაცას ან ვიღაცას უყურებდა ჩემს უკან, მაგრამ არა პირდაპირ უკან და ახლოს, მომეჩვენა, რომ სადღაც შორს იყურებოდა. საშინელი იყო და ვკითხე: - რა მოხდა? Და ის…

ამ აბზაცში მოგიწევს იმის პრეტენზია, რომ ამ ჩანაწერში მოცემულ ამბავს აქვს გაგრძელება, მაგრამ სინამდვილეში მე ცოტა მოგატყუე, იმ იმედით, რომ ტექნიკური, მოსაწყენი და დიდი ტექსტიდან ოდნავ გაგამხიარულებ და კარგ მდგომარეობაში იქნები. განწყობა. თავად ამბავი რეალურია და ძალიან საინტერესო. ახლა კი მადლობა ყველას ყურადღებისთვის!

UPD:
თუ რა ვარ ბაჰა!?

თუ მოულოდნელად ვინმეს სურს მადლობა გადაუხადოს რუბლს, მაშინ ასეც იქნება: Sberbank ბარათი +79609354545

ამ გაკვეთილზე ჩვენ გავაშუქებთ MIGX-ის საფუძვლებს და ვიმუშავებთ ახალ სლაიდერზე, რომელიც შეგიძლიათ გამოიყენოთ თქვენს ბლოგზე.

მოთხოვნები:

• MODX Revolution ვებსაიტზე.
• დაინსტალირებულია MIGX პერსონალური შაბლონის ცვლადის ტიპი (პაკეტის მართვის საშუალებით).
• გალერეის სლაიდერი ან სკრიპტი, რომლის ინტეგრირებაც გვსურს. მე გამოვიყენე WooThemes' FlexSlider, რადგან ის არეგულირებს თავის თავს კონტეინერის სიგანეზე (ძალიან მნიშვნელოვანია საპასუხო დიზაინისთვის!). ის ასევე ძალიან კონფიგურირებადია, მხარს უჭერს სქროლვას სმარტფონებზე და კარგად გამოიყურება ყუთიდან.
• დაინსტალირებულია phpthumbof ფრაგმენტი Package Manager-ის მეშვეობით სურათების ავტომოჭრისთვის.
• ნებისმიერი სურათი!

დაწყება

ნამუშევარი იყენებს რამდენიმე ნაწილს. ჯერ უნდა დავაყენოთ MIGX TV და უნდა ავიღოთ ეს მონაცემები წინა ბოლოდან და გავააქტიუროთ ჩვენი სლაიდერი. ეს გაკვეთილი ითვალისწინებს FlexSlider-ის გამოყენებას, ჩვენ დავრწმუნდებით, რომ მარკირება არის ის, რაც მას სჭირდება, მაგრამ ასევე ძალიან მარტივი უნდა იყოს სხვა სლაიდერებთან ადაპტირება.

ნაბიჯი 1: დააინსტალირეთ MIGX TV სურათების მართვისთვის

დავიწყოთ ტელევიზორის დაყენებით. MIGX-ის სიძლიერე ის არის, რომ თქვენ შეგიძლიათ განსაზღვროთ თქვენთვის საჭირო ველები. თქვენ დაინახავთ მათ როგორც ცხრილს და მხოლოდ სათაურების დასახელება გჭირდებათ. ამ შემთხვევაში მე დამჭირდება სამი განსხვავებული ველი:

• შეყვანის ველი ფაილურ სისტემაში გამოსახულების ასარჩევად (ან 2.2-ში თქვენი მედია წყაროებიდან).
• ტექსტის შეყვანის ველი წარწერის/ტეგის/აღწერის შესაყვანად. FlexSlider შესანიშნავ საქმეს აკეთებს წარწერებით, ამიტომ ჩვენ მათ გამოვიყენებთ.
• ასევე დავამატე ტექსტის შეყვანა "Set"-ისთვის. როგორც მოგვიანებით დავინახავთ, მას გამოვიყენებ უსასრულო რაოდენობის ინდივიდუალური სლაიდერებისთვის, რომლებიც დაემატება რესურსის ნებისმიერი ადგილიდან..

თუ გსურთ, შეგიძლიათ გამოიყენოთ სხვა ველები, მაგრამ სახელმძღვანელო გამოიყენებს ზუსტად იმ ველებს, რომლებიც ზემოთ ჩამოვთვალე.

გადავიდეთ ტელევიზორის შექმნაზე. აქ არის სლაიდერი სურათების აღწერით (იმ შემთხვევაში, თუ მინიატურაზე არაფერი ჩანს).

შექმენით ახალი შაბლონი ცვლადი ელემენტების ჩანართში და მიეცით მას შესაბამისი სახელი. მე მას დავარქმევ ws.images, თუ თქვენ საკუთარ სახელს დაარქვით, არ დაგავიწყდეთ შეცვალოთ [[*ws.images]] თქვენი სახელით. შეყვანის პარამეტრების ჩანართში აირჩიეთ "migx" ტიპი ჩამოსაშლელი მენიუდან. თუ ამ ტიპს ვერ ხედავთ, მაშინ შეამოწმეთ, დააინსტალირეთ თუ არა MIGX პაკეტი Package Manager-ის მეშვეობით. თქვენ შეამჩნევთ, რომ რამდენიმე ვარიანტი დაემატა ეკრანის ბოლოში, მათ შორის Form Tabs და Grid Columns. ეს ეხება MODX >2.0-ს, ადრინდელი ვერსიებისთვის მე გირჩევთ განახლებას.

გთხოვთ, გაითვალისწინოთ, რომ Form Tabs და Grid Columns ველები უნდა იყოს შევსებული სწორი JSON სტრიქონებით. JSON ძირითადად არის ობიექტების, მასივების ან გასაღები->მნიშვნელობების კომბინაციების ჩვენების საშუალება ისე, რომ მხარს უჭერს თითქმის ნებისმიერი პროგრამირების ენა. აქ არის ტექნიკური სპეციფიკაცია და რამდენიმე მაგალითი JSON ოფიციალური საიტიდან.

ფორმის ჩანართების დაყენება

ფორმა საშუალებას გაძლევთ გამოიყენოთ სხვადასხვა ჩანართები. თითოეულ ჩანართს აქვს აღწერა და რამდენიმე ველი. ამით შეგიძლიათ ბევრი მოწინავე საქმის გაკეთება, რადგან უმეტეს დროს იყენებთ ერთ ჩანართს, ასე რომ დაიმახსოვრეთ ახლა. აქ არის JSON კოდი იმ ფორმის ჩანართებისთვის, რომელსაც ვიყენებ:

[("სუბტი":"სურათი", "ველები": [ ("ველი":"კომპლექტი", "სუბტი":"დაყენება"), ("ველი":"აღწერილობა","სათაური":"აღწერა") , ("ველი":"სურათი", "სათაური":"სურათი","inputTVtype":"სურათი") ] )]

მოდით გავიაროთ თითოეული ხაზი:

• პირველი აჩვენებს ჩანართის მასივის გახსნას კვადრატული ფრჩხილით ([), ხოლო ჩანართის ობიექტს ხვეული ფრჩხილით ((). ამის შემდეგ ჩვენ განვსაზღვრავთ სურათის ველის წარწერას. გაითვალისწინეთ, რომ თქვენ უნდა გამოიყენოთ ორმაგი ბრჭყალები (" ") თვისებებისთვის და მათი მნიშვნელობებისთვის, ერთეულებმა შეიძლება გამოიწვიოს მოულოდნელი შედეგები. თუ თქვენ გაქვთ ეს ფრჩხილები ნებისმიერ თვისებებში, მნიშვნელობებში, გამორთეთ მათ დახრილი (\). აღწერის (სათაური) განსაზღვრის შემდეგ გავაგრძელოთ და დავიწყოთ განსაზღვრა. "ველების" მასივი, გახსენით იგი კვადრატული ფრჩხილებით ([) .
• ჩვენ განვსაზღვრავთ ჩვენს პირველ ველს, როგორც ნაკრები. "field": "set" ნიშნავს, რომ ჩვენ გვინდა, რომ ამ ველში შევიდეს უბრალო ტექსტი. „სათაური“:“Set“ - ჩვენ ვაძლევთ სახელს „კომპლექტს“ - ეს იქნება მარტივი ტექსტის შეყვანის სახელი. შემდეგი, მიეცით წარწერა "Set", რომელიც ნაჩვენები იქნება ფორმაზე, როგორც ველის ლეიბლი.
• შემდეგი, განსაზღვრეთ აღწერის ველი იმავე გზით
• ხაზი 4 განსაზღვრავს სურათს. აქ განსაკუთრებული ის არის, რომ შეყვანის ტიპად ვიყენებთ სხვა ტელევიზორს (სახელად "სურათი"). ეს არის MIGX-ის ძალიან ძლიერი თვისება, რომელიც საშუალებას გაძლევთ გამოიყენოთ სხვა ტელევიზორები თქვენი ფორმის შესაქმნელად. ამ შემთხვევაში ტელევიზორის "გამოსახულება" ძალიან მარტივია: შეყვანის ტიპი არის გამოსახულება, ხოლო 2.2-ში შეგიძლიათ მივანიჭოთ ის სწორ მედია წყაროს. თქვენ არ გჭირდებათ მისი ასოცირება შაბლონებთან, როგორც ამას გააკეთებთ ჩვეულებრივ ტელევიზორთან. ამის გაკეთების კიდევ ერთი გზა (რომელსაც მე ვიყენებ სხვა MIGX ტელევიზორებზე) არის რადიო ყუთების დამზადება ან ყუთების შერჩევა.
• მეხუთე ხაზი ხურავს ველების მასივს. ასევე გაითვალისწინეთ, რომ ველის (სურათის) განმსაზღვრელი ბოლო ხაზი არ მთავრდება მძიმით - ეს მნიშვნელოვანია! თუ მასივში მძიმით დააყენებთ, JSON არ იქნება გაანალიზებული და თქვენი ფორმა არ იმუშავებს.
• მეექვსე ხაზი ხურავს ჩანართის ობიექტს და ჩანართების მთელ მასივს.

ასე რომ, ამ გზით ჩვენ შევქმენით "იმიჯ" ტელევიზია! თქვენ უკვე უნდა გქონდეთ ფორმა, რომ შეავსოთ მონაცემები, მაგრამ გჭირდებათ მარკირება მის საჩვენებლად...

სვეტის მარკირების დაყენება

სვეტის განლაგება არის ცხრილი რესურსის ტელევიზორის პანელზე. თქვენ უნდა განსაზღვროთ სათაურები ამ ცხრილისთვის Column Markup შეყვანის პარამეტრების მეშვეობით. აქ არის (კიდევ ერთხელ JSON) განმარტება, რასაც ვიყენებ: [( "header": "Set", "დახარისხებადი": "true", "dataIndex": "set" ), ( "header": "Description" , "დახარისხებადი" : "true", "dataIndex": "description" ),( "header": "Image", "sortable": "false", "dataIndex": "image","renderer": "this. RenderImage")]

მოდით გავიაროთ თითოეული ხაზი:

• გახსენით სათაურის მასივი კვადრატული ფრჩხილებით ([) და მეხუთე სვეტის სათაური ხვეული ფრჩხილებით (().
• სათაურს ვასახელებთ "Set", მივუთითებთ, რომ ის შეიძლება იყოს დასალაგებელი (დახარისხებადი) და ვაზუსტებთ "set" პარამეტრს, რომელიც შეესაბამება Set Form Tabs-ის განმარტებას, რომელსაც აქვს "field":"set".
• ნაკრების დასასრული / აღწერის დასაწყისი
• სათაურს ვასახელებთ "Description", დასალაგებლად და ვამთხვევთ ველის აღწერილობის dataIndex-ს.
• დასასრულის აღწერა / საწყისი სურათი
• დაასახელეთ სათაური "Image", unsortable და დაასახელეთ dataIndex - image ველზე. ჩვენ ასევე განვსაზღვრავთ რენდერს, რომელიც ExtJS-ში საშუალებას მოგცემთ შეცვალოთ გამომავალი მონაცემების გარეგნობა. ამ შემთხვევაში "this.renderImage" რენდერი ავტომატურად აიღებს არჩეული სურათის url-ს და მის ნაცვლად გამოიმუშავებს ესკიზს.
• Image ობიექტის დასასრული და სათაურების მასივი.

ამის შემდეგ შეგიძლიათ მინიჭოთ ეს MIGX ტელევიზორი თქვენს შაბლონს და შეამოწმოთ შედეგი. მარკირება არ ჩანს? დაუბრუნდით ჩანართებს და დარწმუნდით, რომ ყველა მნიშვნელობა ჩასმულია ორმაგ ბრჭყალებში და არა ერთ ბრჭყალებში და შეამოწმეთ დამატებითი მძიმეები.

ინფორმაცია

JSON-ის დასადასტურებლად გამოიყენეთ JSONLint.

• შეავსეთ დეტალები
• შეიტანეთ მონაცემები საიტზე

შეავსეთ ჩვენი ws.image შაბლონის ცვლადი თვითნებური მონაცემებით

თუ ცდილობთ აჩვენოთ ეს მონაცემები, როგორც ჩვეულებრივი ტელევიზორი, დაინახავთ მსგავსი რამ:

[( "MIGX_id":"1","set":"set1","description":"მონიშნე კატა, რომელიც იპარავს ძეხვს და ჭამს, როცა გაღვიძებულია","image":"demo/uroki/15/1 .jpg" ),( "MIGX_id":"2", "set":"set1", "description":"drum","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":"შეგიძლია მოკლა კაცი ამ წიგნით","image":"demo/uroki/15/4.jpg" )]

ეს არის JSON მასივი შეყვანილი ველებით და მნიშვნელობებით!

ვინაიდან MIGX მოყვება getImageList სნიპეტი, შეგიძლიათ სცადოთ მონაცემების ჩვენება მისი გამოყენებით. ამ ფრაგმენტის დოკუმენტაცია შეგიძლიათ იხილოთ აქ. ან შექმენით თქვენი საკუთარი ფრაგმენტი (parseMIGXToGallery), რომელსაც ვიყენებ მარკირების შესაქმნელად &tpl ბლოკიდან ტელევიზორის მონაცემებზე დაყრდნობით:

fromJSON ($input); $output = მასივი(); თუ (!$input || ცარიელი($tpl)) დააბრუნეთ "არა პერსონალი"; foreach ($input, როგორც $row) ( if (isset($set) && !empty($set) && ($set != $row["set"])) გაგრძელება; $output = $modx->getChunk($ tpl, $row); ) return implode("\n", $output);

მოდით გავიაროთ თითოეული ხაზი:

• ჩვენ ვიღებთ $input ცვლადს (რომელიც იღებს &input პარამეტრში შემავალ მონაცემებს სნიპეტის გამოძახებაში, ამის შესახებ უფრო მოგვიანებით) და ვანაწილებთ JSON-ს php მასივში.
• ჩვენ დავაყენებთ ცარიელ მასივს ჩვენი გამომავალი შესანარჩუნებლად.
• მოდით დავრწმუნდეთ, რომ $input ცვლადი არ არის NULL ან False, რაც ნიშნავს, რომ JSON არ იქნა გადაცემული ან არასწორია, ასევე შეამოწმეთ თუ $tpl ცვლადი (გადასული &tpl პარამეტრის მიერ სნიპეტის ზარში) ცარიელი არ არის. თუ რომელიმე პირობა არის True, ჩვენ დავბეჭდავთ შეცდომის შეტყობინებას "ცარიელი", რომელიც იქნება მინიშნება კონტენტის მენეჯერისთვის, რომ რაღაც არასწორია.
• შემდეგი, გაიმეორეთ $input მასივის თითოეული ელემენტის $ სტრიქონის სახით.
• ჩვენ ვამოწმებთ არის თუ არა $set ცვლადი დაყენებული (რომელიც დაყენებულია snippet ზარში &set პარამეტრში) და თუ ის ცარიელი არ არის ვამოწმებთ მის მნიშვნელობას მიმდინარე მწკრივის "set" მნიშვნელობის წინააღმდეგ. თუ ეს არ არის ის, რაც გსურთ, გადადით მასივის შემდეგ ელემენტზე.
• ჩვენ ვიღებთ ნაწილს სახელად $tpl და ჩავსვამთ მასში მიმდინარე მწკრივის მნიშვნელობებს, როგორც ჩანაცვლების ადგილს.
• ჩვენ ვხურავთ foreach loop.
• და ბოლოს, $output მასივს ვაწებებთ ერთმანეთს, თითოეულ ელემენტს ვყოფთ ხაზის წყვეტით და გამოვატანთ მას გვერდზე.
• ასე რომ, ზემოაღნიშნულის შეჯამებით, ჩვენ ვიღებთ შეყვანას, ვიმეორებთ თითოეულ მწკრივს და ვამოწმებთ, ეკუთვნის თუ არა ის ჩვენს მიერ განსაზღვრულ ნაკრებს, შემდეგ ის იღებს ნაწილს და ამატებს ყველაფერს გამომავალს.
• გაშვების ფრაგმენტი

ჩვენ გვჭირდება მხოლოდ ფრაგმენტის ზარი, სადაც გვჭირდება ჩვენი სურათები და ბლოკი, რომელიც ყველაფერს სწორად გამოსცემს FlexSlider-ისთვის. აი, როგორ ჰქვია ნაწყვეტს:

[]` &set=`set1` ]]

და images.gallery.tpl ნაწილი:

[[+ აღწერა]]

თქვენ ასევე უნდა გადაიტანოთ მთელი სნიპეტის გამომავალი div-ში და შეუკვეთელ სიაში, FlexSlider-ის დოკუმენტაციის მიხედვით. ყველაფრის გასაადვილებლად, მოდით, ეს ყველაფერი ერთ ნაწილად დავდოთ. ჩემს ნაწილს ჰქვია სლაიდერი და შეიცავს შემდეგს:

ამ ნაწილის გამოყენებით, მე შემიძლია უბრალოდ მივაწოდო რაღაც კონტენტში, რომლის დამახსოვრება ან მოტყუების ფურცელში ჩასმა ბევრად უფრო ადვილია.

[[$slider?set='კომპლექტის სახელი']]

ახლა თქვენ შეგიძლიათ დაიწყოთ FlexSlider-ის განლაგება.

ნაბიჯი 3: FlexSlider-ის გამოყენება

FlexSlider შედარებით მარტივი გამოსაყენებელია (ჩამოტვირთეთ მისი ფაილები) და მის ვებსაიტზე უამრავი მაგალითია. თქვენ ასევე უნდა შეიტანოთ ზარი jQuery-ზე გვერდზე და მის CSS ფაილში (შეფუთული zip ფაილში) და FlexSlider მოდული (ასევე zip არქივში). ამის შემდეგ, თქვენ უნდა ჩართოთ სწორი ელემენტი შემდეგი კოდის გამოყენებით:

საიტი გვირჩევს, ყველაფერი ფაილის თავში ჩადო, მაგრამ მე პირადად ბოლოში ვდებ ყველაფერს. თუ თქვენი სლაიდერი ნაჩვენებია გვერდის ზედა ნაწილში, მაშინ უმჯობესია განათავსოთ იგი ისე, რომ ის იტვირთება გვერდის გამოჩენამდე, ამიტომ განათავსეთ ის სადაც გსურთ.

Სულ ეს არის! ვიმედოვნებ, რომ ეს გრძელი სტატია დაეხმარება ვინმეს დაიწყოს MIGX-ისა და სლაიდერების გამოყენება, როგორიცაა FlexSlider!

დღეს პატარა სტატია როგორ შევქმნათ სლაიდერი modx-ში BanerY პაკეტის გამოყენებით. ამ პაკეტის ჩამოტვირთვა და ინსტალაცია შესაძლებელია საცავიდან.

სლაიდერის შექმნა BanerY-ით

ასე რომ, არის სტატიკური სლაიდერი, დაე ეს იყოს ჩვეულებრივი ჩატვირთვის სლაიდერი, ამ მარკირებით:

მიზანია შექმნათ მართული სლაიდერი ამ მარკირებიდან. Დავიწყოთ.

დავიწყოთ BannerY-ში სლაიდების შექმნით, ამისთვის გადავდივართ Applications - BannerY - Positions-ზე და ვქმნით პოზიციას (მაგალითად, home-slider).

ამის შემდეგ გადადით ბანერების ჩანართზე და დააჭირეთ ღილაკს ახალი ბანერი. გაიხსნება ფანჯარა ახალი ბანერის შესაქმნელად.

ჩვენ ვავსებთ ყველაფერს:

• სახელი, მისი ჩვენება შესაძლებელია [[+name]] გამოყენებით.
• აირჩიეთ სურათი - [[+სურათი]].
• მიუთითეთ URL სად წავიდეთ - [[+url]].
• შეავსეთ აღწერა - [[+აღწერილობა]] - აქ, სხვათა შორის, შეგიძლიათ დატენოთ არა მხოლოდ ტექსტი, არამედ ჩვეულებრივი html და ეს მაგარია.
• კარგად, აირჩიეთ პოზიცია (ადრე შევქმენით).

ასე რომ, ჩვენ ვქმნით სლაიდების საჭირო რაოდენობას.

ახლა თქვენ უნდა დაარღვიოთ ზემოაღნიშნული მარკირება ნაწილებად და მოათავსოთ კოდი ნაწილებში BanerY სინტაქსში

შექმენით ნაწილი ცალკე სლაიდერისთვის კლასით აქტიური, იყოს სლაიდიდა შეიტანეთ სინტაქსი მასში:

ახლა დააკოპირეთ ეს ნაწილი და დაარქვით სახელი სლაიდი2და ამოიღეთ კლასი აქტიური

ისე, ფაქტობრივად, რჩება მხოლოდ სლაიდების ჩვენება.

[]

შედეგად, ჩვენ ვიღებთ შემდეგს:

ეს ასეა) ძალიან მარტივია სლაიდერის შექმნა modx-ზე BanerY-ის გამოყენებით.

დიახ, სხვათა შორის, მისი დოკუმენტაცია აქ არის: docs.modx.pro/components/bannery/snippet

Slider Revolution არის ერთ-ერთი ყველაზე პოპულარული სლაიდერი ფუნქციების უზარმაზარი სპექტრისა და გამოყენების სიმარტივის გამო.
ThemePunch-დან. ეს სლაიდერი იყიდა 273,441+ ჯერ და გამოიყენება 2500000+ საიტის მიერ მთელ მსოფლიოში.

ქვემოთ ჩამოთვლილია ამ სლაიდერის ზოგიერთი მთავარი უპირატესობა, რაც განასხვავებს მას უფასო და
ყველაზე პრემიუმ ანალოგები:

• ძლიერი ვიზუალური რედაქტორი - დააკონფიგურიროთ სლაიდერი დისპლეი თქვენი პროექტის საჭიროებებისთვის, მოსახერხებელი მენიუს მეშვეობით, რომელშიც
  ყველა ფუნქცია თავის ადგილზეა. მკაცრი გრადაცია არ მოგცემთ დაბნეულობის საშუალებას. ერთადერთი სირთულე იმაში
  პირველად იქნება სურვილი გამოსცადო ისინი ყველა.
• თითოეული სლაიდის ცვალებადობის კონტროლი - ბლოკების დაგეგმილი ჩვენება კომპიუტერის, ტაბლეტის და ტელეფონის ეკრანზე
  ნაჩვენებია ვიზუალურ რედაქტორში. თქვენ შეგიძლიათ შეცვალოთ სლაიდების ზომა ინდივიდუალურად თითოეული მოწყობილობისთვის.
  საპასუხო შაბლონი არ დაუშვებს სურათების და ვიდეოების დამახინჯებას ან საჭიროზე მეტ ადგილს დაიკავებს
  მოსახერხებელი ყურება.
• მუშაობა სოციალურ ქსელებთან და ვიდეო ჰოსტინგთან - Slider Revolution მეხუთე თაობა საშუალებას გაძლევთ ჩართოთ სლაიდერში
  მონაცემები Instagramm, Facebook, Flickr, Twitter, Vimeo და Youtube-დან. თუ გეგმავთ ვიდეოს დამოუკიდებლად გამოქვეყნებას
  სერვერზე, შეგიძლიათ გამოიყენოთ HTML5 ენა. კოდის ნაწილები ავტომატურად დაიწერება.
• მაღალი შესრულება და სლაიდების ოპტიმიზაცია - მოდული სწრაფად მუშაობს რედაქტირების რეჟიმში და ამცირებს
  სლაიდერის წონა შინაარსის ხარისხის დაკარგვის გარეშე. თქვენ არ გჭირდებათ ფიქრი ხანგრძლივი გვერდის ჩატვირთვის დროზე. რა არის განსაკუთრებით
  შესაბამისი მობილური მოწყობილობებთან მიმართებაში, რომლებიც მიუწვდომელია WiFi კავშირებისთვის.
• სლაიდების გადასვლისას სპეციალური ეფექტების დიდი რაოდენობა
• ბევრი ანიმაციური ეფექტი ტექსტის, ვიდეოს და სურათების ჩვენებისას
• ვიდეოს ავტომატურად დაწყება საიტის გახსნისას ან ხელით, არჩევანის გაკეთება, სლაიდერის გაჩერება ვიდეოს ყურებისას,
  გადახვევა და ა.შ.
• ნავიგაციის პარამეტრების დიდი არჩევანი
• ჩადეთ პოსტის განცხადებები ბმულებით პირდაპირ სლაიდერში, სანამ ის კონფიგურირებულია seo ოპტიმიზაციისთვის
• Google Fonts-ის მხარდაჭერა და ინსტალაცია
• მრავალი ფენის (სურათების, ვიდეოების, წარწერების და ბმულების) გამოყენება ერთ სლაიდში, მათგან უთვალავია.
  გადაფარეთ ერთმანეთი, რითაც შექმნით რეალისტურ ვიდეოს ან რაიმე პრეზენტაციას.

ყურადღება!იმისათვის, რომ შეძლოთ ონლაინ პრემიუმ სლაიდერის შაბლონების და ბიბლიოთეკის ობიექტების ჩამოტვირთვა, თქვენ უნდა იყიდოთ ცალკე ლიცენზია ThemePunch-ისგან, რომელიც ამ ტექსტის დაწერის დროს ღირს 19$ და შემდეგ გაააქტიუროთ ის შესყიდვის კოდის შეყვანით მითითებულ ველში. ქვემოთ მოყვანილი ფიგურა.

ვიდეო მიმოხილვა modSliderRevolution

დღეს ჩვენ განვიხილავთ, თუ როგორ შევქმნათ Bootstrap სლაიდერი MIGX-ის გამოყენებით. სწავლის დაწყებამდე გირჩევთ პირველ რიგში ეწვიოთ ამას.

MIGX კონფიგურაციის შექმნა

მე მივდივარ მენეჯმენტში MIGXდა დაამატეთ ახალი ელემენტი სახელად სლაიდერიჩანაცვლების ველში ჩაწერეთ " სლაიდების დამატება"და გადადით ჩანართზე" ფორმატის ჩანართები».

• სფეროს სახელი - სათაური, წარწერა - სათაური.
• ველის სახელი - სლაიდი, წარწერა - სლაიდი, შეყვანის ტელევიზორის ტიპი - სურათი.
• ველის სახელი - აღწერა, წარწერა - აღწერა.
• ველის სახელი - idstranici, წარწერა - მიუთითეთ დოკუმენტის იდენტიფიკატორი, რომელსაც უნდა დაუკავშირდეთ.

• სათაური - სათაური, ველი - სათაური.
• ჰედერი - სლაიდი, ველი - სლაიდი, რენდერი - this.renderImage.
• სათაური - აღწერა, ველი - აღწერა.
• Header - დოკუმენტის id, ველი - idpage.

Შენიშვნა:არსებითად, ჩვენ გადავიტანთ ელემენტებს Formtabs-დან. დიახ, ასევე შეგიძლიათ შეავსოთ ველები სვეტის სიგანე - სვეტების სიგანე.

შენახვა (შეასრულეთ).

მათთვის, ვისაც საერთოდ არ სურს ბანაობა, ჩვენ ვქმნით ცარიელ კონფიგურაციას და მასში ექსპორტს ვაკეთებთ შემდეგ კოდს:

("formtabs":[ ("MIGX_id":1, "saption":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0430\u0430\u0430\u04"tab ", "print_before_tabs" ":"0", "ველები":[ ("MIGX_id":1, "ველი":"სათაური", "წარწერა":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432 \u043e\u043a" , "აღწერა":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u043b\u043b\u04_co", "description" de , "inputTV": "", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config" , "sources": "", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":1 ), ("MIGX_id":2, "field":"slide ", "caption" :"\u0421\u043b\u0430\u0439\u0434", "description":"", "description_is_code":"0", "inputTV":"", "inputTVtype":"image", " Validation":"" , "configs":"", "restrictive_condition":"", "ჩვენება":"", "sourceFrom":"config", "sources":"", "inputOptionValues":"", " ნაგულისხმევი":"" , "useDefaultIfEmpty":"0", "pos" :2 ), ("MIGX_id":3, "ველი":"აღწერილობა", "წარწერა":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435", "აღწერა":"", " description_is_code":"0", "inputTV":"", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "ჩვენება":"", " sourceFrom":"config", "sources":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":3 ), ("MIGX_id":4, "field":"idstranici", "caption":"\u0423\u043a\u0430\u0436\u0438\u0442\u0435 id \u0434\u043e\u043a\u0443\u043c\u040u045 "description" inputTV":"", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config", " sources":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":4 ) ], "pos":1 ) ], "contextmenus":"" , "actionbuttons":"", "columnbutton s":"", "ფილტრები":"", "გაფართოებული":( "migx_add":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u043\u0430 u044b", "disable_add_item":"", "add_items_directly":"", "formcaption":"", "update_win_title":"", "win_id":"", "maxRecords":"", "addNewItemAt":" bottom", "media_source_id":"", "multiple_formtabs":"", "multiple_formtabs_label":"", "multiple_formtabs_field":"", "multiple_formtabs_optionstext":"", "multiple_formtabs_optionsvalue":"", "actionbuttonsperrow" , "winbuttonslist":"", "extrahandlers":"", "filtersperrow":4, "packageName":"", "classname":"", "task":"", "getlistsort":"", " getlistsortdir":"", "sortconfig":"", "gridpagesize":"", "use_custom_prefix":"0", "prefix":"", "grid":"", "gridload_mode":1, "check_resid" ":1, "check_resid_TV":"", "join_alias":"", "has_jointable":"დიახ", "getlistwhere":"", "joins":"", "hooksnippets":"", "cmpmaincaption" :"", "cmptabcaption":"", "cmptabdescription":"", "cmptabcontroller":"", "winbuttons" ":"", "onsubmitsuccess":"", "submitparams":"" ), "სვეტები":[ ("MIGX_id":1, "header":"\u0417\u0430\u0433\u043e\u043b\u043e\ u0432\u043e\u043a", "dataIndex":"header", "width":100, "დახარისხებადი":"false", "show_in_grid":1, "customrenderer":"", "renderer":"", " clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "რედაქტორი":"" ), ("MIGX_id":2, "header":"\u0421\ u043b\u0430\u0439\u0434", "dataIndex":"slide", "width":100, "დახარისხებადი":"false", "show_in_grid":1, "customrenderer":"", "renderer":"ეს .renderImage", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" ), ("MIGX_id":3, "header" :"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435", "dataIndex":"აღწერა", "სიგანე":200, "დახარისხებადი":"false", "show_in_customre":1, ":"", "renderer":"", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "რედაქტორი":"" ), ( " MIGX_id":4, "header":"id \u0434\u043 e\u043a\u0443\u043c\u0435\u043d\u0442\u0430", "dataIndex":"idstranici", "width":50, "დახარისხებადი":"false", "show_in_grid":1, "customrenderer": ", "renderer":"", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "რედაქტორი":"" ) ], "კატეგორია": "")

ტელევიზორის შექმნა MIGX კონფიგურაციით

MODX ხეში, " ელემენტები", დაჭერა + წერტილის საპირისპიროდ დამატებითი ველები" და შეიყვანეთ შემდეგი:

• "სახელი" - სლაიდერი; "ხელმოწერა" - სლაიდერი.
• "შეყვანის პარამეტრები" ჩანართში "შეყვანის ტიპი" აირჩიეთ migx, ხოლო "კონფიგურაციები" ველში შეიყვანეთ სლაიდერი.
• "ხელმისაწვდომია შაბლონებისთვის" ჩანართში აირჩიეთ ის შაბლონები, რომლებისთვისაც ხელმისაწვდომი იქნება ამ ველში შეყვანა.

მონაცემთა შეყვანა

მოდით გავხსნათ დოკუმენტი, რომლისთვისაც სლაიდერის ველი მინიჭებულია MIGX-თან კონფიგურაციით და შევიტანოთ მასში გარკვეული მონაცემები.

Bootstrap 3 კარუსელის გამომავალი გვერდზე

ჩვენ გვაქვს სტანდარტული Html მარკირება getbootstrap.com/docs/3.3/javascript/#carousel-examples, გადავაკეთოთ იგი MIGX-ისთვის და ჩაწერეთ შემდეგი კოდი საჭირო ადგილას შაბლონში:

და შექმენით ნაჭრები:

tplsliderინდიკატორი:

და ნაჭერი tplsliderItemშემდეგი შინაარსით:

Bootstrap 4 კარუსელის გამომავალი თითო გვერდზე

როგორც წინა შემთხვევაში, ჩვენ ვიღებთ სტანდარტულ მარკირებას getbootstrap.com/docs/4.1/components/carousel/და გავიმეოროთ, შედეგად მივიღებთ

სად არის ნაჭერი tplsliderინდიკატორიაქვს შემდეგი კოდი:

და ნაჭერი tplsliderItemშემდეგი კოდით: