Modx attēlu karuselis produkta lapā. liels un biedējošs

Sveika kopiena!

Šajā piezīmē jūs uzzināsit, kas ir Multiple Formtabs un kā izveidot konfigurāciju ar citu datu kopu. Un, protams, mēs kopā ar jums izveidosim slīdni, kurā būs dažāda veida slaidi, un beigās jūs atradīsiet ļoti interesants stāsts ko es ilgi neuzdrošinājos nevienam stāstīt (ja vien, protams, neinteresē, bet stāsts ir interesants - ticiet man). Un tā, slaidu piemēri:

• Fona attēls
• Video fons
• vienkrāsains fons

Uzmanību! Šoreiz nenoņemiet bērnus un grūtnieces no ekrāniem, jo ​​tā ir sava veida diskriminācija vecuma un dzimuma dēļ!

Tā tas būs

Vēl viens paziņojums! Es bieži atsaucos uz pirmo nodarbību, lai neatkārtotos, tāpēc ļoti iesaku jums ar to iepazīties

Priekš kam?

Fantazēsim: Jūs iegūstat projektu, kur, piemēram, galvenajā lapā ir slīdnis ar vairāku veidu slaidiem, vienam ir video fons, citam ir attēls, bet trešajā ir, piemēram, vienkrāsains. Jūs neizveidosiet vienu lauku kopu (viena konfigurācija) un nesabāzīsiet tajā (atvainojos par leksiku) visus šos laukus un nestāstīsit pārvaldniekam, kā ar to sadzīvot un būt. Nav nopietna attieksme!? (ceru, ka kāds sapratīs)

Par iemeslu

Mēs ar jums sapratām "kāpēc", tagad noskaidrosim "kā". Ja esat jau izlasījis pirmo nodarbību, tad mums jāiet uz MIGX komponenta lapu un jāizveido 3 konfigurācijas. Iepriekš instalējiet Jako ColorPicker (bet tas nav svarīgi):

Visu, ko neesmu norādījis es, izlaidiet!

viengabala konfigurācija (vienkrāsaina)

• cilne Iestatījumi
  • Vārds- ciets
  • Pievienot jaunu kategoriju- Slīdnis
• cilne Formtabs
  • Lauki Lauki izveidot 3 laukus
    1. Fona krāsa:
       • lauka nosaukums-bgcolor
       • Paraksts- Izvēlieties fona krāsu
       • Ieejas TV tips- ColorPicker (vai tas, ko jūs
         lietošana)
    2. Nosaukums:
       • lauka nosaukums galvene
       • Paraksts- Slaida nosaukums
    3. Apraksts:
       • lauka nosaukums- apraksts
       • Paraksts- Slaida apraksts
       • Ieejas TV tips- teksta apgabals
  • Vairāku Formtabs lauks-type ( Dotā vērtība būs atslēgas nosaukums
    izvades masīvs. Noklusējums: MIGX_formname)
  • - ar vienkrāsainu fonu (teksts
    šī konfigurācija atlases sarakstā)
  • - ciets (tāda paša veida lauka vērtība
    masīvā)

video konfigurācija

• cilne Iestatījumi
  • Vārds- video
  • Kategorija- Slīdnis
• cilne Formtabs
  • Lauki- Izveidojiet 1 cilni un laukā Lauki atkal mēs izveidojam 3 laukus, tikai viens no šiem laukiem ir cita veida.

    Te gan jāprecizē, ka lauku skaits un to veidi dažādās konfigurācijās var būt tik dažādi, cik tava iztēle ir ierobežota... Bet es zinu, ka ar tavām fantāzijām viss ir kārtībā?

    1. Video (t.i., fails):
       • lauka nosaukums- video
       • Paraksts- Augšupielādēt video
       • Ieejas TV tips- fails
    2. Nosaukums:
       • lauka nosaukums galvene
       • Paraksts- Slaida nosaukums
    3. Apraksts:
       • lauka nosaukums- apraksts
       • Paraksts- Slaida apraksts
       • Ieejas TV tips- teksta apgabals
  • Vairāku Formtabs lauks- tips
  • Vairāku formu cilņu opciju teksts- ar video fonā
  • Vairāku Formtabs Optionsvalue- video

slīdņa konfigurācija

Pēc noklusējuma tas pieņems attēlu un būs sava veida galvenā konfigurācija.

• cilne Iestatījumi
  • Vārds- slīdnis
  • Kategorija- Slīdnis
  • Aizstāt "Pievienot vienumu"- Pievienojiet slaidu
  • Veidlapas paraksts
  • loga virsraksts- Pievienot/rediģēt slaidu
