Ciao comunità!

In questo post imparerai cosa sono i Formtab multipli e come creare una configurazione con un diverso set di dati. E ovviamente creeremo con te uno slider che avrà diversi tipi di slide, e alla fine troverai una storia molto interessante che non ho osato raccontare a nessuno per molto tempo (a meno che ovviamente tu non sia interessato, ma la storia è interessante - credimi). E allora, esempi di slide:

• Immagine di sfondo
• Video in sottofondo
• Tinta unita su sfondo

Attenzione! Questa volta non c’è bisogno di tenere i bambini e le donne incinte lontani dagli schermi, perché si tratta di una sorta di discriminazione basata sull’età e sul sesso!

Ecco come sarà

Un altro annuncio! Farò spesso riferimento alla prima lezione per non ripetermi, quindi consiglio vivamente di verificarla

Per quello?

Immaginiamo: ti imbatti in un progetto in cui, ad esempio, nella pagina principale c'è uno slider che ha diversi tipi di diapositive, uno ha un video sullo sfondo, un altro ha un'immagine e il terzo, ad esempio, ha un tinta unita. Non creerai una serie di campi (una configurazione) e roba (scusate per il vocabolario) tutti questi campi al suo interno e dirai al manager come convivere e stare con esso. Questo non lo è approccio serio!? (spero che qualcuno capisca)

Mettiti al lavoro

Abbiamo capito il “perché”, ora scopriamo il “come”. Se hai già letto la prima lezione, allora dobbiamo andare alla pagina dei componenti MIGX e creare 3 configurazioni. Preinstallare ColorPicker di Jako (ma questo non è essenziale):

Tutto ciò non specificato da me, saltatelo!

Configurazione solida

• Tab Impostazioni
  • Nome-solido
  • Aggiungi nuova categoria- Cursore
• Tab Schede formato
  • Campi Campi creare 3 campi
    1. Colore di sfondo:
       • Nome campo- colore bg
       • Didascalia- Seleziona il colore di sfondo
       • Tipo di ingresso TV- ColorPicker (o quello tu
         utilizzo)
    2. Intestazione:
       • Nome campo- intestazione
       • Didascalia- Titolo della diapositiva
    3. Descrizione:
       • Nome campo- descrizione
       • Didascalia- Descrizione della diapositiva
       • Tipo di ingresso TV-areatesto
  • Campo di più schede formato- type (Questo valore sarà il nome della chiave inserita
    matrice di uscita. Predefinito: MIGX_nomeforma)
  • - Con fondo in tinta unita (Text
    configurazione data nell'elenco di selezione)
  • - solido (il valore del campo dello stesso tipo
    nella matrice)

configurazione video

• Tab Impostazioni
  • Nome-video
  • Categoria- Cursore
• Tab Schede formato
  • Campi- Crea 1 scheda e nel campo Campi Ancora una volta creiamo 3 campi, solo uno di questi campi è di tipo diverso.

    Dovrei chiarire qui che il numero di campi e la loro tipologia nelle diverse configurazioni può variare tanto quanto la tua immaginazione è limitata... E so che la tua immaginazione va bene?

    1. Video (cioè file):
       • Nome campo-video
       • Didascalia- Carica video
       • Tipo di ingresso TV- fascicolo
    2. Intestazione:
       • Nome campo- intestazione
       • Didascalia- Titolo della diapositiva
    3. Descrizione:
       • Nome campo- descrizione
       • Didascalia- Descrizione della diapositiva
       • Tipo di ingresso TV-areatesto
  • Campo di più schede formato- tipo
  • Opzioni di schede formato multipletesto- Con video in sottofondo
  • Valore opzioni schede formato multiple-video

configurazione del dispositivo di scorrimento

Per impostazione predefinita richiederà un'immagine e sarà una sorta di configurazione principale.

• Tab Impostazioni
  • Nome- cursore
  • Categoria- Cursore
  • Sostituzione di "Aggiungi elemento"- Aggiungi diapositiva
  • Didascalia modulo
  • Titolo della finestra- Aggiungi/modifica diapositiva
• Tab Schede formato
  • Campi- Crea 1 scheda e crea nuovamente 3 campi nel campo Campi
    1. Immagine:
       • Nome campo- immagine
       • Didascalia- Carica un'immagine
       • Tipo di ingresso TV- immagine
       • Specifica l'origine dei file di cui hai bisogno, ho descritto questa attività nella prima lezione
    2. Intestazione:
       • Nome campo- intestazione
       • Didascalia- Titolo della diapositiva
    3. Descrizione:
       • Nome campo- descrizione
       • Didascalia- Descrizione della diapositiva
       • Tipo di ingresso TV-areatesto
  • Schede formato multiple- È qui che entra in gioco la magia, dobbiamo selezionare le configurazioni create nei passaggi precedenti, inclusa quella che stiamo creando ora, ovvero seleziona video, solido e cursore

    Configurazioni cursore non sarà nell'elenco, perché in realtà non è stato ancora creato, quindi dovrai passare attraverso i punti rimanenti, salvare la configurazione, aprire nuovamente questa configurazione per modificarla e questa volta sarà disponibile nell'elenco cursore

    
    

    Ancora una precisazione: le configurazioni verranno ordinate esattamente nell'ordine in cui hai scelto, ovvero per impostazione predefinita, quando si aggiunge una nuova diapositiva, verrà selezionata la prima nell'elenco
    

  • Etichetta di più moduli- Seleziona il tipo di diapositiva (il testo è indicato qui
    che l'utente vedrà accanto all'elenco di selezione del tipo di diapositiva)
  • Campo di più schede formato- tipo
  • Opzioni di schede formato multipletesto- Con un'immagine sullo sfondo
  • Valore opzioni schede formato multiple- immagine
• Tab Colonne
  • Campo Colonne. Aggiungi due elementi
    1. Intestazione
       • Tab Colonna
         • Intestazione- Intestazione
         • Campo- intestazione
       • Tab Editor di celle
         • Editore- this.textEditor
    2. Descrizione
       • Tab Colonna
         • Intestazione- Descrizione
         • Campo- descrizione
       • Tab Editor di celle
         • Editore- this.textEditor

Come avrai già notato, nelle prime due configurazioni non abbiamo creato le cosiddette colonne per l'output nel pannello di controllo, cioè quando si modifica il parametro TV stesso. Queste colonne devono essere create nell'ultima, ad es. nella configurazione che verrà indicata in TV e in quale sul campo Schede formato multiple nella scheda Schede formato Verranno elencate tutte le configurazioni di cui abbiamo bisogno, inclusa questa stessa configurazione

Andiamo a creare velocemente, sul campo, una TV con la tipologia di ingresso migx Configurazioni scriviamo il nome della nostra configurazione, ovvero slider , assegna i modelli necessari e apri la risorsa per la modifica o creala. Se abbiamo fatto tutto correttamente, dovremmo vedere la seguente immagine:

L'immagine è cliccabile e se hai già guardato la gif tramite il link all'inizio della nota, allora è proprio questa

Compiliamo i dati molto velocemente e passiamo alla visualizzazione delle nostre slide.

Come recedere?

L'input dei dati è buono, ma per quanto riguarda l'output? - Non preoccupatevi, compagni, andrà tutto bene. Per l'output, abbiamo ancora 2 buone opzioni e abbiamo considerato entrambe queste opzioni in , questo è uno snippet MIGX nativo getImageList e onnipotente fenomeno. Vediamo come appaiono i nostri dati:

getImageList

Chiamiamo lo snippet senza specificare il parametro tpl per vedere i dati grezzi:

[] Array ( => 14 => immagine => files/avatar.png => Questa è una diapositiva con un'immagine => Bene, una breve descrizione) [_alt] => 0 [_first] => 1 [_last] = > => 1 => slider) Array ( => 15 => video => file/La mia casa è vergognosa.MOV => E questo è un video => Sì, davvero! [_alt] => 1 [_first] => [_last] => => 2 => slider) Array ( => 16 => solido => ff0000 => E qui il colore rosso è bellissimo => mi piace! [_alt] => 0 [_first] => [ _ultimo] => 1 => 3 => cursore)

fenomeno

($_modx->resource.slider| fromJSON | print) Array ( => Array ( => 14 => immagine => files/avatar.png => Questa è una diapositiva con un'immagine => Bene, una breve descrizione)) => Array ( = > 15 => video => file/La mia casa è vergognosa.MOV => E questo è già un video => Sì, davvero!) => Array ( => 16 => solido => ff0000 => Ed ecco il rosso, un bel colore => mi piace!))
Come possiamo vedere, nei nostri array, tra le altre cose, c'è una chiave tipo con i valori che abbiamo specificato durante la creazione delle configurazioni.

Per visualizzare il nostro dispositivo di scorrimento utilizzando getImageList, dobbiamo creare 3 blocchi con i nomi dei nostri valori chiave tipo, ovvero: immagine, video e solido. Successivamente capirai perché.

Esempi di pezzi:

// Immagine del pezzo

// Video in blocchi // Pezzo solido
E la chiamata dovrebbe assomigliare a questa:

Qui prendiamo i valori dagli array di ciascuna slide, ecco perché abbiamo creato tre blocchi i cui nomi coincidono con i valori dei campi Campo di più schede formato

Bene, avanti fenomeno sembra tutto molto più semplice:

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

(/Se)

Riassunto e storia promessa

Come possiamo vedere, MIGX affronta questo compito, se non “eccellente”, ma almeno “buono”. Ripeto ancora una volta che MIGX non ti limita nel numero di configurazioni, schede in ciascuna configurazione e numero di campi in esse. E gli esempi, come spero tu abbia già capito, sono abbastanza semplici in modo che anche tu possa familiarizzare facilmente con questa funzionalità. E ancora una cosa importante: quando si emettono blocchi, consiglio vivamente di controllare i campi da compilare e di tenere sempre conto che i dati possono essere compilati o meno o per qualche motivo potrebbero non arrivare, e quindi utilizzare filtri phx per l'output Sintassi o condizioni MODX in fenom.

Grazie a tutti per l'attenzione, auguro buona fortuna a tutti, ma non lo farò, perché come si dice: "La buona fortuna si augura ai perdenti", quindi vi auguro felicità e salute o qualcosa del genere, ma per coloro che sono interessati , il resto è storia.

Un giorno vennero a trovarci i miei parenti, tra cui mio nipote (figlio di mia sorella) originario di un paese vicino e due miei nipoti (siamo quasi tutti coetanei). Casa di campagna, soleggiata Asia centrale, una piccola montagna e un fiume nelle vicinanze. Quella stessa notte noi quattro abbiamo deciso di fare una passeggiata proprio lungo questo fiume e all'inizio tutto era calmo, non c'era motivo di preoccuparsi. Ci siamo divertiti molto, abbiamo raccontato storie (a volte spaventose e macabre), abbiamo scherzato e cose del genere. Ma a un certo punto ho notato che uno dei miei nipoti era impallidito e non si trattava solo di una svolta o di un abbellimento verbale, perché non avevo mai visto tanta paura e sconcerto sul volto di una persona prima e dopo questo incidente. Senza distogliere lo sguardo, guardò nella direzione in cui volgevo le spalle, cioè sembrava che guardasse qualcosa o qualcuno dietro di me, ma non direttamente dietro di me e vicino, mi sembrava che guardasse da qualche parte in lontananza. Era inquietante e gli ho chiesto: - Cosa è successo? E lui...

Questo paragrafo dovrà fingere che la storia di questa nota abbia una continuazione, ma in realtà ti ho solo un po' ingannato, sperando di poterti tirar su un po' il morale con il testo tecnico, noioso e lungo e che il tuo umore si sarebbe risollevato. E la storia in sé è reale e molto interessante. Ora grazie a tutti per l'attenzione!

AGGIORNAMENTO:
E se fossi Bach!?

Se all'improvviso qualcuno vuole ringraziarti con un rublo, così sia: carta Sberbank +79609354545

Slider Revolution è uno degli slider più popolari grazie alla sua vasta gamma di funzioni e facilità d'uso
da ThemePunch. Questo dispositivo di scorrimento è stato acquistato più di 273.441 volte ed è utilizzato da oltre 2.500.000 siti in tutto il mondo.

Di seguito sono riportati alcuni dei principali vantaggi di questo dispositivo di scorrimento, che lo distingue in modo significativo da quello gratuito e
la maggior parte degli analoghi premium:

• Potente editor visivo: personalizza la visualizzazione dei cursori in base alle esigenze del tuo progetto attraverso un comodo menu in cui
  ogni funzione è al suo posto. Una gradazione rigorosa ti impedirà di confonderti. L'unica difficoltà nel
  All'inizio vorrai provarli tutti.
• Controllo della variabilità di ciascuna diapositiva: visualizzazione pianificata dei blocchi sullo schermo di un PC, tablet e telefono
  mostrato nell'editor visivo. Puoi ridimensionare le diapositive individualmente per ciascun dispositivo.
  Un modello adattivo non consentirà alle immagini e ai video di deformarsi o di occupare più spazio del necessario.
  visione conveniente.
• Lavorare con i social network e l'hosting video: Slider Revolution di quinta generazione ti consente di includere nello slider
  dati provenienti da Instagramm, Facebook, Flickr, Twitter, Vimeo e Youtube. Se hai intenzione di pubblicare il video da solo
  server, puoi utilizzare HTML5. Parti del codice verranno scritte automaticamente.
• Alte prestazioni e ottimizzazione delle diapositive: il plugin funziona rapidamente in modalità di modifica e riduce
  peso del dispositivo di scorrimento senza perdita di qualità del contenuto. Non devi preoccuparti dei lunghi tempi di caricamento della pagina. Cosa c'è di speciale
  rilevante per i dispositivi mobili che non sono accessibili tramite connessioni WiFi.
• Un numero enorme di effetti speciali durante le transizioni delle diapositive
• Molti effetti di animazione durante la visualizzazione di testo, video e immagini
• Avvia il video automaticamente quando apri il sito oppure manualmente, per scegliere, ferma il cursore durante la visione del video,
  riavvolgere, ecc.
• Ampia selezione di impostazioni di navigazione
• Inserimento di annunci di post con collegamenti direttamente nello slider, mentre è configurato per l'ottimizzazione SEO
• Supporto e installazione di Google Fonts
• Utilizzando molti livelli (immagini, video, didascalie e collegamenti) in una diapositiva, possono essere innumerevoli
  si sovrappongono tra loro, creando così un video realistico o qualsiasi presentazione.

Attenzione! Per poter scaricare template di slider premium online e oggetti di libreria, è necessario acquistare una licenza separata da ThemePunch, che al momento in cui scriviamo questo testo costa $19, e poi attivarla inserendo il codice di acquisto nel campo indicato in la figura qui sotto.

Recensione video di modSliderRevolution

Attualmente, uno slider - carosello - è una funzionalità che è semplicemente necessaria avere su un sito Web aziendale, un sito Web di portfolio o qualsiasi altra risorsa. Insieme ai dispositivi di scorrimento delle immagini a schermo intero, i dispositivi di scorrimento del carosello orizzontale si adattano bene a qualsiasi progetto web.

A volte lo slider dovrebbe occupare un terzo della pagina del sito. Qui lo slider del carosello viene utilizzato con effetti di transizione e layout reattivi. I siti di e-commerce utilizzano uno slider a carosello per visualizzare più foto in singoli post o pagine. Il codice dello slider può essere liberamente utilizzato e modificato in base alle proprie esigenze.

Utilizzando JQuery insieme a HTML5 e CSS3, puoi rendere le tue pagine più interessanti, fornire loro effetti unici e attirare l'attenzione dei visitatori su un'area specifica del sito.

Slick: moderno plugin per lo slider del carosello

Slick è un plugin jquery disponibile gratuitamente i cui sviluppatori affermano che la loro soluzione soddisferà tutti i requisiti dello slider. Dispositivo di scorrimento adattivo: il carosello può funzionare in modalità “tile” per i dispositivi mobili e in modalità “trascina e rilascia” per la versione desktop.

Contiene un effetto di transizione "dissolvenza", un'interessante funzionalità "modalità centrale", caricamento lento delle immagini con scorrimento automatico. Le funzionalità aggiornate includono l'aggiunta di diapositive e un filtro diapositive. Tutto per assicurarti di configurare il plugin in base alle tue esigenze.

Modalità demo | Scaricamento

Owl Carousel 2.0 – jQuery – plugin per l'utilizzo su dispositivi touch

Questo plugin ha un ampio set di funzioni, adatte sia ai principianti che agli sviluppatori esperti. Questa è una versione aggiornata dello slider del carosello. Il suo predecessore aveva lo stesso nome.

Lo slider ha alcuni plugin integrati per migliorare la funzionalità generale. Animazione, riproduzione video, riproduzione automatica dello slider, caricamento lento, regolazione automatica dell'altezza: queste sono le caratteristiche principali di Owl Carousel 2.0.

È incluso il supporto drag and drop per un utilizzo più conveniente del plugin sui dispositivi mobili.
Il plugin è perfetto per visualizzare immagini di grandi dimensioni anche su piccoli schermi di dispositivi mobili.

Esempi | Scaricamento

Plugin jQuery Silver Track

Un plug-in jquery abbastanza piccolo ma ricco di funzionalità che ti consente di posizionare uno slider su una pagina: un carosello, che ha un nucleo piccolo e non consuma molte risorse del sito. Il plugin può essere utilizzato per visualizzare cursori verticali e orizzontali, con animazioni e creare set di immagini dalla galleria.

Esempi | Scaricamento

AnoSlide: slider jQuery reattivo ultra compatto

Slider jQuery ultra compatto: carosello, la cui funzionalità è molto maggiore di quella di uno slider normale. Questi includono l'anteprima di una singola immagine, la visualizzazione di più immagini a carosello e la visualizzazione con dispositivo di scorrimento basata sul titolo.

Esempi | Scaricamento

Owl Carousel – Dispositivo di scorrimento Jquery – carosello

Owl carosello è uno slider che supporta touch screen e tecnologia drag and drop, facilmente integrabile nel codice HTML. Il plugin è uno dei migliori slider che ti permettono di creare bellissimi caroselli senza alcun markup appositamente preparato.

Esempi | Scaricamento

Galleria 3D - carosello

Utilizza transizioni 3D basate su stili CSS e un po' di codice Javascript.

Esempi | Scaricamento

Carosello 3D che utilizza TweenMax.js e jQuery

Magnifico carosello 3D. Sembra che questa sia ancora una versione beta, perché ho scoperto proprio ora un paio di problemi. Se sei interessato a testare e creare i tuoi slider, questo carosello ti sarà di grande aiuto.

Esempi | Scaricamento

Carosello utilizzando bootstrap

Slider reattivo: carosello che utilizza la tecnologia bootstrap solo per il tuo nuovo sito web.

Esempi | Scaricamento

Dispositivo di scorrimento del carosello Moving Box basato sul framework Bootstrap

Più popolare su portfolio e siti Web aziendali. Questo tipo di slider, il carosello, si trova spesso su siti di qualsiasi tipo.

Esempi | Scaricamento

Piccolo Circleslider

Questo dispositivo di scorrimento di piccole dimensioni è pronto per funzionare su dispositivi con qualsiasi risoluzione dello schermo. Lo slider può funzionare sia in modalità circolare che a carosello. Tiny Circle si presenta come alternativa ad altri slider di questo tipo. È presente il supporto integrato per i sistemi operativi IOS e Android.

In modalità circolare, lo slider sembra piuttosto interessante. Ottimo supporto per il metodo drag and drop e un sistema di scorrimento automatico delle diapositive.

Esempi | Scaricamento

Dispositivo di scorrimento del contenuto di Thumbelina

Uno slider carosello potente e adattivo è perfetto per un sito Web moderno. Funziona correttamente su qualsiasi dispositivo. Ha modalità orizzontale e verticale. La sua dimensione è ridotta al minimo a solo 1 KB. Il plugin ultra compatto ha anche eccellenti transizioni fluide.

Esempi | Scaricamento

Wow – cursore – carosello

Contiene più di 50 effetti, che possono aiutarti a creare uno slider originale per il tuo sito web.

Esempi | Scaricamento

Dispositivo di scorrimento del contenuto jQuery reattivo bxSlider

Ridimensiona la finestra del browser per vedere come si adatta il dispositivo di scorrimento. Bxslider viene fornito con più di 50 opzioni di personalizzazione e mostra le sue funzionalità con vari effetti di transizione.

Esempi | Scaricamento

jCarosello

jCarousel è un plugin jQuery che ti aiuterà a organizzare la visualizzazione delle tue immagini. Puoi creare facilmente caroselli di immagini personalizzati dalla base mostrata nell'esempio. Lo slider è adattivo e ottimizzato per lavorare su piattaforme mobili.

Esempi | Scaricamento

Scrollbox - plugin jQuery

Scrollbox è un plugin compatto per creare uno slider: un carosello o una scansione del testo. Le caratteristiche principali includono effetti di scorrimento verticale e orizzontale con pausa al passaggio del mouse.

Esempi | Scaricamento

dbpasCarousel

Un semplice dispositivo di scorrimento del carosello. Se hai bisogno di un plugin veloce, questo è adatto al 100%. Viene fornito con solo le funzionalità di base necessarie per il funzionamento dello slider.

Esempi | Scaricamento

Flexisel: plug-in reattivo JQuery Slider - Carousel

I creatori di Flexisel si sono ispirati al plugin jCarousel della vecchia scuola, realizzandone una copia volta a garantire il corretto funzionamento dello slider su dispositivi mobili e tablet.

Il layout reattivo di Flexisel, quando viene eseguito su dispositivi mobili, è diverso da un layout delle dimensioni di una finestra del browser. Flexisel è perfettamente adattato per funzionare su schermi, sia a bassa che ad alta risoluzione.

Esempi | Scaricamento

Elastislide – cursore adattivo – giostra

Elastislide si adatta perfettamente alle dimensioni dello schermo del tuo dispositivo. È possibile impostare il numero minimo di immagini da visualizzare con una risoluzione specifica. Funziona bene come dispositivo di scorrimento a carosello con gallerie di immagini, utilizzando un wrapper fisso insieme a un effetto di scorrimento verticale.

Esempio | Scaricamento

Flex Slider 2

Dispositivo di scorrimento gratuito di Woothemes. È giustamente considerato uno dei migliori slider adattivi. Il plugin contiene diversi modelli e sarà utile sia per gli utenti principianti che per quelli esperti.

Esempio | Scaricamento

Carosello incredibile

Amazing Carousel: dispositivo di scorrimento delle immagini reattivo che utilizza jQuery. Supporta molti sistemi di gestione dei contenuti come WordPress, Drupal e Joomla. Supporta anche Android, IOS e sistemi operativi desktop senza problemi di compatibilità. Gli straordinari modelli di carosello integrati ti consentono di utilizzare il dispositivo di scorrimento in modalità verticale, orizzontale e circolare.

Esempi | Scaricamento

Una lezione in cui esamineremo lo scopo del componente aggiuntivo MODX Revo MIGX.

Diamo un'occhiata a come lavorare con MIGX utilizzando un esempio, il cui risultato sarà la possibilità di aggiungere immagini alle risorse in una forma conveniente. Visualizzeremo le immagini associate alla risorsa sulla pagina utilizzando un carosello Bootstrap 3 (slider).

Cos'è MIGX?

MIGX è un componente per MODX Revolution che aggiunge alle variabili del modello (parametri TV) un nuovo tipo di input con lo stesso nome (migx) e strumenti convenienti per lavorarci. MIGX ti consente di salvare un'intera tabella di dati in una variabile TV. Ciò significa che con MIGX e un campo aggiuntivo (TV), è possibile associare un insieme complesso di dati a ciascuna risorsa. Il formato JSON viene utilizzato per memorizzare i dati nella variabile MIGX TV.

Il nome MIGX sta per M ultimo IO temi G ridtv (Multi-Element GridTV) per MOD X.

Per recuperare elementi di dati complessi da un campo TV aggiuntivo con tipo MIGX, puoi utilizzare lo snippet getImageList. Questo frammento viene fornito con il pacchetto MIGX.

Installazione MIGX

Il processo di installazione di MIGX inizia aprendo la pagina "Gestione pacchetti" nel pannello di amministrazione di MODX Revolution (Applicazione -> Programma di installazione) e facendo clic sul pulsante "Scarica componenti aggiuntivi". Nella pagina che si apre, nel campo "Cerca", inserisci il nome del pacchetto (MIGX) e premi il tasto Invio. Successivamente, seleziona il componente aggiuntivo richiesto dai risultati presentati e fai clic sul pulsante “Download”. Torniamo alla pagina precedente e completiamo il processo di installazione utilizzando il pulsante "Installa".

Durante il processo di installazione, devi decidere la posizione del componente MIGX nel menu di amministrazione principale. La scelta qui è fatta tra 2 opzioni. La prima opzione (Nav superiore) prevede l'inserimento di un collegamento al componente come voce del menu principale e la seconda (Extra/Componenti) nell'elemento "Applicazioni".

Risultato dell'installazione del componente aggiuntivo MIGX:

MIGX - Creazione di un carosello Bootstrap

Ad esempio, esaminiamo l'utilizzo del componente MIGX per creare un carosello Bootstrap. Prima di passare alla creazione di un elemento, determiniamo l'elenco dei campi principali necessari per formare ciascuna diapositiva del carosello.

• Questo elenco sarà composto dai seguenti campi:
• titolo - titolo (titolo) della diapositiva (immagine);
• immagine – immagine;

La creazione di un elemento MIGX costituito dai campi sopra indicati viene effettuata nella scheda "MIGX" della pagina "Gestione MIGX". La pagina Gestione MIGX si apre dalla voce MIGX nel menu principale del gestore o dall'elenco a discesa Applicazioni, a seconda di come è configurata la sua posizione.

Creazione di un nuovo elemento MIGX

Il processo di sviluppo di un nuovo elemento MIGX viene eseguito utilizzando il pulsante "Aggiungi elemento". Dopo aver fatto clic su questo pulsante, si apre una finestra modale "MIGX", composta da molte schede. Per la maggior parte delle attività è sufficiente utilizzare solo le prime tre: Impostazioni (parametri di base), Formtabs (scheda per creare una struttura) e Colonne (scheda per sviluppare una tabella con cui l'utente finale gestirà i dati).

Nella scheda "Impostazioni", inserisci il nome dell'elemento (ad esempio, foto) e la scritta che sostituirà il testo "Aggiungi elemento".

Nella scheda "Formtabs" vengono creati i campi. In altre parole, definisce la struttura che gli utenti finali utilizzeranno per inserire i propri dati. Per aggiungere campi a MIGX, è necessario fare clic sul pulsante "Aggiungi elemento" e nella finestra di dialogo che si apre, inserire il nome dell'insieme (Didascalia) e compilare la tabella Campi.

L'inserimento dei record nella tabella MIGX di MODX Revolution avviene tramite il pulsante situato immediatamente dopo la voce "Campi".

Aggiungiamo i seguenti 3 record alla tabella Campi:

• Nome campo – titolo, Didascalia – Titolo, Descrizione – Descrizione della foto.
• Nome campo – immagine, Didascalia – Immagine, Tipo TV input – immagine.
• Nome campo – descrizione, Didascalia – Descrizione.

Il passaggio finale consiste nell'inserire i dati nella scheda "Colonne". Questa scheda definisce il nome delle colonne della tabella (aspetto), con l'aiuto delle quali l'utente visualizza e inserisce i dati nella corrispondente variabile MIGX TV aggiuntiva della risorsa (in questo caso, la variabile TV definita dall'elemento MIGX foto).

Inseriamo le seguenti informazioni nella tabella Colonne:

• Intestazione – Titolo, Campo (nome campo) – titolo, Larghezza colonna (larghezza colonna) – 100.
• Intestazione: file immagine, Campo: immagine, Renderer: this.renderImage.
• Intestazione – Descrizione, Campo – descrizione, Larghezza colonna – 200.

L'aggiunta di record alla tabella viene effettuata utilizzando il pulsante "Aggiungi elemento".

Creazione di un campo TV MIGX con configurazione foto

Dopo aver creato le foto dell'elemento MIGX (configurazione), procediamo alla creazione di un campo aggiuntivo (TV) con la tipologia di input MIGX e la configurazione delle foto.

La creazione di un campo aggiuntivo nel pannello di amministrazione viene effettuata nel pannello di sinistra nella scheda "Elementi". Per fare ciò, di fronte alla scritta “Campi aggiuntivi”, clicca sul segno più e nella pagina che si apre, inserisci i seguenti dati:

• Nella scheda "Informazioni generali", nel campo "Nome", il valore è foto (il nome del campo aggiuntivo);
• Nella scheda "Opzioni di input", nell'elenco a discesa "Tipo di input", seleziona migx e nel campo "Configurazione" inserisci il valore foto.
• Nella scheda "Disponibile per modelli", seleziona i modelli per i quali (o meglio, per le risorse in cui sono installati questi modelli) questo campo sarà disponibile.

Inserimento dei dati nel campo foto TV MIGX

Apriamo una qualsiasi risorsa che abbia a disposizione un campo per le foto di MIGX TV e inseriamo al suo interno, ad esempio, i seguenti dati:

Trasmissione dei dati del campo TV MIGX alla pagina

Visualizzeremo i dati sulla pagina utilizzando lo snippet getImageList, fornito con il componente aggiuntivo MIGX.

Inizio dell'implementazione. Per fare ciò, apri il modello installato per questa risorsa e inserisci il seguente codice nella posizione richiesta:

[[*longtitle:empty=`[[*pagetitle]]`]]

Il codice sopra è costituito da markup HTML e 2 chiamate allo snippet getImageList. Il primo mostra gli indicatori del carosello e il secondo mostra le diapositive contenenti immagini. Questi snippet hanno 2 parametri. Il parametro tvname ha lo scopo di specificare il nome della variabile TV con i dati MIGX che deve essere visualizzata sulla pagina. E il parametro tpl è definito per specificare un modello (chunk) in base al quale verrà generata ciascuna riga di dati dal campo foto MIGX TV.

Contenuto del pezzo tplCarouselIndicator:

Contenuto del pezzo tplCarouselItem:

Risultato della visualizzazione del carosello sulla pagina:

Abbiamo già creato il nostro primo sito web su MODx, ma continuerò la serie di lezioni su MODx. Mi scuso per il leggero ritardo, ho promesso che avrei postato il contenuto dei file corretti durante il ciclo di lezioni, lo farò nei prossimi 2-3 giorni.

Nella lezione di oggi parleremo di uno strumento interessante per il sito, ovvero un banner slider, esattamente lo stesso che si trova sulla mia pagina principale del sito. Diamo un'occhiata all'esempio del mio sito web.

Creazione di uno slider MODx Evo

La prima cosa che dobbiamo fare è creare un nuovo pezzo, chiamiamolo ad esempio ( (SLIDER)), con la descrizione "Slider per la pagina principale" e il seguente contenuto:

Puoi utilizzare uno slider da qualsiasi altro modello, la creazione non sarà diversa. Come puoi vedere, il codice HTML dello slider è un normale elenco non numerato.

Resta da aggiungere stili di visualizzazione dello slider, altrimenti il ​​nostro slider sul sito verrà visualizzato come un elenco normale:

Copia gli stili nel mio modello; gli stili dello slider sono stati inseriti in un file separato featuring-slider.css. Devi copiarlo nella cartella dei modelli con stili e aggiungere il seguente codice negli stili principali (file layout.css):

@import url("featured_slide.css");

Bene, affinché il nostro slider diventi dinamico, dobbiamo connettere le librerie jQuery che sono responsabili del suo funzionamento. Apri il modello della pagina principale e trova questi script:

Tutto è pronto, apri il modello della pagina principale e scrivi la chiamata al pezzo creato ((SLIDER)) nel posto che ci serve, salva e aggiorna la nostra pagina principale. Il tuo dispositivo di scorrimento dovrebbe funzionare: semplicemente non dimenticare di specificare i percorsi per i banner a scorrimento nel blocco.

Mi sono limitato a questa decisione, visto che non ho bisogno di cambiare spesso le immagini sullo slider, ho anche pensato di sostituirlo con un altro disegno, ma non ho ancora capito cosa. Ma che dire, ad esempio, dei proprietari di negozi online i cui banner cambiano quasi ogni settimana? Non preoccuparti, non è poi così male!

È stato per una buona ragione che ho attirato la tua attenzione sul codice del banner e ho detto che si tratta solo di un elenco non numerato, il che significa che possiamo sostituire questo elenco con una chiamata allo snippet Ditto e passare un modello per il nostro elenco.

Implementazione dello slider MODx Evo utilizzando lo snippet Ditto

Diamo un'occhiata passo dopo passo:

Nel parametro snippet parent specifichiamo l'identificatore della risorsa contenitore per i nostri banner.

Ora, per testare, crea diverse risorse figlie, assegna il nostro template Banner alle risorse e assegna il parametro TV - BannerImg ad ogni template, non dimenticare di compilare i campi risorsa - Titolo, titolo dettagliato.

Questo conclude la nostra lezione, se qualcosa non ha funzionato per te, lascia i tuoi commenti, cercherò di aiutarti. In questo modo semplice, puoi prendere qualsiasi modello e ritagliare da esso il codice dello slider, gli stili e gli script per implementare uno slider su MODx Evo.