Modx karusel sa slikama na stranici proizvoda. velika i strašna

Pozdrav zajednici!

U ovoj ćete bilješci naučiti što su Multiple Formtabs i kako stvoriti konfiguraciju s različitim skupom podataka. I naravno, s vama ćemo izraditi slajder koji će imati različite vrste slajdova, a na kraju ćete pronaći vrlo zanimljiva priča koju se dugo nisam usudila nikome ispričati (osim, naravno, ako vas ne zanima, ali priča je zanimljiva - vjerujte mi). I tako, primjeri slajdova:

• Pozadinska slika
• Video pozadina
• jednobojna pozadina

Pažnja! Ovaj put djecu i trudnice ne maknite s ekrana, jer je to neka vrsta diskriminacije po dobi i spolu!

Tako će i biti

Još jedna najava! Često ću se pozivati ​​na prvu lekciju kako se ne bih ponavljao, stoga toplo preporučujem da se s njom upoznate

Za što?

Idemo maštati: Dobivate projekt gdje npr. na glavnoj stranici postoji slajder s nekoliko vrsta slajdova, jedan ima video pozadinu, drugi sliku, a treći ima punu boju npr. Nećete stvoriti jedan skup polja (jednu konfiguraciju) i utrpati (ispričavam se na leksikonu) sva ta polja u njega i govoriti upravitelju kako s tim živjeti i biti. Nije ozbiljan stav!? (nadam se da netko razumije)

Za uzrok

S tobom smo shvatili "zašto", sada saznajmo "kako". Ako ste već pročitali prvu lekciju, tada moramo otići na stranicu MIGX komponente i stvoriti 3 konfiguracije. Unaprijed instalirajte ColorPicker by Jako (ali nije bitno):

Sve što nije naznačeno od mene, preskočite!

čvrsta konfiguracija (puna boja)

• Tab postavke
  • Ime- čvrsta
  • Dodaj novu kategoriju- Klizač
• Tab Kartice obrazaca
  • Polja Polja stvoriti 3 polja
    1. Boja pozadine:
       • naziv polja-bgboja
       • Naslov- Odaberite boju pozadine
       • Vrsta TV ulaza- ColorPicker (ili onaj koji vi
         koristiti)
    2. Titula:
       • naziv polja Zaglavlje
       • Naslov- Naslov slajda
    3. Opis:
       • naziv polja- opis
       • Naslov- Opis slajda
       • Vrsta TV ulaza-tekstualno područje
  • Višestruko polje Formtabs-tip( Dana vrijednost bit će naziv ključa u
    izlazni niz. Zadano: MIGX_formaname)
  • - S punom bojom na pozadini (Tekst
    ovu konfiguraciju na popisu za odabir)
  • - čvrsta (vrijednost polja istog tipa
    u nizu)

video konfiguracija

• Tab postavke
  • Ime- video
  • Kategorija- Klizač
• Tab Kartice obrazaca
  • Polja- Napravite 1 karticu i u polju Polja opet, stvaramo 3 polja, samo je jedno od tih polja različite vrste.

    Ovdje bih trebao pojasniti da broj polja i njihove vrste u različitim konfiguracijama mogu biti različiti koliko god je vaša mašta ograničena ... Znam li da je sve u redu s vašim fantazijama?

    1. Video (tj. datoteka):
       • naziv polja- video
       • Naslov- Upload video
       • Vrsta TV ulaza- datoteka
    2. Titula:
       • naziv polja Zaglavlje
       • Naslov- Naslov slajda
    3. Opis:
       • naziv polja- opis
       • Naslov- Opis slajda
       • Vrsta TV ulaza-tekstualno područje
  • Višestruko polje Formtabs- vrsta
  • Multiple Formtabs Optionstext- S videom u pozadini
  • Multiple Formtabs Optionsvalue- video

konfiguracija klizača

Prema zadanim postavkama, prihvatit će sliku i bit će neka vrsta glavne konfiguracije.

• Tab postavke
  • Ime- klizač
  • Kategorija- Klizač
  • Zamjena "Dodaj stavku"- Dodajte slajd
  • Opis obrasca
  • naslov prozora- Dodavanje/uređivanje slajda
• Tab Kartice obrazaca
  • Polja- Napravite 1 karticu iu polju Polja ponovno kreirajte 3 polja
    1. Slika:
       • naziv polja- slika
       • Naslov- Učitajte sliku
       • Vrsta TV ulaza- slika
       • Navedite izvor datoteka koje trebate, opisao sam ovaj zadatak u prvoj lekciji
    2. Titula:
       • naziv polja Zaglavlje
       • Naslov- Naslov slajda
    3. Opis:
       • naziv polja- opis
       • Naslov- Opis slajda
       • Vrsta TV ulaza-tekstualno područje
  • Više kartica obrazaca- Ovdje je prava čarolija, moramo odabrati konfiguracije stvorene u prethodnim koracima, uključujući i onu koju trenutno stvaramo, tj. odaberite video, solid i klizač

    Konfiguracije klizač neće biti na popisu, jer zapravo još nije kreiran, pa ćete morati proći kroz preostale točke, spremiti konfiguraciju, ponovno otvoriti ovu konfiguraciju za uređivanje, i ovaj put će biti dostupna na listi klizač

    
    

    Još jedno pojašnjenje: konfiguracije će biti poredane točno onim redoslijedom koji ste odabrali, tj. prema zadanim postavkama, prilikom dodavanja novog slajda, bit će odabran onaj koji će biti prvi na popisu
    

  • Oznaka s više kartica obrazaca- Odaberite vrstu slajda (ovdje je naveden tekst
    koju će korisnik vidjeti pokraj popisa za odabir vrste slajda)
  • Višestruko polje Formtabs- vrsta
  • Multiple Formtabs Optionstext- Sa slikom na pozadini
  • Multiple Formtabs Optionsvalue- slika
• Tab Stupci
  • Polje Stupci. Dodavanje dva elementa
    1. Zaglavlje
       • Tab Stupac
         • Zaglavlje- Naslov
         • polje Zaglavlje
       • Tab Uređivač ćelija
         • Urednik- this.textEditor
    2. Opis
       • Tab Stupac
         • Zaglavlje- Opis
         • polje- opis
       • Tab Uređivač ćelija
         • Urednik- this.textEditor

Kao što ste već primijetili, u prve dvije konfiguracije nismo kreirali tzv. stupce za ispis u kontrolnoj ploči, tj. prilikom uređivanja samog TV parametra. Ovi stupci moraju biti kreirani u potonjem, tj. u konfiguraciji koja će biti naznačena u TV-u i u kojoj u polju Više kartica obrazaca tab Kartice obrazaca bit će navedene sve konfiguracije koje su nam potrebne, uključujući i samu konfiguraciju

Idemo i brzo napravimo TV s tipom ulaza migx , na terenu Konfiguracije napišite naziv naše konfiguracije, tj. klizač , dodijelite potrebne predloške i otvorite resurs za uređivanje ili ga izradite. Ako smo sve napravili kako treba, trebali bismo vidjeti sljedeću sliku:

Na sliku se može kliknuti, a ako ste već pogledali gif s linka na početku bilješke, onda je ovaj taj

Brzo ispunjavamo podatke i prelazimo na izlaz naših slajdova.

Kako povući?

Unos podataka je dobar, ali što je s izlazom? Ne brinite drugovi, sve će biti u redu. Za izlaz opet imamo 2 dobre opcije, a obje smo opcije razmotrili u , ovo je izvorni MIGX isječak getImageList i svemogući fenomen. Pogledajmo kako izgledaju naši podaci:

getImageList

Pozovimo isječak bez navođenja parametra tpl kako bismo vidjeli neobrađene podatke:

[] Niz ( => 14 => slika => files/avatar.png => Ovo je slajd sa slikom => Pa, kratak opis) [_alt] => 0 [_first] => 1 [_last] => => 1 = > klizač) Array ( => 15 => video => files/My home is shameful.MOV => I ovo je video => Da, zaista! [_alt] => 1 [_first] => [ _last] => => 2 => klizač) Array ( => 16 => solid => ff0000 => I crvena je ovdje lijepa boja => Sviđa mi se! [_alt] => 0 [_first] => [_last ] => 1 => 3 = > klizač)

fenomen

($_modx->resource.slider| fromJSON | print) Array ( => Array ( => 14 => image => files/avatar.png => Ovo je slajd slike => Pa, kratak opis)) => Array ( = > 15 => video => datoteke/Moj dom je sramotan.MOV => I ovo je video => Da, zaista!) => Niz ( => 16 => čvrsto => ff0000 => A ovdje je crveno prekrasna boja => sviđa mi se!))
Kao što vidimo, u našim nizovima, između ostalog, ključ tip s vrijednostima koje smo naveli prilikom kreiranja konfiguracija.

Kako bismo prikazali naš klizač s getImageList, moramo stvoriti 3 dijela s nazivima naših ključnih vrijednosti tip, tj.: slika , video i solid . Dalje ćete shvatiti zašto.

Primjeri dijelova:

// Slika komada

// Chunk video // Čvrsti komad
A poziv bi trebao izgledati ovako:

Ovdje uzimamo vrijednosti iz polja svakog slajda i stoga smo stvorili tri dijela čija imena odgovaraju vrijednostima polja Višestruko polje Formtabs

Pa, na fenomen sve izgleda puno jednostavnije:

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

(/ako)

Ishod i obećana priča

Kao što vidimo, MIGX se nosi s ovim zadatkom, ako ne reći "izvrsno", ali barem "dobro". Još jednom ponavljam da vas MIGX ne ograničava u broju konfiguracija, tabova u svakoj konfiguraciji i u broju polja u njima. A primjeri, kao što ste već, nadamo se, shvatili, prilično su jednostavni tako da se i vi možete lako upoznati s ovom funkcionalnošću. I još nešto važno: kada ispisujete dijelove, toplo preporučam provjeru popunjenosti polja i uvijek vodite računa o tome da podaci mogu ili ne moraju biti popunjeni ili iz nekog razloga ne dolaze, i stoga koristite phx filtere za MODX sintaksu odnosno stanja u fenom.

Hvala svima na pažnji, svima bih poželio sreću, ali neću, jer kako se kaže: “Poželi gubitnicima sreću”, pa ja vama želim sreću i zdravlje ili tako nešto, ali koga briga onda priča .

Jednom su nam došli moji rođaci, među njima i moj nećak (sin moje sestre) iz susjedna država i moja dva nećaka (Skoro smo svi istih godina). Kuća na selu, sunčana središnja Azija, mala planina i rijeka u blizini. Iste noći smo nas četvero odlučili prošetati upravo tom rijekom i u početku je sve bilo mirno, nije bilo razloga za uzbuđenje. Jako su se zabavljali, pričali priče (ponekad strašne i jezive), šalili se i tome slično. No, u jednom trenutku primijetio sam da je jedan od mojih nećaka problijedio i to nije samo verbalni obrat ili uljepšavanje, jer takav strah i zbunjenost na licu osobe prije i poslije ovog incidenta nisam vidio. Ne skidajući pogled, pogledao je u pravcu gdje sam ja bio okrenut leđima, tj. činilo mi se da gleda nešto ili nekoga iza mene, ali ne direktno iza i blizu, činilo mi se da gleda negdje u daljinu. Bilo je strašno i pitao sam ga: - Što se dogodilo? A on…

Ovaj odlomak će se morati pretvarati da priča u ovoj bilješci ima nastavak, ali zapravo sam vas samo malo prevario, nadajući se da ću vas moći malo oraspoložiti tehničkim, dosadnim i velikim tekstom i da ćete biti u dobrom raspoloženje. Sama priča je stvarna i vrlo zanimljiva. Sada, hvala svima na pažnji!

UPD:
Ako što sam ja Baha!?

Ako odjednom netko želi zahvaliti rublju, neka tako i bude: Sberbank kartica +79609354545

U ovoj lekciji pokrit ćemo osnove MIGX-a i raditi na novom klizaču koji možete koristiti na svom blogu.

Zahtjevi:

• MODX Revolution web mjesto.
• Instalirana MIGX prilagođena vrsta varijable predloška (putem upravljanja paketima).
• Galerijski klizač ili skripta koju želimo integrirati. Koristio sam WooThemesov FlexSlider jer se prilagođava širini spremnika (vrlo važno za responzivni dizajn!). Također je vrlo konfigurabilan, podržava pomicanje na pametnim telefonima i izgleda savršeno izvan kutije.
• Instaliran isječak phpthumbof putem upravitelja paketa za automatsko obrezivanje slika.
• Sve slike!

Početi

Rad koristi nekoliko dijelova. Prvo moramo instalirati MIGX TV i moramo uzeti ove podatke iz prednjeg kraja i omogućiti da naš slajder radi. Ovaj vodič pretpostavlja korištenje FlexSlidera, mi ćemo se pobrinuti da oznaka bude ono što treba, ali bi također trebalo biti vrlo jednostavno prilagoditi se drugim klizačima.

Korak 1: Instalirajte MIGX TV za upravljanje slikom

Počnimo s postavljanjem televizora. Snaga MIGX-a je u tome što možete definirati polja koja su vam potrebna. Vidjet ćete ih kao tablicu i trebate samo imenovati naslove. U ovom slučaju trebat će mi tri različita polja:

• Polje za unos za odabir slike u datotečnom sustavu (ili u 2.2 iz vaših medijskih izvora).
• Polje za unos teksta za unos naslova/oznake/opisa. FlexSlider odlično radi s opisima, pa ćemo ih koristiti.
• Također sam dodao unos teksta za "Set". Kao što ćemo vidjeti kasnije, koristit ću ga za beskonačan broj pojedinačnih klizača koji će biti dodani s bilo kojeg mjesta u resursu..

Možete koristiti druga polja ako želite, ali tutorijal će koristiti upravo ona polja koja sam gore naveo.

Prijeđimo na stvaranje TV-a. Ovdje je klizač s opisima slika (u slučaju da se ništa ne vidi na sličici).

Napravite novu varijablu predloška na kartici Elementi i dodijelite joj odgovarajući naziv. Nazvat ću ga ws.images, ako mu date svoje ime, ne zaboravite zamijeniti [[*ws.images]] svojim imenom. Na kartici Mogućnosti unosa odaberite vrstu "migx" iz padajućeg izbornika. Ako ne vidite ovu vrstu, provjerite jeste li instalirali MIGX paket putem Upravitelja paketa. Primijetit ćete da je nekoliko opcija dodano na dnu zaslona, ​​uključujući kartice obrazaca i stupce mreže. Ovo se odnosi na MODX >2.0, za starije verzije preporučam nadogradnju.

Imajte na umu da polja Form Tabs i Grid Columns moraju biti ispunjena važećim JSON nizovima. JSON je u osnovi način prikazivanja objekata, nizova ili kombinacija ključ->vrijednost na način koji podržava gotovo svaki programski jezik. Ovdje su tehničke specifikacije i neki primjeri sa službene JSON stranice.

Postavljanje kartica obrazaca

Obrazac vam omogućuje korištenje različitih kartica. Svaka kartica ima opis i nekoliko polja. S ovim možete učiniti mnogo naprednih stvari jer ćete većinu vremena koristiti jednu karticu, pa zapamtite za sada. Ovdje je JSON kod za kartice obrazaca koje koristim:

[("caption":"Slika", "fields": [ ("field":"set","caption":"Set"), ("field":"description","caption":"Description") , ("field":"image","caption":"Image","inputTVtype":"image") ] )]

Prođimo kroz svaki redak:

• Prvi prikazuje niz kartica koji se otvara uglatom zagradom ([), a objekt kartice otvara se vitičastom zagradom ((). Nakon toga definiramo naslov polja Slika. Imajte na umu da trebate koristiti dvostruke navodnike (" ") za svojstva i njihove vrijednosti, pojedinačni mogu dovesti do neočekivanih rezultata. Ako imate ove zagrade u bilo kojem svojstvu, vrijednosti, izbjegnite ih kosom crtom (\). Nakon definiranja opisa (naslova), nastavimo i počnimo definirati niz "polja", otvarajući ga uglatim zagradama ([) .
• Naše prvo polje definirat ćemo kao postavljeno. "field": "set" znači da želimo imati običan unos teksta u ovom polju. “Caption”:”Set” - dajemo opis naziva "set" - ovo će biti naziv za unos običnog teksta. Zatim mu dodijelite naslov "Set", koji će biti prikazan na obrascu kao oznaka polja.
• Zatim na isti način definirajte polje opisa
• Linija 4 definira sliku. Ono što je posebno ovdje je da koristimo drugi TV (nazvan "slika") kao vrstu ulaza. Ovo je vrlo snažna značajka MIGX-a koja vam omogućuje korištenje drugih televizora za izgradnju vašeg oblika. U ovom slučaju TV sa "slikom" je vrlo jednostavan: vrsta ulaza je slika, au 2.2 možete ga dodijeliti ispravnom izvoru medija. Ne morate ga povezivati ​​s predlošcima kao što biste to učinili s običnim TV-om. Drugi način za to (koji koristim na drugim MIGX TV-ima) je napraviti radio kutije ili odabrati kutije.
• Peti redak zatvara niz polja. Također imajte na umu da zadnji redak koji definira polje (sliku) ne završava zarezom - ovo je važno! Ako stavite zarez u polje, JSON se neće analizirati i vaš obrazac neće raditi.
• Šesti redak zatvara objekt kartice i cijeli niz kartica.

Dakle, na ovaj način smo stvorili "image" TV! Trebali biste već imati obrazac za popunjavanje podataka, ali trebate označavanje da biste ga prikazali...

Postavljanje oznake stupca

Izgled stupca je tablica na TV ploči resursa. Morate definirati zaglavlja za ovu tablicu putem opcija unosa oznake stupca. Ovdje je (opet JSON) definicija onoga što koristim: [( "header": "Set", "sortable": "true", "dataIndex": "set" ),( "header": "Description" , "sortable" : "true", "dataIndex": "description" ),( "header": "Slika", "sortable": "false", "dataIndex": "image","renderer": "ovo. renderImage" )]

Prođimo kroz svaki redak:

• Otvorite polje naslova uglatim zagradama ([), a naslov petog stupca vitičastim zagradama (().
• Imenujemo zaglavlje "Skup", naznačujemo da se može razvrstavati (razvrstavati) i specificiramo parametar "set", koji odgovara definiciji kartica Postavi forme, koje imaju "field":"set".
• Kraj skupa / početak opisa
• Zaglavlje nazivamo "Description", sortiramo i povezujemo ga s opisom polja dataIndex.
• Završni opis / početna slika
• Imenujte zaglavlje "Slika", nerazvrstljivo, i preslikajte ga na dataIndex - polje slike. Također ćemo definirati renderer koji će vam u ExtJS-u omogućiti promjenu izgleda izlaznih podataka. U ovom slučaju "this.renderImage" renderer će automatski uzeti url odabrane slike i umjesto toga prikazati minijaturu.
• Kraj objekta slike i niza zaglavlja.

Nakon toga možete dodijeliti ovaj MIGX TV vašem predlošku i provjeriti rezultat. Markup se ne prikazuje? Vratite se na kartice i provjerite jesu li sve vrijednosti unutar dvostrukih navodnika, a ne jednostrukih navodnika i provjerite ima li dodatnih zareza.

Informacija

Koristite JSONLint za provjeru JSON-a.

• Ispunite detalje
• Donesite podatke na stranicu

Ispunite našu varijablu predloška ws.image proizvoljnim podacima

Ako pokušate prikazati ove podatke kao normalan TV, vidjet ćete nešto poput ovoga:

[( "MIGX_id":"1","set":"set1","description":"Označi mačku koja krade kobasicu i jede kad je budna","image":"demo/uroki/15/1 .jpg" ),( "MIGX_id":"2","set":"set1","description":"bubanj","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":"možeš ubiti čovjeka ovom knjigom","image":"demo/uroki/15/4.jpg" )]

Ovo je JSON niz s unesenim poljima i vrijednostima!

Budući da MIGX dolazi s getImageList isječkom, možete pokušati prikazati podatke pomoću njega. Dokumentaciju za ovaj isječak možete pronaći ovdje. Ili napravite vlastiti isječak (parseMIGXToGallery), koji koristim za generiranje oznaka iz &tpl dijela na temelju TV podataka:

fromJSON($input); $izlaz = polje(); if (!$input || empty($tpl)) return "nema stvari"; foreach ($input as $row) ( if (isset($set) && !empty($set) && ($set != $row["set"])) continue; $output = $modx->getChunk($ tpl, $row); ) return implode("\n", $output);

Prođimo kroz svaki redak:

• Uzimamo varijablu $input (koja uzima podatke sadržane u parametru &input u pozivu isječka, više o tome kasnije) i analiziramo JSON u php polje.
• Postavit ćemo prazan niz da drži naš izlaz.
• Provjerimo da varijabla $input nije NULL ili False, što bi značilo da JSON nije proslijeđen ili da je nevažeći, a također provjerimo nije li varijabla $tpl (koju prosljeđuje parametar &tpl u pozivu isječka) prazna. Ako je bilo koji od uvjeta True, ispisat ćemo "praznu" poruku o pogrešci, koja će služiti kao savjet upravitelju sadržaja da nešto nije u redu.
• Zatim iterirajte svaki element niza $input kao $row.
• Provjeravamo je li postavljena varijabla $set (koja je postavljena u pozivu isječka u parametru &set) i ako nije prazna, provjeravamo njezinu vrijednost u odnosu na vrijednost "set" trenutnog retka. Ako to nije ono što želite, prijeđite na sljedeći element u nizu.
• Dobivamo dio pod nazivom $tpl i umećemo vrijednosti trenutnog retka u njega kao rezervirana mjesta.
• Zatvaramo foreach petlju.
• Na kraju, lijepimo niz $output zajedno, odvajajući svaki element prijelomom retka, i šaljemo ga na stranicu.
• Dakle, sumirajući gore navedeno, uzimamo ulaz, ponavljamo svaki redak i provjeravamo pripada li skupu koji smo definirali, zatim dobiva dio i dodaje sve do izlaza.
• Pokreni isječak

Sve što nam treba je poziv isječka gdje su nam potrebne naše slike i komad koji će ispisati sve na pravi način za FlexSlider. Evo kako se isječak zove:

[]` &set=`set1` ]]

I komad images.gallery.tpl:

[[+opis]]

Također trebate zamotati cijeli izlaz isječka u div i neuređenu listu, prema FlexSlider dokumentaciji. Da sve bude lakše, stavimo sve u jedan komad. Moj dio se zove klizač i sadrži sljedeće:

Koristeći ovaj dio, mogu se jednostavno povezati s nečim u sadržaju, što je puno lakše zapamtiti ili staviti u varalicu.

[[$slider?set=`naziv skupa`]]

Sada možete početi postavljati FlexSlider.

Korak 3: Korištenje FlexSlidera

FlexSlider je relativno jednostavan za korištenje (preuzmite njegove datoteke) i postoji mnoštvo primjera na njegovoj web stranici. Također trebate uključiti poziv za jQuery na stranicu i njegovu CSS datoteku (zapakiranu u zip datoteku) i dodatak FlexSlider (također u zip arhivi). Nakon toga trebate pokrenuti ispravan element pomoću sljedećeg koda:

Stranica savjetuje da sve stavite u glavu datoteke, ali ja osobno sve stavljam na dno. Ako je vaš klizač prikazan na vrhu stranice, onda je bolje da ga postavite tako da se učitava prije nego se stranica pojavi, pa je postavite gdje god želite.

To je sve! Nadam se da će ovaj dugačak članak pomoći nekome da počne koristiti MIGX i klizače kao što je FlexSlider!

Danas mali članak o kako stvoriti klizač u modxu pomoću paketa BanerY. Ovaj paket se može preuzeti i instalirati iz repozitorija.

Izrada klizača s BanerY

I tako postoji statički klizač, neka to bude obični bootstrap klizač, s ovom oznakom:

Cilj je stvoriti upravljani klizač iz ove oznake. Započnimo.

Počnimo s izradom slajdova u BannerY, za to idemo na Aplikacije - BannerY - Pozicije i stvorimo poziciju (na primjer, home-slider).

Nakon toga idite na karticu Banneri i kliknite na gumb Novi banner. Otvorit će se prozor za izradu novog bannera.

Punimo sve:

• Naziv, može se prikazati pomoću [[+ime]].
• Odaberite sliku - [[+slika]].
• Navedite URL kamo ići - [[+url]].
• Ispunite opis - [[+opis]] - ovdje, usput, možete naplatiti ne samo tekst, već i obični html, i to je cool.
• Pa, odaberite položaj (ranije ste ga stvorili).

I tako stvaramo potreban broj slajdova.

Sada trebate rastaviti gornju oznaku na dijelove i prilagoditi kod u dijelovima sintaksi BanerY

Stvorite dio za zasebni klizač s klasom aktivan, neka bude tobogan i unesite sintaksu u njega:

Sada kopirajte taj komad i dajte mu ime slajd2 i uklonite klasu aktivan

Pa, ostaje, zapravo, samo prikazati slajdove.

[]

Kao rezultat toga dobivamo sljedeće:

To je to) Tako je lako stvoriti klizač na modxu koristeći BanerY.

Da, usput, njegova dokumentacija je ovdje: docs.modx.pro/components/bannery/snippet

Slider Revolution jedan je od najpopularnijih klizača zbog svog velikog raspona značajki i jednostavnosti korištenja.
od ThemePunch. Ovaj klizač je kupljen 273,441+ puta i koristi ga 2500000+ stranica širom svijeta.

Ispod su neke od glavnih prednosti ovog klizača, koje ga razlikuju od besplatnih i
većina premium analoga:

• Snažan vizualni uređivač - prilagodite prikaz klizača kako bi odgovarao potrebama vašeg projekta putem praktičnog izbornika u kojem
  svaka funkcija je na svom mjestu. Stroga gradacija neće vam dopustiti da se zbunite. Jedina poteškoća u
  prvi put će biti želja da ih sve isprobate.
• Kontrola varijabilnosti svakog slajda - planirani prikaz blokova na ekranu računala, tableta i telefona
  prikazan u vizualnom uređivaču. Možete promijeniti veličinu slajdova pojedinačno za svaki uređaj.
  Responzivni predložak neće dopustiti da slike i videozapisi budu iskrivljeni ili zauzmu više prostora nego što je potrebno
  pogodno gledanje.
• Rad s društvenim mrežama i video hosting - Slider Revolution pete generacije omogućuje vam uključivanje u klizač
  podaci s Instagrama, Facebooka, Flickra, Twittera, Vimea i Youtubea. Ako planirate sami objaviti video
  poslužitelju, možete koristiti HTML5 jezik. Dijelovi koda bit će automatski napisani.
• Visoke performanse i optimizacija slajdova - dodatak radi brzo u načinu uređivanja i smanjuje
  težinu klizača bez gubitka kvalitete sadržaja. Ne morate brinuti o dugom vremenu učitavanja stranice. Što je posebno
  relevantni u odnosu na mobilne uređaje koji su izvan dosega WiFi veza.
• Ogroman broj specijalnih efekata pri prijelazu slajdova
• Mnogo animacijskih efekata pri prikazivanju teksta, videa i slika
• Automatsko pokretanje videa prilikom otvaranja stranice ili ručno, po izboru, zaustavljanje klizača prilikom gledanja videa,
  premotavanje, itd.
• Veliki izbor postavki navigacije
• Umetnite najave postova s ​​poveznicama izravno u klizač, dok je konfiguriran za SEO optimizaciju
• Podrška i instalacija Google Fontova
• Koristeći mnoge slojeve (slike, videozapise, naslove i poveznice) na jednom slajdu, postoji ih bezbroj
  međusobno se preklapaju, stvarajući tako realističan video ili bilo kakvu prezentaciju.

Pažnja! Kako biste mogli preuzeti Online premium slajder predloške i objekte biblioteke, morate kupiti zasebnu licencu od ThemePunch, koja u trenutku pisanja ovog teksta košta 19 USD, a zatim je aktivirati unosom kupovnog koda u polje navedeno u slika ispod.

Video recenzija modSliderRevolution

Danas ćemo pogledati kako stvoriti Bootstrap klizač koristeći MIGX. Prije početka studija, preporučujem da prvo posjetite ovo.

Stvaranje MIGX konfiguracije

Idem u upravu MIGX i dodajte novi element pod nazivom klizač, u polje za zamjenu upišite " Dodajte slajdove"i idi na karticu" Kartice obrazaca».

• Naziv polja - naslov, Opis - naslov.
• Naziv polja - slajd, naslov - slajd, vrsta TV ulaza - slika.
• Naziv polja - opis, Naslov - opis.
• Naziv polja - idstranici, Caption - Navedite ID dokumenta na koji želite povezati.

• Zaglavlje - Naslov, Polje - naslov.
• Zaglavlje - slajd, polje - slajd, prikazivač - this.renderImage.
• Zaglavlje - Opis, Polje - opis.
• Zaglavlje - ID dokumenta, Polje - ID stranice.

Bilješka: U biti, mi prenosimo elemente iz Formtabs-a. Da, također možete ispuniti polja Širina stupca - širina stupaca.

Spremiti (izvršiti).

Za one koji se uopće ne žele kupati, kreiramo praznu konfiguraciju i u nju izvozimo sljedeći kod:

( "formtabs":[ ( "MIGX_id":1, "caption":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u044b", "print_before_tabs ", "print_before_tabs" ":"0", "fields":[ ( "MIGX_id":1, "field":"title", "caption":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432 \u043e\u043a" , "description":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u043b\u0430\u0439\u0434\u0430", "description_is_code":"0" , "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":"", "display":"", "sourceFrom":"config", "sources":"", "inputOptionValues":"", " zadano":"" , "useDefaultIfEmpty":"0", "pos" :2 ), ( "MIGX_id":3, "polje":"opis", "naslov":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435", "opis":"", " 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\u043d\u0442\u0430 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f", "description":"", "description_is_code":"0", " inputTV":"", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config", " izvori":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":4 ) ], "pos":1 ) ], "kontekstni izbornici":"" , "actionbuttons":"", "gumb stupca s":"", "filtri":"", "prošireno":( "migx_add":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0430\u0439\u0434\ 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":"slide", "width":100, "sortable":"false", "show_in_grid":1, "customrenderer":"", "renderer":"ovo .renderImage", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" ), ( "MIGX_id":3, "header" :"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435", "dataIndex":"description", "width":200, "sortable":"false", "show_in_grid":1, "custom renderer ":"", "renderer":"", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" ), ( " MIGX_id":4, "zaglavlje":"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": "")

Izrada TV-a s MIGX konfiguracijom

U MODX stablu, na " Elementi”, pritisnite + suprotno od točke Dodatna polja" i unesite sljedeće:

• "Ime" - klizač; "Potpis" - klizač.
• U kartici "Input Options" u "Input Type" odaberite migx, au polju "Configurations" unesite klizač.
• U kartici "Dostupno za predloške" odaberite one predloške za koje će unos u ovo polje biti dostupan.

Unos podataka

Otvorimo dokument za koji je polje klizača dodijeljeno MIGX s konfiguracijom i u njega unesemo neke podatke.

Bootstrap 3 karusel izlaz na stranicu

Imamo standardnu ​​Html oznaku getbootstrap.com/docs/3.3/javascript/#carousel-examples, preradite je za MIGX i napišite sljedeći kod na potrebno mjesto u predlošku:

I stvorite komade:

tplsliderIndicator:

i komadić tplsliderItem sa sljedećim sadržajem:

Bootstrap 4 karusel izlaz po stranici

Kao iu prethodnom slučaju, uzimamo standardnu ​​oznaku getbootstrap.com/docs/4.1/components/carousel/ i ponoviti, kao rezultat dobivamo

Gdje je komad tplsliderIndicator ima sljedeći kod:

i komadić tplsliderItem sa sljedećim kodom: