Joomla! - Background Slider

google-plus Scritto da . Postato in Joomla!

Sfondo Slideshow per Joomla cercasi

Se vi è stato chiesto di creare un sito showroom o sito vetrina, vi è probabilmente capitato di cercare un sistema (componente o modulo) che permettesse di creare uno sfondo slideshow, cioé delle immagini che scorressero a background dei contenuti.
Di moduli che fanno da images slider o slideshow ce ne sono tantissimi, (free e a pagamento) fornendo opzioni di tutti i generi dagli effetti di transizione, allo scorrimento del testo sopra le immagini, alle caption, alle frecce di navigazione di ogni forma per spostarsi da una all'altra slide... Ma se voglio lo slideshow a sfondo?! Nulla...

Questo è quello che mi è successo nella realizzazione del sito gianmoena marmi, il quale per esigenze di mercato, volevano un sito che fosse fotografico e che desse la possibilità all'utente di visualizzare il testo solo se desiderato. In rete ci sono tanti template per Joomla! ma nessuno faceva ciò che desiderava, trovando tra l'altro diversi temi interessanti dedicati alla fotografia, ma per WordPress.

Nella mia ricerca mi sono imbattuto in un template per siti statici con un'interessante slider integrato che ruotava le immagini a background a partire da una cartella demo. Il template, si basava sulla oramai famosa libreria Javascript Supersized.

Al momento di questa modifica, se cercate in rete supersized joomla, troverete diversi moduli che fanno la stessa medesima cosa alcuni con più, altri con meno opzioni. Si tratta semplicemente di implementare la funzionalità offerta da questa fantastica libreria: supersized.

Creazione del Modulo Background Slider

Avendo già sfruttato l'ottimo modulo background styler (il quale carica foto a background del sito), ne ho sfruttato l'idea e ho creato un modulo simile, inserendovi all'interno il codice adottato dal template statico e importando le libreria javascript supersized che lo animava, adattandolo e introducendo qualche tip per Joomla!. Il risultato è il modulo che si può scaricare dal link in fondo alla pagina, modulo che per me si è rivelato vitale nella realizzazione del sito del quale ho postato in precedenza il link.

Chi intendesse usarlo, sappia che ho trovato alcune difficoltà nel testarlo in alcuni template della yoo_theme che mettono uno sfondo monocromatico che impedisce la visualizzazione delle immagini. Ciò significa che chi utilizzerà il modulo dovrà fare qualche aggiustamento nel file custom.css per eliminare lo sfondo di default.

Uso del Modulo

Comunque, una volta installato, potete creare copie del modulo in Gestione estensioni > Gestione moduli per ogni pagina dove volete inserire gli sfondi a slideshow, selezionando per ognuno una cartella di immagini differente; Le cartelle vanno inserite nella cartella images di Joomla!.

Il mio suggerimento è quello di metterlo nella posizione del template debug, così come suggerito per il modulo Background Styler, in quanto quasi mai usato:

background-slider

C'è da sottolineare comunque che non lo ho ancora testato per Joomla! 3.x anche se dovrebbe funzionare in quanto il codice non presenta richiami specifici alle librerie del core di Joomla!. Tuttavia è bene specificare che questa versione funziona molto bene in Joomla 2.5 e a breve ne testerò il funzionamento anche per la 3.x introducendo anche qualche novità, come la possibilità di scegliere se pubblicare un pulsante play/pause e decidere se voler fare apparire lo slider in pause di default.

Frecce di navigazione

Per quanto riguarda le frecce di navigazione, il codice CSS le porrebbe a metà, in entrambi i lati dello schermo e ad una distanza di 10px dal bordo. Dovessero esserci problemi nel posizionamento, potete disabilitare le frecce di default dal pannello e inserire questo codice in un modulo di tipo HTML Personalizzato (personalizzando se si desidera i selettori in un foglio di stile):

<a id='prevslide'></a><a id='nextslide'></a>

e posizionare il modulo dove più vi piace.

Un'altra precisazione va al fatto che per il momento questo sistema risulta instabile nei dispositivi mobile, specie negli smartphone. Per questo, il codice è stato scritto per caricare lo slider solo e unicamente se non si tratta di un dispositivo mobile. In futuro metterò questa scelta a carico del web master.

Background Slider potete scaricarlo direttamente da qui.

Alcuni suggerimenti e soluzioni

Fatal error: Cannot redeclare load_jquery() (previously declared in /var/www/vostro_sito/modules/mod_bgslider/mod_bgslider.php:151) in /var/www/vostro_sito//modules/mod_bgslider/mod_bgslider.php on line 168

Se doveste incappare in questo errore, significa che avete assegnato la stessa voce di menu a due istanze del modulo mod_bgslider. Controllate se oltre al modulo responsabile dello sfondo della voce di menu che genera errore, vi siano altri moduli Background Slider che puntano ad essa e toglietegli l'assegnazione alla voce di menu.

Il modulo, con la versione 1.5, sarà in grado di mostrare le immagini anche su smartphone. Tuttavia, per il suo corretto uso utilizzate immagini che abbiano più o meno le stesse proporzioni e/o dimensioni. In genere i browser dei dispositivi mobili sono meno evoluti di quelli per Desktop. Immagini dinamiche a slideshow con l'uso della libreria supersized creano problemi e non solo con il mio modulo. Sperimentadone altri creati da terzi, ho notato che è un problema che influenza tutte le estensioni basate su questa libreria javascript.

 

Se hai gradito l'articolo, condividilo, basta un click!

Commenti   

Mattia
0 #1 Mattia 2015-02-03 12:34
Ottimo modulo! Semplice e funzionale... Mi hai risparmiato molto lavoro! Grazie
Citazione

Aggiungi commento


Codice di sicurezza
Aggiorna

  • logo prontopro
  • logo boutique serramento
  • koilab japan and tropical fish farm
  • Trasloco economico - gruppo Arco Traslochi
  • logo flash pulizie
  • logo revolution
  • logo planetkoi small
  • logo finiture
  • ick logo template
  • montaggio mobili trento

Realizzato da: Daniele Gagliardi
Viale Monache 3 - 38062 Arco - TN
- Contattami -

Per essere più facile ed intuitivo, il blog fa uso dei cookie, piccole porzioni di dati che consentono di capire come gli utenti navighino e ne visualizzino le pagine. I cookie non registrano alcuna informazione personale sull'utente ed eventuali dati identificabili non verranno memorizzati.