• cilne Formtabs
  • Lauki- Izveidojiet 1 cilni un laukā Lauki vēlreiz izveidojiet 3 laukus
    1. Attēls:
       • lauka nosaukums- attēls
       • Paraksts- Augšupielādējiet attēlu
       • Ieejas TV tips- attēls
       • Norādiet nepieciešamo failu avotu, es aprakstīju šo uzdevumu pirmajā nodarbībā
    2. Nosaukums:
       • lauka nosaukums galvene
       • Paraksts- Slaida nosaukums
    3. Apraksts:
       • lauka nosaukums- apraksts
       • Paraksts- Slaida apraksts
       • Ieejas TV tips- teksta apgabals
  • Vairākas Formtabs- Šeit ir pati burvība, mums ir jāatlasa iepriekšējās darbībās izveidotās konfigurācijas, tostarp tā, kuru mēs pašlaik veidojam, t.i. atlasiet video, cieto un slīdni

    Konfigurācijas slīdni nebūs sarakstā, jo patiesībā tā vēl nav izveidota, tāpēc vajadzēs iziet cauri atlikušajiem punktiem, saglabāt konfigurāciju, vēlreiz atvērt šo konfigurāciju rediģēšanai, un šoreiz tā būs pieejama sarakstā slīdni

    
    

    Vēl viens precizējums: konfigurācijas tiks sakārtotas tieši tādā secībā, kādā esat izvēlējies, t.i. pēc noklusējuma, pievienojot jaunu slaidu, tiks atlasīts tas, kurš sarakstā būs pirmais
    

  • Vairāku Formtabs etiķete- Izvēlieties slaida veidu (šeit ir norādīts teksts
    kuru lietotājs redzēs blakus slaidu veidu atlases sarakstam)
  • Vairāku Formtabs lauks- tips
  • Vairāku formu cilņu opciju teksts- Ar attēlu uz fona
  • Vairāku Formtabs Optionsvalue- attēls
• cilne kolonnas
  • Lauks Kolonnas. Divu elementu pievienošana
    1. galvene
       • cilne Kolonna
         • galvene- Nosaukums
         • lauks galvene
       • cilne Šūnu redaktors
         • Redaktors- this.textEditor
    2. Apraksts
       • cilne Kolonna
         • galvene- Apraksts
         • lauks- apraksts
       • cilne Šūnu redaktors
         • Redaktors- this.textEditor

Kā jau esat pamanījuši, pirmajās divās konfigurācijās mēs neizveidojām tā sauktās kolonnas izvadei vadības panelī, t.i. rediģējot pašu TV parametru. Šīs kolonnas ir jāizveido pēdējā, t.i. konfigurācijā, kas tiks norādīta televizorā un kādā laukā Vairākas Formtabs cilne Formtabs tiks uzskaitītas visas mums nepieciešamās konfigurācijas, tostarp pati konfigurācija

Iesim un ātri izveidosim televizoru ar ievades veidu migx , laukā Konfigurācijas uzrakstiet mūsu konfigurācijas nosaukumu, t.i. slīdni , piešķiriet nepieciešamās veidnes un atveriet resursu rediģēšanai vai izveidojiet to. Ja mēs visu izdarījām pareizi, mums vajadzētu redzēt šādu attēlu:

Attēls ir noklikšķināms, un, ja jau esat noskatījies gifu no saites, kas atrodas piezīmes sākumā, tad šis ir tas

Mēs ātri aizpildām datus un pārejam pie mūsu slaidu izvades.

Kā atsaukt?

Datu ievade ir laba, bet kā ar izvadi? Neuztraucieties, biedri, viss būs labi. Izvadei mums atkal ir 2 labas opcijas, un mēs izskatījām abas šīs opcijas , šis ir vietējais MIGX fragments getImageList un visvarens parādība. Apskatīsim, kā izskatās mūsu dati:

getImageList

Izsauksim fragmentu, nenorādot parametru tpl, lai skatītu neapstrādātos datus:

[] Masīvs ( => 14 => attēls => faili/avatar.png => Šis ir slaids ar attēlu => īss apraksts) [_alt] => 0 [_pirmais] => 1 [_pēdējais] => => 1 = > slīdnis) Masīvs ( => 15 => video => faili/Manas mājas ir apkaunojošas.MOV => Un šis ir video => Jā, tiešām! [_alt] => 1 [_first] => [ _last] => => 2 => slīdnis) Masīvs ( => 16 => solid => ff0000 => Un sarkanā krāsa šeit ir skaista => Man patīk! [_alt] => 0 [_first] => [_last ] => 1 => 3 = > slīdnis)

parādība

($_modx->resource.slider| fromJSON | print) Masīvs ( => Masīvs ( => 14 => attēls => faili/avatar.png => Šis ir attēla slaids => Nu, īss apraksts)) => Masīvs ( = > 15 => video => faili/Manas mājas ir apkaunojošas.MOV => Un šis ir video => Jā, tiešām!) => Masīvs ( => 16 => ciets => ff0000 => Un šeit ir sarkans skaista krāsa => man patīk!))
Kā redzam, mūsu masīvos, cita starpā, atslēga veids ar vērtībām, kuras norādījām, veidojot konfigurācijas.

Lai parādītu mūsu slīdni ar getImageList, mums ir jāizveido 3 gabali ar mūsu galveno vērtību nosaukumiem veids, t.i.: attēls , video un cietais . Tālāk jūs sapratīsit, kāpēc.

Daļu piemēri:

// Dabas attēls

// Videoklips // Gabals ciets
Un zvanam vajadzētu izskatīties šādi:

Šeit mēs ņemam vērtības no katra slaida masīviem, un tāpēc mēs izveidojām trīs gabalus, kuru nosaukumi atbilst lauka vērtībām Vairāku Formtabs lauks

Nu tālāk parādība viss izskatās daudz vienkāršāk:

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

(/ja)

Rezultāts un solītais stāsts

Kā redzam, MIGX ar šo uzdevumu tiek galā, ja ne teikt "izcili", bet vismaz "labi". Es vēlreiz atkārtoju, ka MIGX neierobežo konfigurāciju skaitu, cilnes katrā konfigurācijā un lauku skaitu tajās. Un piemēri, kā jūs jau cerat saprast, ir diezgan vienkārši, lai jūs varētu arī vienkārši iepazīties ar šo funkcionalitāti. Un vēl kas svarīgs: izvadot gabalus, ļoti iesaku pārbaudīt lauku pilnību un vienmēr ņemt vērā, ka dati var tikt aizpildīti vai neaizpildīti vai kāda iemesla dēļ var nenākt, un tāpēc MODX sintaksei izmantot phx filtrus. vai nosacījumi fenom.

Paldies visiem par uzmanību, es novēlu veiksmi visiem, bet es nedarīšu, jo kā saka: "Novēlu veiksmi zaudētājiem", tāpēc es novēlu jums laimi un veselību vai kaut ko citu, bet kam tas interesē, tad stāsts.

Reiz pie mums ciemos ieradās mani radinieki, viņu vidū mans brāļadēls (manas māsas dēls) no kaimiņvalsts un mani divi brāļadēli (Mēs visi esam gandrīz viena vecuma). Lauku māja, saulainā Vidusāzija, blakus neliels kalns un upīte. Tajā pašā vakarā mēs visi četri nolēmām pastaigāties pa šo upi, un sākumā viss bija mierīgi, satraukumam nebija pamata. Viņiem bija ļoti jautri, stāstīja stāstus (dažreiz biedējošus un rāpojošus), jokoja un tamlīdzīgi. Taču vienā brīdī pamanīju, ka viens no maniem brāļa dēliem nobāl un tas nav tikai verbāls pavērsiens vai izpušķojums, jo tādas bailes un apjukumu cilvēka sejā nebiju redzējis pirms un pēc šī incidenta. Neatraujot skatienu, viņš paskatījās virzienā, kur bija pagriezta mana mugura, t.i. likās, ka viņš skatās uz kaut ko vai kādu aiz manis, bet ne tieši aiz muguras un tuvu, man likās, ka viņš skatās kaut kur tālumā. Tas bija biedējoši, un es viņam jautāju: - Kas noticis? Un viņš…

Šai rindkopai nāksies izlikties, ka stāstam šajā piezīmē ir turpinājums, bet patiesībā es tevi tikai nedaudz piekrāpu, cerot, ka varēšu tevi nedaudz uzmundrināt no tehniskā, garlaicīgā un lielā teksta un būsi labā garastāvoklis. Pats stāsts ir reāls un ļoti interesants. Tagad paldies visiem par uzmanību!

UPD:
Ja kas es esmu Baha!?

Ja pēkšņi kāds vēlas pateikties rublim, tad tā: Sberbank karte +79609354545

Šajā nodarbībā mēs apskatīsim MIGX pamatus un strādāsim pie jauna slīdņa, ko varat izmantot savā emuārā.

Prasības:

• MODX Revolution vietne.
• Instalēts MIGX pielāgotās veidnes mainīgā tips (izmantojot pakotņu pārvaldību).
• Galerijas slīdnis vai skripts, ko mēs vēlētos integrēt. Es izmantoju WooThemes FlexSlider, jo tas pats pielāgojas konteinera platumam (ļoti svarīgi atsaucīgam dizainam!). Tas ir arī ļoti konfigurējams, atbalsta ritināšanu viedtālruņos un izskatās lieliski.
• Izmantojot pakotņu pārvaldnieku, ir instalēts phpthumbof fragments attēlu automātiskai apgriešanai.
• Jebkuri attēli!

Sāciet

Darbā izmantotas vairākas daļas. Vispirms mums ir jāinstalē MIGX TV, un mums ir jāņem šie dati no priekšpuses un jāpadara mūsu slīdnis darboties. Šajā apmācībā tiek pieņemts, ka, izmantojot FlexSlider, mēs pārliecināsimies, ka marķējums ir tas, kas tam nepieciešams, taču to vajadzētu būt arī ļoti viegli pielāgot citiem slīdņiem.

1. darbība. Instalējiet MIGX TV attēla pārvaldībai

Sāksim ar televizora iestatīšanu. MIGX stiprā puse ir tā, ka varat definēt nepieciešamos laukus. Jūs redzēsit tos kā tabulu, un jums būs tikai jānosauc nosaukumi. Šajā gadījumā man būs nepieciešami trīs dažādi lauki:

• Ievades lauks attēla atlasīšanai failu sistēmā (vai 2.2 versijā no jūsu multivides avotiem).
• Teksta ievades lauks, lai ievadītu parakstu / tagu / aprakstu. FlexSlider lieliski strādā ar parakstiem, tāpēc mēs tos izmantosim.
• Es arī pievienoju teksta ievadi "Iestatīt". Kā redzēsim vēlāk, es to izmantošu bezgalīgam skaitam atsevišķu slīdņu, kas tiks pievienoti no jebkuras resursa vietas.

Ja vēlaties, varat izmantot citus laukus, taču apmācībā tiks izmantoti tieši tie lauki, kurus norādīju iepriekš.

Pāriesim pie TV izveides. Šeit ir slīdnis ar attēlu aprakstiem (gadījumam, ja sīktēlā nekas nav redzams).

Cilnē Elementi izveidojiet jaunu veidnes mainīgo un piešķiriet tam atbilstošu nosaukumu. Es to nosaukšu par ws.images, ja piešķirat savu vārdu, neaizmirstiet aizstāt [[*ws.images]] ar savu vārdu. Cilnes Ievades opcijas nolaižamajā izvēlnē atlasiet “migx” veidu. Ja neredzat šo veidu, pārbaudiet, vai esat instalējis MIGX pakotni, izmantojot pakotņu pārvaldnieku. Jūs ievērosiet, ka ekrāna apakšdaļā ir pievienotas vairākas opcijas, tostarp veidlapu cilnes un režģa kolonnas. Tas attiecas uz MODX > 2.0, iepriekšējām versijām iesaku jaunināt.

Ņemiet vērā, ka lauki Form Tabs un Grid Columns ir jāaizpilda ar derīgām JSON virknēm. JSON būtībā ir veids, kā parādīt objektus, masīvus vai atslēgas -> vērtību kombinācijas tādā veidā, ko atbalsta gandrīz jebkura programmēšanas valoda. Šeit ir tehniskā specifikācija un daži piemēri no oficiālās JSON vietnes.

Veidlapu cilņu iestatīšana

Veidlapa ļauj izmantot dažādas cilnes. Katrai cilnei ir apraksts un vairāki lauki. Ar šo varat veikt daudzas uzlabotas darbības, jo lielāko daļu laika izmantosit vienu cilni, tāpēc tikai atcerieties. Šeit ir JSON kods izmantotajām veidlapu cilnēm:

[("caption":"Attēls", "lauki": [ ("field":"set","caption":"Set"), ("field":"description","caption":"Apraksts") , ("field":"image","caption":"Attēls","inputTVtype":"image") ] )]

Iesim cauri katrai rindai:

• Pirmajā ir redzama ciļņu masīva atvēršana ar kvadrātiekava ([), bet cilnes atvēršanas objekts ar cirtainu iekava ((). Pēc tam mēs definējam lauka Attēla parakstu. Ņemiet vērā, ka jums ir nepieciešams lai izmantotu dubultpēdiņas (" ") rekvizītiem un to vērtībām , atsevišķas pēdiņas var radīt neparedzētus rezultātus.Ja jums ir šīs iekavas kādos rekvizītos, vērtībās, izvelciet tās ar slīpsvītru (\).Pēc apraksta (paraksts) definēšanas, turpināsim un sāksim definēt "lauku" masīvu, atverot to ar kvadrātiekavām ([) .
• Mēs definēsim savu pirmo lauku kā iestatītu. "field": "set" nozīmē, ka mēs vēlamies, lai šajā laukā būtu vienkārša teksta ievade. "Uzraksts":"Iestatījums" - mēs sniedzam nosaukuma "komplekts" aprakstu - tas būs nosaukums vienkārša teksta ievadīšanai. Pēc tam piešķiriet tai parakstu "Iestatījums", kas tiks parādīts veidlapā kā lauka etiķete.
• Pēc tam tādā pašā veidā definējiet apraksta lauku
• 4. rinda nosaka attēlu. Īpašs šeit ir tas, ka mēs izmantojam citu televizoru (ar nosaukumu "attēls") kā ievades veidu. Šī ir ļoti spēcīga MIGX funkcija, kas ļauj izmantot citus televizorus, lai izveidotu savu formu. Šajā gadījumā "attēla" televizors ir ļoti vienkāršs: ievades veids ir attēls, un 2.2 versijā varat to piešķirt pareizajam multivides avotam. Jums tas nav jāsaista ar veidnēm, kā to darītu ar parasto TV. Vēl viens veids, kā to izdarīt (ko es izmantoju citos MIGX televizoros), ir izveidot radio kastes vai atlasīt kastes.
• Piektā rinda aizver lauku masīvu. Ņemiet vērā arī to, ka pēdējā rindiņa, kas nosaka lauku (attēlu), nebeidzas ar komatu – tas ir svarīgi! Ja masīvā ievietojat komatu, JSON netiks parsēts un veidlapa nedarbosies.
• Sestā rinda aizver cilnes objektu un visu ciļņu masīvu.

Tātad, šādā veidā mēs esam izveidojuši "image" TV! Jums jau vajadzētu būt veidlapai, lai aizpildītu datus, bet jums ir nepieciešams marķējums, lai to parādītu...

Kolonnu marķējuma iestatīšana

Kolonnas izkārtojums ir tabula resursa TV panelī. Jums ir jādefinē šīs tabulas galvenes, izmantojot ievades opcijas Kolonnu iezīmēšana. Šeit ir (atkal JSON) definīcija, ko lietoju: [( "header": "Set", "sortable": "true", "dataIndex": "set" ),( "header": "Description" , "sortable" : "true", "dataIndex": "description" ),( "header": "Image", "sortable": "false", "dataIndex": "image","renderer": "this. renderImage" )]

Iesim cauri katrai rindai:

• Atveriet virsrakstu masīvu ar kvadrātiekavām ([) un piektās kolonnas virsrakstu ar krokainajām iekavām (().
• Nosaucam galveni "Set", norādām, ka to var kārtot (kārtot) un norādām parametru "set", kas atbilst Set Form Tabs definīcijai, kurām ir "field":"set".
• Komplekta beigas / apraksta sākums
• Mēs nosaucam galveni "Apraksts", kārtojamu un saskaņojam to ar lauka aprakstu dataIndex.
• Beigu apraksts/Sākuma attēls
• Nosauciet galvenes nosaukumu "Attēls", nešķirojams, un kartējiet to ar datu indeksu - attēla lauku. Mēs arī definēsim renderētāju, kas ExtJS ļaus jums mainīt izvaddatu izskatu. Šajā gadījumā "this.renderImage" renderētājs automātiski ņems atlasītā attēla URL un tā vietā atveidos sīktēlu.
• Attēla objekta beigas un galveņu masīvs.

Pēc tam jūs varat piešķirt šo MIGX televizoru savai veidnei un pārbaudīt rezultātu. Marķējums netiek rādīts? Atgriezieties cilnēs un pārliecinieties, vai visas vērtības ir ievietotas dubultpēdiņās, nevis vienpēdiņās, un pārbaudiet, vai nav papildu komatu.

Informācija

Lai apstiprinātu JSON, izmantojiet JSONLint .

• Aizpildiet informāciju
• Nogādājiet datus vietnē

Aizpildiet mūsu ws.image veidnes mainīgo ar patvaļīgiem datiem

Ja mēģināt parādīt šos datus kā parastu televizoru, jūs redzēsit kaut ko līdzīgu:

[( "MIGX_id":"1","set":"set1","description":"Atzīmējiet kaķi, kurš zog desu un ēd, kad viņš ir nomodā","image":"demo/uroki/15/1 .jpg" ),( "MIGX_id":"2","set":"set1","description":"trumpa","attēls":"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":"jūs varat nogalināt vīrieti ar šo grāmatu","image":"demo/uroki/15/4.jpg" )]

Šis ir JSON masīvs ar ievadītiem laukiem un vērtībām!

Tā kā MIGX ir aprīkots ar getImageList fragmentu, varat mēģināt parādīt datus, izmantojot to. Šī fragmenta dokumentāciju var atrast šeit. Vai arī izveidojiet savu fragmentu (parseMIGXToGallery), ko izmantoju, lai ģenerētu marķējumu no &tpl gabala, pamatojoties uz TV datiem:

fromJSON($ievade); $izeja = masīvs(); if (!$input || tukšs($tpl)) atgriež "nav lietas"; foreach ($input kā $rinda) ( if (isset($set) && !empty($set) && ($set != $row["set"])) turpināt; $izeja = $modx->getChunk($ tpl, $rinda); ) return implode("\n", $izeja);

Iesim cauri katrai rindai:

• Mēs ņemam $input mainīgo (kas ņem datus, kas ietverti &input parametrā fragmenta izsaukumā, vairāk par to vēlāk) un parsē JSON php masīvā.
• Mēs iestatīsim tukšu masīvu, lai saglabātu mūsu izvadi.
• Pārliecināsimies, vai $input mainīgais nav NULL vai False, kas nozīmētu, ka JSON nav nodots vai tas ir nederīgs, kā arī pārbaudīsim, vai mainīgais $tpl (ko fragmenta izsaukumā nodod parametrs &tpl) nav tukšs. Ja kāds no nosacījumiem ir patiess, mēs izdrukāsim kļūdas ziņojumu "tukšs", kas satura pārvaldniekam kalpos kā mājiens, ka kaut kas nav kārtībā.
• Pēc tam atkārtojiet katru $ ievades masīva elementu kā $ rindu.
• Mēs pārbaudām, vai ir iestatīts mainīgais $set (kas ir iestatīts fragmenta izsaukumā parametrā &set), un, ja tas nav tukšs, mēs pārbaudām tā vērtību pret pašreizējās rindas "set" vērtību. Ja tas nav tas, ko vēlaties, pārejiet uz nākamo masīva elementu.
• Mēs iegūstam gabalu ar nosaukumu $tpl un ievietojam tajā pašreizējās rindas vērtības kā vietturus.
• Mēs aizveram foreach cilpu.
• Visbeidzot, mēs salīmējam kopā $ izvades masīvu, atdalot katru elementu ar līnijas pārtraukumu, un izvadām to uz lapu.
• Tātad, lai apkopotu iepriekš minēto, mēs ņemam ievadi, izejam cauri katrai rindai un pārbaudām, vai tā pieder mūsu definētajai kopai, pēc tam tā iegūst daļu un saskaita visu līdz izvadei.
• Palaist fragmentu

Viss, kas mums nepieciešams, ir fragmenta izsaukums, kurā mums ir nepieciešami mūsu attēli un daļa, kas visu izvadīs FlexSlider pareizajā veidā. Lūk, kā tiek saukts fragments:

[]` &set=`set1` ]]

Un images.gallery.tpl daļa:

[[+apraksts]]

Saskaņā ar FlexSlider dokumentāciju visa fragmenta izvade ir jāietver arī div un nesakārtotā sarakstā. Lai viss būtu vieglāk, saliksim to visu vienā gabalā. Manu gabalu sauc par slīdni, un tajā ir:

Izmantojot šo daļu, es varu vienkārši izveidot saiti uz kaut ko saturā, ko ir daudz vieglāk atcerēties vai ievietot krāpnieciskajā lapā.

[[$slider?set=`kopas nosaukums`]]

Tagad varat sākt FlexSlider izkārtojumu.

3. darbība: FlexSlider izmantošana

FlexSlider ir salīdzinoši viegli lietojams (lejupielādējiet tā failus), un tā vietnē ir daudz piemēru. Lapā ir jāiekļauj arī izsaukums uz jQuery un tā CSS fails (iesaiņots zip failā) un spraudnis FlexSlider (arī zip arhīvā). Pēc tam jums ir jāaktivizē pareizais elements, izmantojot šādu kodu:

Vietne iesaka visu ievietot faila galvā, bet es personīgi to visu ievietoju apakšā. Ja jūsu slīdnis tiek parādīts lapas augšdaļā, labāk to ievietot lai tā tiktu ielādēta pirms lapas parādīšanās, tāpēc novietojiet to visur, kur vēlaties.

Tas ir viss! Es ceru, ka šis garais raksts kādam palīdzēs sākt lietot MIGX un slīdņus, piemēram, FlexSlider!

Šodien neliels raksts par kā modx izveidot slīdni izmantojot BanerY pakotni. Šo pakotni var lejupielādēt un instalēt no repozitorija.

Slīdņa izveide ar BanerY

Un tāpēc ir statisks slīdnis, lai tas būtu parasts sāknēšanas slīdnis, ar šādu atzīmi:

Mērķis ir izveidot pārvaldītu slīdni no šī marķējuma. Sāksim.

Sāksim ar slaidu izveidi BannerY, šim nolūkam dodamies uz Lietojumprogrammas - Reklāmkarogs - Pozīcijas un izveidojam pozīciju (piemēram, mājas slīdni).

Pēc tam dodieties uz cilni Baneri un noklikšķiniet uz pogas Jauns reklāmkarogs. Tiks atvērts logs jauna reklāmkaroga izveidei.

Mēs piepildām visu:

• Vārds, to var parādīt, izmantojot [[+name]].
• Izvēlieties attēlu — [[+attēls]].
• Norādiet URL, kur doties — [[+url]].
• Aizpildi aprakstu - [[+description]] - šeit, starp citu, var iekasēt ne tikai tekstu, bet arī parasto html, un tas ir forši.
• Nu, atlasiet pozīciju (izveidoju to agrāk).

Un tā mēs izveidojam nepieciešamo slaidu skaitu.

Tagad jums ir jāsadala iepriekš minētais marķējums gabalos un jāievieto kods gabalos atbilstoši BanerY sintakse

Izveidojiet daļu atsevišķam slīdnim ar klasi aktīvs, lai notiek slidkalniņš un ievadiet tajā sintaksi:

Tagad nokopējiet šo gabalu un piešķiriet tam nosaukumu slaids2 un noņemt klasi aktīvs

Faktiski atliek tikai parādīt slaidus.

[]

Rezultātā mēs iegūstam sekojošo:

Tas arī viss) Ir tik vienkārši izveidot modx slīdni, izmantojot BanerY.

Jā, starp citu, tā dokumentācija ir šeit: docs.modx.pro/components/bannery/snippet

Slider Revolution ir viens no populārākajiem slīdņiem, pateicoties tā milzīgajam funkciju klāstam un ērtai lietošanai.
no ThemePunch. Šis slīdnis ir iegādāts 273 441+ reizes, un to izmanto vairāk nekā 2500 000 vietņu visā pasaulē.

Tālāk ir norādītas dažas no galvenajām šī slīdņa priekšrocībām, kas to atšķir no bezmaksas un
lielākā daļa premium analogu:

• Jaudīgs vizuālais redaktors — pielāgojiet slīdni, lai tas atbilstu jūsu projekta vajadzībām, izmantojot ērtu izvēlni, kurā
  katra funkcija ir savā vietā. Stingra gradācija neļaus apjukt. Vienīgās grūtības iekšā
  pirmajā reizē būs vēlme tos visus izmēģināt.
• Katra slaida mainīguma kontrole - plānotā bloku parādīšana datora, planšetdatora un tālruņa ekrānā
  parādīts vizuālajā redaktorā. Slaidu izmērus var mainīt katrai ierīcei atsevišķi.
  Adaptīvā veidne neļaus izkropļot attēlus un videoklipus vai aizņemt vairāk vietas, nekā nepieciešams
  ērta apskate.
• Darbs ar sociālajiem tīkliem un video mitināšana - Slider Revolution piektā paaudze ļauj iekļaut slīdnī
  dati no Instagramm, Facebook, Flickr, Twitter, Vimeo un Youtube. Ja plānojat ievietot video viens pats
  serveri, varat izmantot HTML5 valodu. Koda daļas tiks ierakstītas automātiski.
• Augsta veiktspēja un slaidu optimizācija — spraudnis darbojas ātri rediģēšanas režīmā un samazina
  slīdņa svars, nezaudējot satura kvalitāti. Jums nav jāuztraucas par ilgu lapu ielādes laiku. Kas ir īpaši
  attiecas uz mobilajām ierīcēm, kuras nav sasniedzamas WiFi savienojumam.
• Milzīgs skaits specefektu, pārslēdzot slaidus
• Daudzi animācijas efekti, parādot tekstu, video un attēlus
• Videoklipa palaišana automātiski, atverot vietni, vai manuāli, no kuriem izvēlēties, slīdņa apturēšana, skatoties videoklipu,
  attīt atpakaļ utt.
• Liela navigācijas iestatījumu izvēle
• Ievietojiet sludinājumus ar saitēm tieši slīdnī, kamēr tas ir konfigurēts SEO optimizācijai
• Google fontu atbalsts un instalēšana
• Izmantojot daudzus slāņus (attēlus, videoklipus, parakstus un saites) vienā slaidā, to ir neskaitāmi
  pārklāj viens otru, tādējādi veidojot reālistisku video vai jebkuru prezentāciju.

Uzmanību! Lai varētu lejupielādēt Online premium slīdņu veidnes un bibliotēkas objektus, jāiegādājas atsevišķa licence no ThemePunch, kas šī teksta rakstīšanas brīdī maksā 19$, un pēc tam jāaktivizē, ievadot pirkuma kodu norādītajā laukā. attēlā zemāk.

Video apskats modSliderRevolution

Šodien mēs apskatīsim, kā izveidot Bootstrap slīdni, izmantojot MIGX. Pirms studiju uzsākšanas iesaku vispirms apmeklēt šo.

MIGX konfigurācijas izveide

Es dodos uz vadību MIGX un pievienojiet jaunu elementu ar nosaukumu slīdni, aizstāšanas laukā ierakstiet " Pievienojiet slaidus"un dodieties uz cilni" Formtabs».

• Lauka nosaukums — virsraksts, paraksts — virsraksts.
• Lauka nosaukums — slaids, Paraksts — slaids, Ievades TV tips — attēls.
• Lauka nosaukums — apraksts, Paraksts — Apraksts.
• Lauka nosaukums — idstranici, paraksts — norādiet dokumenta ID, uz kuru izveidot saiti.

• Galvene — virsraksts, lauks — virsraksts.
• Galvene — slaids, lauks — slaids, renderētājs — this.renderImage.
• Galvene — apraksts, lauks — apraksts.
• Galvene - dokumenta ID, lauks - idlapa.

Piezīme: Būtībā mēs pārsūtām elementus no Formtabs. Jā, var aizpildīt arī laukus Column width – kolonnu platums.

Saglabāt (izpildīt).

Tiem, kuri nemaz nevēlas peldēties, izveidojam tukšu konfigurāciju un tajā eksportējam šādu kodu:

( "formtabs":[ ( "MIGX_id":1, "caption":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0430\u044b43",u0430\u0443 ", "print_before_tabs" ":"0", "fields":[ ( "MIGX_id":1, "field":"nosaukums", "uzraksts":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432 ' , "inputTV": "", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config" , "avoti": "", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":1 ), ( "MIGX_id":2, "field":"slaids ", "caption" :"\u0421\u043b\u0430\u0439\u0434", "description":"", "description_is_code":"0", "inputTV":"", "inputTVtype":"image", " validācija":"" , "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config", "sources":"", "inputOptionValues":"", " noklusējuma":"" , "useDefaultIfEmpty":"0", "pos" :2 ), ( "MIGX_id":3, "field":"apraksts", "uzraksts":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435", "apraksts":"", " description_is_code":"0", "inputTV":"", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "displejs":"", " 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\u043\u0443\u043\u04d\u034d \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0442\u044e inputTV":"", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config", " avoti":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":4 ) ], "pos":1 ) ], "kontekstizvēlnes":"" , "actionbuttons":"", "columnbutton s":"", "filtri":"", "paplašināts":( "migx_add":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0403b\u034 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":4 , "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":"yes", "getlistwhere":"", "joins":"", "hooksnippets":"", "cmpmaincaption" :"", "cmptabcaption":"", "cmptabdescription":"", "cmptabcontroller":"", "winbuttons ":"", "onsubmitsuccess":"", "submitparams":"" ), "columns":[ ( "MIGX_id":1, "header":"\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":"slaids", "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":"apraksts", "width":200, "sortable":"false", "show_in_grid":1, "customrender" ":", "renderētājs":"", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" ), ( " MIGX_id":4, "header":"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": "")

Televizora izveide ar MIGX konfigurāciju

MODX kokā uz " Elementi”, nospiediet + pretī punktam Papildu lauki" un ievadiet šo:

• "Vārds" - slīdnis; "Paraksts" - slīdnis.
• Cilnes "Ievades opcijas" sadaļā "Ievades veids" atlasiet migx un laukā "Konfigurācijas" ievadiet slīdni.
• Cilnē “Pieejams veidnēm” atlasiet tās veidnes, kurām būs pieejama ievade šajā laukā.

Datu ievade

Atvērsim dokumentu, kuram slīdņa laukam ir piešķirts MIGX ar konfigurāciju un ievadīsim tajā dažus datus.

Bootstrap 3 karuseļa izvade uz lapu

Mums ir standarta Html marķējums getbootstrap.com/docs/3.3/javascript/#carousel-examples, pārtaisiet to MIGX un veidnē vajadzīgajā vietā ierakstiet šādu kodu:

Un izveidojiet gabalus:

tplsliderIndicator:

un gabals tplsliderItem ar šādu saturu:

Bootstrap 4 karuseļa izvade vienā lapā

Tāpat kā iepriekšējā gadījumā, mēs ņemam standarta uzcenojumu getbootstrap.com/docs/4.1/components/carousel/ un to pārtaisīt, kā rezultātā mēs iegūstam

Kur ir gabals tplsliderIndicator ir šāds kods:

un gabals tplsliderItem ar šādu kodu: