Mx Swiper3

1. Requisiti

• Joomla con il componente di base "Articoli" (com_content) abilitato quando si utilizza la fonte "Articoli".
• Un modulo pubblicato assegnato a una posizione del template e a voci di menu.
• Joomla 4 o versioni successive utilizzano il modello di contenuto moderno; le installazioni Joomla precedenti supportate utilizzano il modello legacy.
• Per il ridimensionamento delle immagini degli articoli, la directory della cache di Joomla deve essere scrivibile.
• Per la modalità Cartella, i file multimediali devono trovarsi all’interno della directory images .

2. Installazione

1. Nel pannello di amministrazione di Joomla, aprire Sistema > Installa > Estensioni.
2. Caricare il pacchetto ZIP di Mx Swiper3.
3. Apri Estensioni > Moduli e crea o modifica Mx Swiper3.
4. Imposta il modulo su "Pubblicato", scegli una posizione nel template e configura l'assegnazione al menu.
5. Salva il modulo e controlla la pagina front-end assegnata.

Mantenere il assets, core, fielde tmpl . Contengono le librerie di Swiper, gli helper per le immagini, i campi personalizzati del modulo e i layout di stile.

3. Guida rapida

1. Scegli uno stile nelle Impostazioni generali.
2. Scegliere una fonte: Articoli, Elementi personalizzati o Cartella.
3. Configura i campi visualizzati per quella fonte.
4. Imposta l'effetto dello slider, l'altezza, il numero di elementi responsive, la navigazione e l'impaginazione.
5. Pubblica il modulo in una posizione visibile del template.

Per il primo test, usa "Articoli", seleziona una categoria pubblicata, mantieni l’ordine predefinito delle immagini, abilita l’impaginazione e le frecce e usa l’effetto "Scorrimento" predefinito.

4. Come funziona il modulo

1. Selezione della fonte: l’ get_source impostazione seleziona il percorso dei dati.
2. Preparazione dei dati: vengono interrogati gli articoli di Joomla, gli elementi personalizzati vengono letti dal sottomodulo oppure la modalità "Cartella" esegue la scansione della directory selezionata.
3. Selezione del layout: il valore selezionato di get_style carica il file corrispondente da tmpl.
4. Caricamento delle risorse: vengono caricati i file JavaScript e CSS di Swiper per il modulo. Le risorse di Fancybox vengono caricate solo quando Fancybox è abilitato; jQuery viene caricato solo quando richiesto.
5. Inizializzazione di Swiper: assets/swiper/functions.js vengono lette le opzioni Swiper generate, tra cui le impostazioni relative a effetto, loop, riproduzione automatica, breakpoint, navigazione, impaginazione e rotellina del mouse.
6. Rendering delle diapositive: ogni elemento diventa una diapositiva Swiper contenente contenuti multimediali, testo opzionale e un link opzionale o un controllo lightbox.

Il modulo memorizza nella cache l’elenco preparato tramite la cache dei moduli di Joomla. Svuotare la cache di Joomla dopo aver modificato i file sorgente, il contenuto delle cartelle o le impostazioni se il front-end continua a mostrare un risultato obsoleto.

5. Impostazioni generali

Stile

Carica uno dei modelli di presentazione disponibili: Default oppure Style 1 tramite Style 19. Lo stile determina la composizione delle diapositive e la resa visiva; non tutti gli stili utilizzano tutte le opzioni di Swiper allo stesso modo.

Fancybox

Se abilitato, aggiunge un pulsante a schermo intero ai contenuti multimediali supportati e apre l’immagine, il file MP4, il video di YouTube o di Vimeo corrente in una galleria Fancybox. È disponibile per gli stili elencati dalla regola condizionale del campo ed è disabilitato per impostazione predefinita.

Immagini di sfondo

Disponibile per lo Stile 1. Aggiunge gli strati decorativi di sfondo dello stile sopra e sotto il contenuto della diapositiva.

Altezza dello slider

Imposta l’altezza utilizzata dallo slider, da 100vh a valori fissi compresi tra 500px e 1000px.

Versione

Seleziona la variante visiva chiara o scura. L'opzione "chiara" carica il foglio di stile chiaro del modulo.

Sfondo del livello

Abilita la sovrapposizione semitrasparente utilizzata dagli stili che supportano il livello di diapositive scuro. Ciò può migliorare il contrasto del testo sulle fotografie.

6. Controlli dello swiper

Effetto di scorrimento

Scegli l'effetto di transizione supportato dallo stile selezionato:

• Fade, Slide, Coverflow, Flip, Cube, Creative, Cards
• Gel è disponibile come gl per le impostazioni predefinite e per lo Stile 14.

Diapositive centrate e Riproduzione in loop

"Diapositive centrate" centra la diapositiva attiva. "Riproduzione in loop" riproduce in modo continuo le diapositive, passando dall'ultima alla prima.

Riproduzione automatica e tempo di ritardo

Abilita la riproduzione automatica per far avanzare automaticamente le diapositive. Il tempo di ritardo controlla la pausa tra una diapositiva e l’altra da 2 a 15 secondi. La riproduzione automatica è configurata in modo da non interrompersi quando un visitatore interagisce con lo slider.

Velocità di animazione e Spazio tra

La velocità di animazione regola la durata della transizione da 0,5 a 7 secondi. Lo spazio tra le diapositive aggiunge un intervallo tra le diapositive utilizzando i valori disponibili da 0 a 40.

Effetto parallasse

Abilita il movimento parallasse delle immagini sugli stili supportati. L’intensità del parallasse imposta la percentuale di movimento da 1% a 40%.

Rotellina del mouse

Consente ai visitatori di cambiare le diapositive con la rotellina del mouse sugli stili che espongono questa impostazione. Lo stile 15 utilizza un proprio campo dedicato alla rotellina del mouse.

Numero di elementi responsive

Per gli effetti Slide, Coverflow e Cards, è possibile configurare il numero di elementi visibili in modo indipendente per desktop, laptop, tablet e dispositivi mobili. Gli altri effetti, in genere, visualizzano una sola diapositiva al breakpoint più grande, poiché il loro design visivo richiede una singola diapositiva attiva.

Impaginazione e frecce

L’impaginazione mostra indicatori di diapositiva cliccabili e offre due stili. Le frecce mostrano i controlli “precedente/successivo” e offrono tre stili. Entrambe le funzionalità possono essere disattivate in modo indipendente.

Miniature

Gli stili 16 e 19 rendono disponibile l’impostazione “Miniature”. Essa controlla il numero di diapositive in miniatura visibili, da 2 a 8.

7. Fonti di dati

Articoli

La modalità "Articoli" utilizza il modello com_content modello "Articoli" di Joomla. Restituisce gli articoli pubblicati disponibili per il visitatore corrente e crea i link all'articolo, alla categoria e al "continua a leggere".

• Seleziona categoria: limita i risultati a una o più categorie.
• Articoli delle sottocategorie: include o esclude le categorie discendenti.
• Profondità delle categorie: limita il numero di livelli di categorie secondarie da includere.
• Tag: filtra gli articoli in base ai tag Joomla selezionati.
• Articoli in primo piano: mostra tutti gli articoli idonei, nasconde gli articoli in primo piano o mostra solo gli articoli in primo piano.
• Campo dell’articolo in base al quale ordinare: ordine del gestore, ordine in evidenza, visualizzazioni, titolo, ID, alias, date di creazione/modifica/pubblicazione o in ordine casuale.
• Direzione di ordinamento: ascendente o discendente.
• Numero: numero massimo di articoli. Un valore pari a 0 indica tutti gli articoli.
• Apri link: stessa finestra, nuova finestra o finestra a comparsa.
• Campi personalizzati: attiva gli eventi del plugin di contenuto Joomla per l’articolo.

Visualizzazione dell’articolo

• Titolo della categoria: mostra il nome della categoria e il link alla categoria.
• Titolo dell’articolo: mostra il titolo dell’articolo.
• Lunghezza massima del titolo: tronca il titolo in base al numero di caratteri; 0 mantiene il titolo completo.
• Visualizzazione della descrizione: mostra il testo introduttivo dell’articolo ripulito.
• Lunghezza massima della descrizione: tronca il testo introduttivo; 0 mantiene tutto il testo.
• Visualizzazione autore: mostra l'autore dell'articolo.
• Visualizzazione data: mostra la data di creazione.
• Formato data: controlla il formato della data in Joomla/PHP, ad esempio d M Y oppure Y-m-d.
• "Mostra tutto" e testo "Mostra tutto": controlla il pulsante di collegamento dell'articolo.

Immagini dell’articolo

L'helper cerca le fonti di immagini abilitate nell'ordine specificato in "Ordine di recupero". La prima immagine disponibile viene utilizzata dagli stili dell'articolo.

• image_intro: l’immagine introduttiva di “Immagini e link” di Joomla.
• image_fulltext: l’immagine a tutto campo di Joomla.
• inline_introtext: immagini trovate nel codice HTML dell’introduzione.
• inline_fulltext: immagini presenti nel codice HTML del corpo del testo.
• external: percorsi di immagini esterne o generate supportati dall’helper.

Abilitare o disabilitare ciascuna fonte tramite il campo «Da immagine...» corrispondente. Se non viene trovata alcuna immagine, il modulo utilizza modules/mod_mx_swiper3/assets/images/noimage.jpg oppure il percorso del segnaposto configurato.

Ridimensionamento delle immagini

La modalità di ridimensionamento supporta Nessuno, Centro, Riempi, Adatta e Allunga. Quando il ridimensionamento è abilitato, impostare la qualità di compressione da 1 a 100, il formato di output (GIF, JPEG, PNG o WEBP), il comportamento della trasparenza, la larghezza e l’altezza. Le immagini generate vengono memorizzate tramite l’helper immagini e la cache del modulo.

Elementi personalizzati

Gli elementi personalizzati vengono inseriti direttamente nel campo "Elementi ripetibili". Aggiungere un elemento per ogni diapositiva, quindi trascinare o disporre le voci nell’ordine desiderato.

Gli elementi personalizzati non utilizzano le categorie degli articoli, i metadati degli articoli né l’estrazione delle immagini dagli articoli. I loro contenuti multimediali e il testo provengono interamente dai valori del sottomodulo.

Modalità "Cartella"

La modalità "Cartella" legge i contenuti multimediali dalla directory selezionata all'interno della images , comprese le sottocartelle annidate. Il campo "Cartella" viene popolato dal campo personalizzato del modulo foldertree del modulo.

• Tipi di file supportati: jpg, jpeg, png, gif, webp, bmp, e mp4.
• le immagini diventano diapositive di immagini; i file MP4 diventano diapositive video in loop senza audio.
• I file vengono ordinati in modo naturale in base al loro percorso relativo.
• Il nome del file prima della prima barra verticale viene utilizzato come titolo; un numero iniziale seguito da un separatore viene rimosso dal titolo visualizzato.
• Il testo dopo la prima barra verticale viene utilizzato come descrizione.
• I trattini e i trattini bassi presenti sia nel titolo che nella descrizione vengono visualizzati come spazi.

Esempio di nome file:

01 - Our-services | Fast, reliable support.jpg

Questo produce il titolo I nostri servizi e la descrizione Assistenza veloce e affidabile; il numero iniziale 01 - viene nascosto. Impostare "Count" per limitare il numero di elementi analizzati; utilizzare 0 per tutti i file corrispondenti.

8. Stili

Il pacchetto include 20 layout selezionabili: Default e Style 1 fino a Style 19. Ogni layout è implementato in un proprio file in tmpl e condivide gli stessi tipi di sorgente e lo stesso modello multimediale di base, pur disponendo in modo diverso didascalie, sovrapposizioni, controlli e miniature.

• Impostazione predefinita: presentazione Swiper generica con opzioni di effetto estese.
• Stile 1: supporta l’impostazione opzionale «Immagini dei livelli».
• Stili da 2 a 13: composizioni alternative di contenuti e sovrapposizioni che utilizzano gli effetti standard di Swiper.
• Stile 14: utilizza il selettore di effetti esteso, incluso Gel.
• Stile 15: dispone di una propria opzione per la rotellina del mouse.
• Stili 16 e 19: supportano il controllo del numero di miniature.
• Stile 17: utilizza il trattamento dello slider a tutta altezza del modulo e il markup relativo alle miniature.
• Stile 18: supporta Fancybox e i controlli standard di sovrapposizione.

La combinazione esatta dei campi condizionali è controllata da mod_mx_swiper3.xml. Se un'impostazione risulta nascosta dopo aver cambiato lo Stile, è intenzionale: il layout selezionato non espone quell'opzione.

9. CSS personalizzato e impostazioni avanzate

• Codice CSS: aggiungi dichiarazioni CSS sicure e filtrate dall’HTML per questa istanza del modulo. Limita i selettori alle classi del modulo, ove possibile.
• Suffisso classe modulo: aggiunge un suffisso di classe al wrapper del modulo per uno styling specifico del template.
• Layout alternativo: seleziona una sostituzione del layout del modulo Joomla, se disponibile.
• Cache: utilizza l’impostazione globale di Joomla relativa alla cache dei moduli oppure disabilita la cache per il modulo.
• Durata della cache: controlla la durata della cache quando l’impostazione della cache del modulo utilizza un tempo personalizzato.
• Carica jQuery: carica il file jQuery 3.6.0 integrato. Lasciare questa opzione disabilitata se il template carica già un'istanza jQuery compatibile.

10. Risoluzione dei problemi

Non vengono visualizzate le diapositive

• Verificare che il modulo sia pubblicato, assegnato alla voce di menu corrente e posizionato in una posizione del template soggetta a rendering.
• Per gli articoli, verificare che siano pubblicati, accessibili, assegnati alla categoria selezionata e consentiti dai filtri per lingua/tag/in primo piano.
• Per gli elementi personalizzati, verificare che almeno una voce sia pubblicata.
• Per la modalità Cartella, selezionare una cartella sottostante images e controlla l'estensione del file.

Mancano le immagini

• Controlla i selettori della fonte delle immagini dell’articolo e l’opzione “Ordina per ottenere”.
• Verifica che il campo "Media" dell'elemento personalizzato corrisponda al tipo selezionato.
• Controlla il percorso del segnaposto e i permessi della cache.

I titoli o le descrizioni delle cartelle sono vuoti

Utilizza la convenzione per i nomi dei file Title | Description.extension. Il carattere "|" separa titolo e descrizione; le cartelle vengono scansionate in modo ricorsivo, ma vengono incluse solo le estensioni supportate.

Il video non viene riprodotto

Gli elementi MP4 utilizzano gli attributi autoplay, muted e loop. Verifica che l'URL sia raggiungibile, che il file sia un MP4 valido e che il server invii un tipo MIME video. Gli elementi YouTube e Vimeo richiedono l'ID del video, non l'URL completo di riproduzione.

L'altezza dello slider o gli effetti non appaiono corretti

Verifica lo stile selezionato, l’altezza dello slider, la compatibilità degli effetti e se un altro foglio di stile del template sovrascrive le classi Swiper del modulo. Svuota la cache di Joomla e del browser dopo aver apportato modifiche ai CSS.

Conflitti JavaScript

Disattiva l’opzione “Carica jQuery” se jQuery è già stato caricato dal template. Verifica inoltre che un’altra estensione non stia caricando una versione di Swiper in conflitto o risorse Fancybox duplicate.

11. Aggiornamento

Esegui il backup della configurazione del modulo e dei file del sito prima dell’aggiornamento. Installa il pacchetto più recente tramite il programma di installazione delle estensioni di Joomla. Il manifesto XML dichiara un server di aggiornamento, in modo che Joomla possa proporre gli aggiornamenti quando tale server è raggiungibile. Dopo l’aggiornamento, verifica lo stile selezionato, i dati di origine e il CSS personalizzato.