Carusel de imagini Modx pe pagina produsului. mare și înfricoșător

Salutare comunitate!

În această notă, veți afla ce sunt tabelele cu forme multiple și cum să creați o configurație cu un set de date diferit. Și, bineînțeles, vom crea împreună cu tine un slider care va avea diferite tipuri de diapozitive, iar la final vei găsi un foarte interesanta poveste pe care nu am îndrăznit să-i spun nimănui multă vreme (dacă, desigur, nu te interesează, dar povestea este interesantă – crede-mă). Și așa, exemple de diapozitive:

• Imagine de fundal
• Fundal video
• fundal de culoare solidă

Atenţie! De data aceasta, nu scoateți copiii și femeile însărcinate de pe ecrane, pentru că este un fel de discriminare bazată pe vârstă și sex!

Așa va fi

Inca un anunt! Mă voi referi adesea la prima lecție pentru a nu mă repeta, așa că vă recomand insistent să vă familiarizați cu

Pentru ce?

Să fantezim: Primești un proiect în care, de exemplu, pe pagina principală există un glisor cu mai multe tipuri de diapozitive, unul are un fundal video, altul are o imagine, iar al treilea are o culoare solidă, de exemplu. Nu veți crea un set de câmpuri (o configurație) și nu veți înghesui (scuze pentru lexic) toate aceste câmpuri în el și îi spuneți managerului cum să trăiască cu el și să fie. Nu este atitudine serioasa!? (sper ca cineva intelege)

Pentru cauza

Am înțeles „de ce” cu tine, acum haide să aflăm „cum”. Dacă ați citit deja prima lecție, atunci trebuie să mergem la pagina componentelor MIGX și să creăm 3 configurații. Preinstalați ColorPicker de la Jako (dar nu contează):

Tot ce nu este indicat de mine, trece peste!

configurație solidă (culoare solidă)

• Tab Setări
  • Nume- solidă
  • Adăugați o nouă categorie- Glisor
• Tab Formtabs
  • Câmpuri Câmpuri creați 3 câmpuri
    1. Culoare de fundal:
       • numele domeniului-bgcolor
       • Legendă- Selectați culoarea de fundal
       • Tip de intrare TV- ColorPicker (sau cel de la tine
         utilizare)
    2. Titlu:
       • numele domeniului antet
       • Legendă- Titlul diapozitivului
    3. Descriere:
       • numele domeniului- Descriere
       • Legendă- Descrierea diapozitivului
       • Tip de intrare TV-textarea
  • Câmp cu mai multe forme-tip( Valoare dată va fi numele cheii în
    matrice de ieșire. Implicit: MIGX_formname)
  • - Cu o culoare solidă pe fundal (Text
    această configurație în lista de selecție)
  • - solid (Valoarea câmpului de același tip
    în matrice)

configurație video

• Tab Setări
  • Nume- video
  • Categorie- Glisor
• Tab Formtabs
  • Câmpuri- Creați 1 filă și în câmp Câmpuri din nou, creăm 3 câmpuri, doar unul dintre aceste câmpuri este de alt tip.

    Ar trebui să clarific aici că numărul de câmpuri și tipurile lor în diferite configurații poate fi la fel de diferit pe cât imaginația ta este limitată... Dar știu că totul este în ordine cu fanteziile tale?

    1. Video (adică fișier):
       • numele domeniului- video
       • Legendă- Încărcați videoclip
       • Tip de intrare TV- dosar
    2. Titlu:
       • numele domeniului antet
       • Legendă- Titlul diapozitivului
    3. Descriere:
       • numele domeniului- Descriere
       • Legendă- Descrierea diapozitivului
       • Tip de intrare TV-textarea
  • Câmp cu mai multe forme- tip
  • Formtabs multiple Optionstext- Cu videoclip în fundal
  • Opțiuni de tabele de formulare multiple- video

configurația cursorului

În mod implicit, va accepta o imagine și va fi un fel de configurație principală.

• Tab Setări
  • Nume- glisor
  • Categorie- Glisor
  • Înlocuiește „Adaugă articol”- Adăugați diapozitiv
  • Subtitrarea formularului
  • titlul ferestrei- Adăugați/editați diapozitiv
• Tab Formtabs
  • Câmpuri- Creați 1 filă și în câmpul Câmpuri creați din nou 3 câmpuri
    1. Imagine:
       • numele domeniului- imagine
       • Legendă- Încărcați o imagine
       • Tip de intrare TV- imagine
       • Specificați sursa fișierelor de care aveți nevoie, am descris această sarcină în prima lecție
    2. Titlu:
       • numele domeniului antet
       • Legendă- Titlul diapozitivului
    3. Descriere:
       • numele domeniului- Descriere
       • Legendă- Descrierea diapozitivului
       • Tip de intrare TV-textarea
  • Formtab-uri multiple- Aici este chiar magia, trebuie să selectăm configurațiile create în pașii anteriori, inclusiv pe cea pe care o creăm în prezent, i.e. selectați video, solid și glisor

    Configurații glisor nu va fi în listă, deoarece de fapt nu a fost încă creat, așa că va trebui să parcurgeți punctele rămase, să salvați configurația, să deschideți din nou această configurație pentru editare și de data aceasta va fi disponibilă în listă glisor

    
    

    Încă o precizare: configurațiile vor fi sortate exact în ordinea în care ați ales, adică. implicit, la adăugarea unui nou diapozitiv, va fi selectat cel care va fi primul din listă
    

  • Etichetă cu mai multe forme- Selectați tipul de diapozitiv (Textul este indicat aici
    pe care utilizatorul îl va vedea lângă lista de selecție a tipurilor de diapozitive)
  • Câmp cu mai multe forme- tip
  • Formtabs multiple Optionstext- Cu o imagine pe fundal
  • Opțiuni de tabele de formulare multiple- imagine
• Tab coloane
  • Camp Coloane. Adăugarea a două elemente
    1. antet
       • Tab Coloană
         • antet- Titlu
         • camp antet
       • Tab Editor de celule
         • Editor- acest.textEditor
    2. Descriere
       • Tab Coloană
         • antet- Descriere
         • camp- Descriere
       • Tab Editor de celule
         • Editor- acest.textEditor

După cum ați observat deja, în primele două configurații, nu am creat așa-numitele coloane pentru ieșire în panoul de control, adică. atunci când editați parametrul TV în sine. Aceste coloane trebuie create în acesta din urmă, adică. in configuratia care va fi indicata in televizor si in care in teren Formtab-uri multiple fila Formtabs vor fi listate toate configurațiile de care avem nevoie, inclusiv aceeași configurație în sine

Să mergem și să creăm rapid un televizor cu tip de intrare migx , în teren Configurații scrieți numele configurației noastre, adică glisor , atribuiți șabloanele necesare și deschideți resursa pentru editare sau creați-o. Dacă am făcut totul bine, atunci ar trebui să vedem următoarea imagine:

Imaginea se poate face clic, iar dacă ați vizionat deja gif-ul din linkul de la începutul notei, atunci acesta este cel

Completam rapid datele și trecem la rezultatul diapozitivelor noastre.

Cum să se retragă?

Intrarea datelor este bună, dar ce rămâne cu ieșirea? Nu vă faceți griji camarazi, totul va fi bine. Pentru ieșire, avem din nou 2 opțiuni bune și am luat în considerare ambele opțiuni în , acesta este un fragment MIGX nativ getImageListși atotputernic fenomen. Să vedem cum arată datele noastre:

getImageList

Să apelăm fragmentul fără a specifica parametrul tpl pentru a vedea datele brute:

[] Array ( => 14 => imagine => files/avatar.png => Acesta este un diapozitiv cu o imagine => Ei bine, scurtă descriere) [_alt] => 0 [_first] => 1 [_last] => => 1 => slider) Array ( => 15 => video => fișiere/Casa mea este rușinoasă.MOV => Și acesta este un videoclip => Da, într-adevăr! [_alt] => 1 [_first] => [ _last] => => 2 => glisor) Matrice ( => 16 => solid => ff0000 => Și roșu este o culoare frumoasă aici => Îmi place! [_alt] => 0 [_first] => [_last ] => 1 => 3 => glisor)

fenomen

($_modx->resource.slider| fromJSON | print) Array ( => Array ( => 14 => imagine => files/avatar.png => Acesta este un slide de imagine => Ei bine, scurtă descriere)) => Array ( = > 15 => video => fișiere/Casa mea este rușinoasă.MOV => Și acesta este un videoclip => Da, într-adevăr!) => Array ( => 16 => solid => ff0000 => Și aici este roșu o culoare frumoasa => imi place!))
După cum putem vedea, în matricele noastre, printre altele, cheia tip cu valorile pe care le-am specificat la crearea configurațiilor.

Pentru a afișa glisorul nostru cu getImageList, trebuie să creăm 3 bucăți cu numele valorilor noastre cheie tip, adică: imagine , video și solid . Mai departe vei înțelege de ce.

Exemple de bucăți:

// Bucătă imagine

// Bucăți video // Bucățiune solidă
Și apelul ar trebui să arate așa:

Aici luăm valori din tablourile fiecărui diapozitiv și, prin urmare, am creat trei bucăți ale căror nume se potrivesc cu valorile câmpului Câmp cu mai multe forme

Ei bine, mai departe fenomen totul pare mult mai simplu:

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

(/dacă)

Rezultatul și povestea promisă

După cum vedem, MIGX face față acestei sarcini, dacă nu ca să spunem „excelent”, dar cel puțin „bun”. Repet încă o dată că MIGX nu te limitează în numărul de configurații, file din fiecare configurație și în numărul de câmpuri din acestea. Și exemplele, așa cum sperați deja că înțelegeți, sunt destul de simple, astfel încât să vă puteți familiariza și cu această funcționalitate. Și încă ceva important: atunci când scoateți bucăți, vă recomand cu tărie să verificați completitatea câmpurilor și să țineți întotdeauna cont de faptul că datele pot fi sau nu completate sau din anumite motive pot să nu vină și, prin urmare, folosiți filtre phx pentru sintaxa MODX sau condiţii în fenom.

Vă mulțumesc tuturor pentru atenție, aș urez succes tuturor, dar nu o voi face, pentru că așa cum se spune: „Ură-le învinșilor mult noroc”, așa că vă doresc fericire și sănătate sau ceva, dar cui îi pasă, atunci poveste.

Odată au venit rudele mele să ne viziteze, printre ei și nepotul meu (fiul surorii mele) din tara vecinași cei doi nepoți ai mei (Aproape toți avem aceeași vârstă). Casă la țară, Asia Centrală însorită, un mic munte și un râu în apropiere. În aceeași noapte, noi patru ne-am hotărât să facem o plimbare chiar de-a lungul acestui râu și la început totul a fost calm, nu existau motive de emoție. S-au distrat foarte mult, au spus povești (uneori înfricoșătoare și înfiorătoare), au glumit și chestii de genul ăsta. Dar la un moment dat, am observat că unul dintre nepoții mei a pălit și aceasta nu este doar o întorsătură verbală sau o înfrumusețare, pentru că nu am văzut niciodată o asemenea teamă și nedumerire pe fața unei persoane înainte și după acest incident. Fără să-și ia privirea, s-a uitat în direcția în care îmi era întors spatele, adică. părea că se uită la ceva sau la cineva în spatele meu, dar nu direct în spate și aproape, mi se părea că se uită undeva în depărtare. A fost înfricoșător și l-am întrebat: - Ce s-a întâmplat? Si el…

Acest paragraf va trebui să pretindă că povestea din această notă are o continuare, dar de fapt tocmai te-am înșelat puțin, sperând că te voi înveseli puțin din textul tehnic, plictisitor și mare și vei fi într-o stare bună. starea de spirit. Povestea în sine este reală și foarte interesantă. Acum, vă mulțumesc tuturor pentru atenție!

UPD:
Dacă ce sunt eu Baha!?

Dacă dintr-o dată cineva vrea să mulțumească rublei, atunci așa să fie: card Sberbank +79609354545

În această lecție, vom acoperi elementele de bază ale MIGX și vom lucra la un nou glisor pe care îl puteți folosi pe blogul dvs.

Cerințe:

• Site-ul MODX Revolution.
• Tipul de variabilă de șablon personalizat MIGX instalat (prin gestionarea pachetelor).
• Glisorul sau scriptul pentru galerie pe care am dori să îl integrăm. Am folosit FlexSlider de la WooThemes pentru că se ajustează singur pentru a se potrivi cu lățimea containerului (foarte important pentru design responsive!). De asemenea, este foarte configurabil, acceptă derularea pe smartphone-uri și arată foarte bine din cutie.
• Snippet phpthumbof instalat prin Managerul de pachete pentru decuparea automată a imaginilor.
• Orice imagini!

ÎNCEPE

Lucrarea folosește mai multe părți. Mai întâi trebuie să instalăm MIGX TV și trebuie să luăm aceste date din front-end și să ne facem glisorul să funcționeze. Acest tutorial presupune utilizarea FlexSlider, ne vom asigura că marcajul este ceea ce are nevoie, dar ar trebui să fie și foarte ușor de adaptat la alte glisoare.

Pasul 1: Instalați MIGX TV pentru gestionarea imaginilor

Să începem prin a configura televizorul. Puterea lui MIGX este că puteți defini câmpurile de care aveți nevoie. Le veți vedea ca un tabel și trebuie doar să denumiți titlurile. În acest caz, voi avea nevoie de trei câmpuri diferite:

• Câmp de introducere pentru selectarea unei imagini în sistemul de fișiere (sau în 2.2 din sursele dvs. media).
• Câmp de introducere text pentru a introduce o legendă/etichetă/descriere. FlexSlider face o treabă grozavă cu subtitrările, așa că le vom folosi.
• De asemenea, am adăugat introducerea textului pentru „Set”. După cum vom vedea mai târziu, îl voi folosi pentru un număr infinit de glisoare individuale care vor fi adăugate de oriunde în resursă.

Puteți folosi alte câmpuri dacă doriți, dar tutorialul va folosi exact câmpurile pe care le-am enumerat mai sus.

Să trecem la crearea televizorului. Iată un glisor cu descrieri ale imaginilor (în cazul în care nimic nu este vizibil în miniatură).

Creați o nouă variabilă șablon în fila Elemente și dați-i un nume adecvat. Îi voi numi ws.images, dacă îi dai propriul nume, nu uita să înlocuiești [[*ws.images]] cu numele tău. În fila Opțiuni de introducere, selectați tipul „migx” din meniul derulant. Dacă nu vedeți acest tip, atunci verificați dacă ați instalat pachetul MIGX prin Managerul de pachete. Veți observa că au fost adăugate mai multe opțiuni în partea de jos a ecranului, inclusiv file Form și Coloane Grid. Acest lucru se aplică pentru MODX > 2.0, pentru versiunile anterioare recomand actualizarea.

Rețineți că câmpurile File Form și Grid Columns trebuie să fie completate cu șiruri JSON valide. JSON este practic o modalitate de a afișa obiecte, matrice sau combinații cheie -> valoare într-un mod pe care îl acceptă aproape orice limbaj de programare. Iată specificația tehnică și câteva exemple de pe site-ul oficial JSON.

Setarea filelor de formular

Formularul vă permite să utilizați diferite file. Fiecare filă are o descriere și mai multe câmpuri. Puteți face o mulțime de lucruri avansate cu aceasta, deoarece veți folosi o singură filă de cele mai multe ori, așa că amintiți-vă pentru moment. Iată codul JSON pentru filele de formular pe care le folosesc:

[("caption":"Imagine", "câmpuri": [ ("câmp":"set","caption":"Set"), ("câmp":"descriere","caption":"Descriere") , ("câmp":"imagine","caption":"Imagine","inputTVtype":"imagine") ] )]

Să trecem prin fiecare rând:

• Prima arată deschiderea matricei de file cu o paranteză pătrată ([), iar obiectul de deschidere al filei cu o paranteză ondulată ((). După aceea, definim legenda câmpului Imagine. Rețineți că aveți nevoie de pentru a utiliza ghilimele duble (" ") pentru proprietăți și valorile acestora, cele simple pot duce la rezultate neașteptate. Dacă aveți aceste paranteze în orice proprietăți, valori, evadați-le cu o bară oblică (\).După definirea descrierii (titlue), să continuăm și să începem definirea matricei de „câmpuri”, deschizând-o cu paranteze drepte ([) .
• Vom defini primul nostru câmp ca setat. „field”: „set” înseamnă că dorim să introducem text simplu în acest câmp. „Caption”: „Set” - dăm o descriere a numelui „set” - acesta va fi numele pentru introducerea textului simplu. Apoi, dați-i legenda „Set”, care va fi afișată pe formular ca etichetă de câmp.
• Apoi, definiți câmpul de descriere în același mod
• Linia 4 definește imaginea. Ceea ce este special aici este că folosim un alt televizor (numit „imagine”) ca tip de intrare. Aceasta este o caracteristică foarte puternică a MIGX care vă permite să utilizați alte televizoare pentru a vă construi forma. În acest caz, televizorul „imagine” este foarte simplu: tipul de intrare este imagine, iar în 2.2 îl puteți atribui sursei media corecte. Nu trebuie să-l asociați cu șabloane așa cum ați face cu televizorul obișnuit. O altă modalitate de a face acest lucru (pe care o folosesc pe alte televizoare MIGX) este să faci casete radio sau să selectezi casete.
• A cincea linie închide matricea de câmpuri. De asemenea, rețineți că ultima linie care definește câmpul (imaginea) nu se termină cu o virgulă - acest lucru este important! Dacă puneți o virgulă într-o matrice, JSON nu va fi analizat și formularul dvs. nu va funcționa.
• A șasea linie închide obiectul filă și întreaga matrice de file.

Așadar, în acest fel am creat TV „de imagine”! Ar trebui să aveți deja un formular pentru a completa datele, dar aveți nevoie de markup pentru a le afișa...

Setarea marcajului coloanei

Aspectul coloanei este un tabel pe panoul TV al resursei. Trebuie să definiți anteturile pentru acest tabel prin opțiunile de introducere a marcajului coloanelor. Iată definiția (din nou JSON) a ceea ce folosesc: [( "header": "Set", "sortable": "true", "dataIndex": "set" ),( "header": "Description" , "sortable" : "true", "dataIndex": "descriere" ),( "header": "Imagine", "sortable": "false", "dataIndex": "imagine","renderer": "aceasta. renderImagine" )]

Să trecem prin fiecare rând:

• Deschideți matricea de titluri cu paranteze pătrate ([) și antetul coloanei a cincea cu paranteze (().
• Numim antetul „Set”, indicăm că poate fi sortat (sortabil) și specificăm parametrul „set”, care corespunde definiției Set Form Tabs, care au „field”:”set”.
• Sfârșitul setului / începutul descrierii
• Numim antetul „Descriere”, sortabil și îl potrivim cu descrierea câmpului dataIndex.
• Sfârșit descriere/Start imagine
• Denumiți antetul „Imagine”, nesortat și mapați-l la câmpul dataIndex - imagine. Vom defini, de asemenea, un renderer care în ExtJS vă va permite să schimbați aspectul datelor de ieșire. În acest caz, „this.renderImage” rendererul va prelua automat adresa URL a imaginii selectate și va reda în schimb o miniatură.
• Sfârșitul unui obiect Image și a unei matrice de anteturi.

După aceea, puteți aloca acest televizor MIGX șablonului dvs. și puteți verifica rezultatul. Markup nu se afișează? Reveniți la file și asigurați-vă că toate valorile sunt cuprinse între ghilimele duble și nu între ghilimele simple și verificați dacă există virgule suplimentare.

informație

Pentru a valida JSON, utilizați JSONLint .

• Completați detaliile
• Aduceți date pe site

Completați variabila noastră șablon ws.image cu date arbitrare

Dacă încercați să afișați aceste date ca un televizor normal, veți vedea ceva de genul acesta:

[( "MIGX_id":"1","set":"set1","description":"Marcați pisica, care fură cârnați și mănâncă când este treaz","image":"demo/uroki/15/1 .jpg" ),( "MIGX_id":"2","set":"set1","descriere":"drum","image":"demo/uroki/15/2.jpg" ),( "MIGX_id" ":"3","set":"set1","description":"como este nuevo","image":"demo/uroki/15/3.jpg" ),( "MIGX_id":"4", "set":"set1","description":"poți ucide un om cu această carte","image":"demo/uroki/15/4.jpg" )]

Aceasta este o matrice JSON cu câmpuri și valori introduse!

Deoarece MIGX vine cu un fragment getImageList, puteți încerca să afișați datele folosindu-l. Documentația pentru acest fragment poate fi găsită aici. Sau creați-vă propriul fragment (parseMIGXToGallery), pe care îl folosesc pentru a genera markup din fragmentul &tpl pe baza datelor TV:

fromJSON($input); $ieșire = matrice(); if (!$input || empty($tpl)) returnează „fără lucruri”; foreach ($input ca $row) ( if (isset($set) && !empty($set) && ($set != $row["set"])) continua; $output = $modx->getChunk($ tpl, $rând); ) return implode("\n", $ieșire);

Să trecem prin fiecare rând:

• Luăm variabila $input (care preia datele conținute în parametrul &input din apelul snippet, mai multe despre asta mai târziu) și parsează JSON într-o matrice php.
• Vom seta o matrice goală pentru a păstra rezultatul nostru.
• Să ne asigurăm că variabila $input nu este NULL sau False, ceea ce ar însemna că JSON nu a fost transmis sau că este invalid și, de asemenea, să verificăm dacă variabila $tpl (trecută de parametrul &tpl în apelul fragmentului) nu este goală. Dacă oricare dintre condiții este adevărată, vom tipări un mesaj de eroare „gol”, care va servi drept indiciu managerului de conținut că ceva nu este în regulă.
• Apoi, repetați fiecare element al matricei $input ca $row.
• Verificăm dacă variabila $set este setată (care este setată în apelul snippet din parametrul &set) și dacă nu este goală verificăm valoarea ei față de valoarea „set” a rândului curent. Dacă nu este ceea ce doriți, treceți la următorul element din matrice.
• Obținem o bucată numită $tpl și inserăm valorile rândului curent în ea ca substituenți.
• Închidem bucla foreach.
• În cele din urmă, lipim tabloul $output împreună, separând fiecare element cu o întrerupere de linie și îl scoatem în pagină.
• Deci, pentru a rezuma cele de mai sus, luăm intrarea, trecem prin fiecare rând și verificăm dacă aparține setului pe care l-am definit, apoi primește o bucată și adunăm totul la ieșire.
• Rulați fragmentul

Tot ce avem nevoie este un fragment de apel în care avem nevoie de imaginile noastre și o bucată care va scoate totul în modul corect pentru FlexSlider. Iată cum se numește fragmentul:

[]` &set=`set1` ]]

Și fragmentul images.gallery.tpl:

[[+descriere]]

De asemenea, trebuie să împachetați întreaga ieșire a fragmentului într-un div și o listă neordonată, conform documentației FlexSlider. Pentru a face totul mai ușor, să punem totul într-o singură bucată. Bucata mea se numește glisor și conține următoarele:

Folosind această bucată, pot pur și simplu să fac link la ceva din conținut, care este mult mai ușor de reținut sau de pus într-o foaie de cheat.

[[$slider?set=`numele setului`]]

Acum puteți începe să instalați FlexSlider.

Pasul 3: Folosind FlexSlider

FlexSlider este relativ ușor de utilizat (descărcați fișierele) și există o mulțime de exemple pe site-ul său web. De asemenea, trebuie să includeți apelul la jQuery pe pagină și fișierul său CSS (ambalat într-un fișier zip) și pluginul FlexSlider (de asemenea, în arhiva zip). După aceea, trebuie să declanșați elementul corect folosind următorul cod:

Site-ul sfătuiește să puneți totul în capul dosarului, dar eu personal am pus totul în partea de jos. Dacă glisorul este afișat în partea de sus a paginii, atunci este mai bine să îl plasați astfel încât să se încarce înainte de apariția paginii, așa că plasați-o oriunde doriți.

Asta e tot! Sper că acest articol lung va ajuta pe cineva să înceapă să folosească MIGX și slidere precum FlexSlider!

Astăzi un mic articol despre cum se creează un glisor în modx folosind pachetul BanerY. Acest pachet poate fi descărcat și instalat din depozit.

Crearea unui glisor cu BanerY

Și deci există un glisor static, să fie un slider bootstrap obișnuit, cu acest marcaj:

Scopul este de a crea un glisor gestionat din acest marcaj. Să începem.

Să începem cu crearea diapozitivelor în BannerY, pentru aceasta mergem la Aplicații - BannerY - Poziții și creăm o poziție (de exemplu, home-slider).

După aceea, accesați fila Bannere și faceți clic pe butonul Banner nou. Se va deschide o fereastră pentru crearea unui nou banner.

Umplem totul:

• Nume, poate fi afișat folosind [[+nume]].
• Selectați o imagine - [[+imagine]].
• Specificați adresa URL unde să mergeți - [[+url]].
• Completați descrierea - [[+descriere]] - aici, apropo, puteți încărca nu numai text, ci și html obișnuit, și asta e tare.
• Ei bine, selectați poziția (creată mai devreme).

Și astfel creăm numărul necesar de diapozitive.

Acum trebuie să împărțiți marcajul de mai sus în bucăți și să potriviți codul din bucăți la sintaxa BanerY

Creați o bucată pentru un glisor separat cu o clasă activ, lăsați-l să fie diapozitivși injectați sintaxa în ea:

Acum copiați acea bucată și dați-i un nume slide2și eliminați clasa activ

Ei bine, rămâne, de fapt, doar să afișați diapozitivele.

[]

Ca rezultat, obținem următoarele:

Asta este) Este atât de ușor să creezi un glisor pe modx folosind BanerY.

Da, apropo, documentația sa este aici: docs.modx.pro/components/bannery/snippet

Slider Revolution este unul dintre cele mai populare glisoare datorită gamei sale uriașe de caracteristici și ușurinței de utilizare.
de la ThemePunch. Acest glisor a fost cumpărat de peste 273.441 de ori și este folosit de peste 2500000 de site-uri din întreaga lume.

Mai jos sunt enumerate câteva dintre principalele avantaje ale acestui cursor, care îl deosebește de gratuit și
majoritatea analogilor premium:

• Editor vizual puternic - personalizați afișajul glisorului pentru a se potrivi nevoilor proiectului dvs. printr-un meniu convenabil în care
  fiecare funcție este la locul ei. Gradația strictă nu vă va permite să vă confuzi. Singura dificultate în
  prima data va fi dorinta de a le incerca pe toate.
• Controlul variabilității fiecărui diapozitiv - afișarea planificată a blocurilor pe ecranul unui computer, tabletă și telefon
  afișat în editorul vizual. Puteți modifica dimensiunea diapozitivelor individual pentru fiecare dispozitiv.
  Șablonul adaptabil nu va permite imaginilor și videoclipurilor să fie distorsionate sau să ocupe mai mult spațiu decât este necesar
  vizualizare convenabilă.
• Lucrați cu rețelele sociale și găzduirea video - Slider Revolution a cincea generație vă permite să includeți în slider
  date de la Instagramm, Facebook, Flickr, Twitter, Vimeo și Youtube. Dacă intenționați să postați videoclipul pe cont propriu
  server, puteți utiliza limbajul HTML5. Părți din cod vor fi scrise automat.
• Performanță ridicată și optimizare pentru diapozitive - pluginul funcționează rapid în modul de editare și reduce
  greutatea glisorului fără a pierde calitatea conținutului. Nu trebuie să vă faceți griji cu privire la timpii lungi de încărcare a paginii. Ce este mai ales
  relevante în legătură cu dispozitivele mobile care nu sunt la îndemâna conexiunilor WiFi.
• Un număr mare de efecte speciale la tranziția diapozitivelor
• Multe efecte de animație la afișarea textului, a videoclipurilor și a imaginilor
• Pornirea videoclipului automat la deschiderea site-ului sau manual, pentru a alege, oprirea glisorului la vizionarea videoclipului,
  derulează înapoi etc.
• Selecție mare de setări de navigare
• Introduceți anunțuri post cu linkuri direct în glisor, în timp ce acesta este configurat pentru optimizarea seo
• Suport și instalare Google Fonts
• Folosind mai multe straturi (imagini, videoclipuri, subtitrări și link-uri) într-un singur diapozitiv, există nenumărate dintre ele
  se suprapun unul pe altul, creând astfel un videoclip realist sau orice prezentare.

Atenţie! Pentru a putea descărca online șabloane de glisare premium și obiecte de bibliotecă, trebuie să cumpărați o licență separată de la ThemePunch, care la momentul scrierii acestui text costă 19 USD, apoi să o activați introducând codul de achiziție în câmpul indicat în figura de mai jos.

Recenzie video modSliderRevolution

Astăzi ne vom uita la cum să creați un glisor Bootstrap folosind MIGX. Înainte de a începe studiul, vă recomand să îl vizitați mai întâi pe acesta.

Crearea unei configurații MIGX

Ma duc la management MIGXși adăugați un nou element numit glisor, în câmpul de înlocuire scrieți „ Adăugați diapozitive"și mergi la fila" Formtabs».

• Nume câmp - titlu, Legendă - Titlu.
• Fieldname - slide, Caption - Slide, Input TV Type - imagine.
• Nume câmp - descriere, Legendă - Descriere.
• Fieldname - idstranici, Caption - Specificați id-ul documentului la care să faceți legătura.

• Antet - Titlu, Câmp - titlu.
• Antet - Slide, Field - slide, Renderer - this.renderImage.
• Antet - Descriere, Câmp - descriere.
• Antet - id document, Câmp - idpage.

Notă:În esență, transferăm elemente din Formtabs. Da, puteți completa și câmpurile Lățimea coloanei - lățimea coloanelor.

Salvează (execută).

Pentru cei care nu vor să facă baie deloc, creăm o configurație goală și exportăm următorul cod în ea:

( "formtabs":[ ( "MIGX_id":1, "caption":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0430\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0430\u0430\u0434", "u0430\u0434", ", "print_before_tabs" ":"0", "fields":[ ( "MIGX_id":1, "field":"title", "caption":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432 \u043e\u043a" , "descriere":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u043b\u0430\u0430\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u043b\u0430\u0430\u0430\u043e\u043e\u043e\u043e\u043e\u043e\u043e\u043e\u043e\u043e\u043e\u043e\u043e\u043e\u043e\u043a\u043e\u043a , "inputTV": "", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config" , "surse": "", "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", " validare":"" , "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config", "sources":"", "inputOptionValues":"", " default":"" , "useDefaultIfEmpty":"0", "pos" :2 ), ( „MIGX_id”:3, „câmp”:„descriere”, „legendă”:”\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435", "descriere":"", " description_is_code":"0", "inputTV":"", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "display":"", " 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\u0435\u0435\u432\u432\u430\u430\u430\u430\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u0441\u0441\u0441\u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u0441\u0441\u0441\u0441\u0441\u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u0441\u0441\u0441\u0441\u0441\u0441\u0441\u0441 inputTV":"", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config", " surse":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":4 ) ], "pos":1 ) ], "contextmenus":"" , "actionbuttons":"", "columnbutton s":"", "filtre":"", "extins":( "migx_add":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0430\u0434\u0434 u044b", "disable_add_item":"", "add_items_directly":"", "formcaption":"", "update_win_title":"", "win_id":"", "maxRecords":"", "addNewItemAt":" jos", "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":"" ), "coloane":[ ( "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":"slide", "width":100, "sortable":"false", "show_in_grid":1, "customrenderer":"", "renderer":"acest .renderImage", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" ), ( "MIGX_id":3, "header" :"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435", "dataIndex":"descriere", "width":200, "sortable":"false", "show_in_grid":1, "customrenderer" ":"", "renderer":"", "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":"" ) ], "categorie": "")

Crearea televizorului cu configurație MIGX

În arborele MODX, pe „ Elemente", presa + opus punctului Câmpuri suplimentare" și introduceți următoarele:

• „Nume” - glisor; „Semnătură” - Glisor.
• În fila „Opțiuni de intrare” din „Tipul de intrare” selectați migx, iar în câmpul „Configurații” introduceți glisor.
• În fila „Disponibil pentru șabloane”, selectați acele șabloane pentru care va fi disponibilă introducerea în acest câmp.

Introducere a datelor

Să deschidem un document pentru care câmpul glisor este alocat cu MIGX cu configurație și să introducem câteva date în el.

Ieșire carusel Bootstrap 3 către pagină

Avem un marcaj HTML standard getbootstrap.com/docs/3.3/javascript/#carousel-examples, refaceți-l pentru MIGX și scrieți următorul cod în locul necesar în șablon:

Și creați bucăți:

tplsliderIndicator:

si bucata tplsliderItem cu urmatorul continut:

Bootstrap 4 ieșiri carusel pe pagină

Ca și în cazul precedent, luăm marcajul standard getbootstrap.com/docs/4.1/components/carousel/și refaceți-o, ca rezultat obținem

Unde este bucata tplsliderIndicator are urmatorul cod:

si bucata tplsliderItem cu urmatorul cod: