Excel - Trimestri uso funzioni DATA, GIORNO e FINE.MESE
Nell'articolo precedente siamo partiti con l'uso della funzione SOMMA.PIU.SE e proseguito con l'aggi
Excel - SOMMA.PIU.SE con Condizione multipla
Se usate Microsoft Office Excel per la vostra contabilità privata o aziendale, vi sarà senz'a
Excel DataPicker - Selezione data con calendario
In questo periodo, dopo aver di nuovo cambiato lavoro, mi sono riaffacciato al mondo di Excel. Ques
Sitemap, cos'è, a cosa serve e come crearne una
Che cos'è una Sitemap? Una Sitemap è un file che fornisce informazioni sulla relazione tra pagine
Joomla - Integrare WhatsApp Sharing Button Generator
Il presente articolo, ci aiuterà ad integrare negli articoli di un sito Joomla! un social button pe
Joomla! - Xmap Cannot use object of type stdClass as array
E' da anni che usate Xmap come estensione per la vostra Sitemap di Joomla! e finora non vi ha dato m
WordPress - Twenty Seventeen Full Width Template
Chi usa il nuovo tema gratuito di WordPress, si è sicuramente trovato di fronte a questo dilemma.
WordPress - Maintenance mode
A tutti coloro che possiedono un sito in WordPress, sarà senz'altro capitato di dover mettere
WordPress - Child Themes, come e perché
Una delle peculiarità di WordPress sono i child themes. Introdotti fin dalla versione 3.0, so
Windows 10 - Testare la batteria del Notebook
A tutti i proprietari di un portatile credo sia passato di notare che la batteria del proprio laptop
Windows 10 - Cancellare la cartella Windows.old
Avete fatto l'avanzamento a Windows 10 e vi siete accorti che nella partizione che ospita il sistema
Windows 10 - Installare phpMyAdmin su IIS Express 10
Nell'ultimo periodo ho studiato come configurare il server IIS Express 10 su Windows 10 per poter fa

Joomla! - Background Slider

google-plus Scritto da .

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 teoca
  • logo arcotraslochi
  • materexcel collabora
  • koilab japan and tropical fish farm
  • logo flash pulizie
  • revolution srl
  • logo planetkoi small
  • logo elevatori sito
  • logo finiture
  • logo prontopro
  • montaggio mobili trento

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. La nostra Privacy Policy è cambiata (11/09/2019): Ti invitiamo a prenderne visione. Oppure visiona la nostra Cookie Policy (aggiornata il 17/10/2019):