WebSite X5Help Center

 
Francesco P.
Francesco P.
User

WOW SLIDER  it

Auteur : Francesco P.
Visité 2335, Followers 2, Partagé 0  
Mots-clés :: slider,wow

Da tempo seguo questa lunga discussione (https://helpcenter.websitex5.com/fr/post/157292) e mi sono cimentato anch'io nella creazione di qualche sito (non ancora pubblicato) in cui nella home page riscontriamo la galleria fotografica a tutto schermo.

Domanda: visto che Giancarlo é l'artefice di questo argomento e a mio parere incomincia a portare il programma un pò al di là della sfera semiprofessionale, non sarebbe opportuno che lo Staff incomincia a pensare, spero presto, a pubblicare un "oggetto" che permetta a tutti di pubblicare lavori con più calma e celerità, altrimenti l'aforisma "... in cinque passaggi e pubblica subito il sito .... , va a farsi benedire.

Che dite? Complimenti ancora a Giancarlo!

Saluti a tutti

Francesco

N.B. A proposito WOW SLIDER è gratis ma lascia un piccolo logo in basso a destra sulle immagini. nella versione a pagamento il logo viene tolto.

Posté le
38 RéPONSES - 2 UTILE
Matteo C.
Matteo C.
User

Il logo lo fai sparire semplicemente sostituendo le immagini che crea wowslider con quelle che in origine hai caricato. E che wowslider ha modificato...

Detto questo si, la galleria full (che non credo sia impossibile da implementare in WsX5) secondo me è un must have. Ma credo si vedrà nel 14 o come oggetto supplementare a pagamento. Anche se inizia a diventare noiosa questa cosa degli oggetti a pagamento. Che facciano 3 versioni. Normale, professional ed enterprise e stop.... Adesso come adesso quante gallerie esistono (tutte sono oggetti diversi invece che essere un'unico oggetto con un'interfaccia completa)...

Lire plus
Posté le de Matteo C.
Francesco P.
Francesco P.
User
Auteur

Questa è la mia esperienza con WOW SLIDER. Dove ho sbagliato.

Ho implementato la procedura di "Giancarlo".

Francesco

Lire plus
Posté le de Francesco P.
Giuseppe Guida
Giuseppe Guida
User

Francesco ci sono degli errori nel codice che hai inserito sugli z-index e poi ci sono delle lettere o al posto degli zeri 0

Lire plus
Posté le de Giuseppe Guida
Giancarlo B.
Giancarlo B.
User

Ciao Francesco, si in effetti ha ragione Giuseppe ci sono un pò di errori tipo quelli che ti ho evidenziato in grassetto:

/* impostazioni di pagina distanza Slide full e menù*/

#wowslider-container1{toppx; z-index:-1 !important;}

/* distanza contenuti pagina della Home da Slider */

#imContent{margin-top: 10px;}

 

/* distanza contenuti pagina dal top */

#imContent{top: 100px;}

#imContent{margin-top: 100px;}

/*impostazioni menù, header e sfondo intestazioni */

#imHeaderBg{position:fixed; top: opx; z-index10;}

#imHeader{position:fixed; width 100%; top: 0px; opx; z-index10;}

#imMnMn{position:fixed; top 30px; z-index10;}

Lire plus
Posté le de Giancarlo B.
Francesco P.
Francesco P.
User
Auteur

Ok, scusate ma non ho molta dimestichezza con il codice.

Il Risultato è questo http://residenza.francescopinto.it/index.html

Da premettere che i parametri di WebSite sono:

- altezza 70 per lo sfondo dell'Header

-     "      70 per l'Header

-     "      30   "  menù

Considerazioni:

- perchè nel wewslider su 10 slider il sistema si ferma alla terza?

- il menù non é posizionato sopra il wowslider?

Vi ringrazio per l'aiuto

Lire plus
Posté le de Francesco P.
Giuseppe Guida
Giuseppe Guida
User

Io vedo questo sul cellulare. Tutto bianco tranne il logo e il menú hamburger in basso.  Ma della slide neanche l'ombra... Vedi allegato. 

Lire plus
Posté le de Giuseppe Guida
Giancarlo B.
Giancarlo B.
User

Si lo slider si vede il menù resta basso.. ma ad un certo breakpoint credo che l'header/immagine sia troppo ingombrante e copre lo slider...

Lire plus
Posté le de Giancarlo B.
Giancarlo B.
Giancarlo B.
User

#imHeader{position:fixed; width 100%; top: 0px; 0px; 

Francesco... elimina il valore in grassetto ... è doppio ...

Lire plus
Posté le de Giancarlo B.
Francesco P.
Francesco P.
User
Auteur

Grazie Giancarlo.

Ho fatto la correzione ma le perplessità riscontrate nel mio ultimo post rimangono invariate. Da premettere che per le slide ho usate come grandezze le stesse suggerite nel tutorial: 1920x 800 px.

Lire plus
Posté le de Francesco P.
Francesco P.
Francesco P.
User
Auteur

Ho utilizzato anche il procedimento suggerito da KolAsim ‪‪usando iframe.

Anche qui ho utilizzato quanto suggerito nel tutorial:

- WowSlider 1920 x 800

- Sfondo dell'Header 80; Hader 50 e menù 30.

Quello che non comprendo é perchè mi ritrovo uno slidshow basso non dimensionato con i valori 1930 e 800 così come é riportato nel codice alla sezione "prima della chiusura del tag HEADER" della sezione Esperto del file Home.

Saluti

Francesco

Lire plus
Posté le de Francesco P.
Giancarlo B.
Giancarlo B.
User

non vorrei ci siano codici extra che disturbano ... fai la prova su un progetto pulito...

Lire plus
Posté le de Giancarlo B.
Francesco P.
Francesco P.
User
Auteur

Ok, penso di aver risolto.

Lire plus
Posté le de Francesco P.
Francesco P.
Francesco P.
User
Auteur

Ecco il risultato con il metodo iframe

http://residenza2.francescopinto.it

l'unico inconveniente é la gestione della Struttura del modello che non risponde più ai comandi nei punti: sfondo dell'header (50), header (1), menu (50).

Inoltre l'header copre al 90% tutto lo WowSlider per cui lo reso "trasparente", mentre il posizionamente delle voci del menù é fisso nella posizione che si vede; non c'è verso di posizionarla un pò più in basso.

Francesco

Lire plus
Posté le de Francesco P.
Giancarlo B.
Giancarlo B.
User
Francesco Pinto
Ecco il risultato con il metodo iframe http://residenza2.francescopinto.it l'unico inconveniente é la gestione della Struttura del modello che non risponde più ai comandi nei punti: sfondo dell'header (50), header (1), menu (50). Inoltre l'header copre al 90% tutto lo WowSlider per cui lo reso "trasparente", mentre il posizionamente delle voci del menù é fisso nella posizione che si vede; non c'è verso di posizionarla un pò più in basso. Francesco

Francesco perchè non provi utilizzando l'oggetto html è molto più semplice, nell'oggetto metti tutto il codice che generi con wowslider compresi i tag

<header>.... codice...</header> e poi a seguire

<body> ....... codice ..... </body>

poi per estendere l'oggetto html con altezza impostata a zero... inserisci questo.. codice MAeSI

<style>
#imPageRow_1 div {
padding: 0;
width: 100%;
}
</style>

molto più semplice.....

Lire plus
Posté le de Giancarlo B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

x Francesco, ed altri interessati, per non gravare su questo Argomento, sarebbe meglio aprirne uno proprio, magari facendo riferimento a questo...

... comunque, dipende dalla struttura adottata nella pagina, e non avendo io il programma non posso entrare nel merito non potendo fare delle prove...

... la struttura ideale per il mio metodo IFRAME sarebbe quella di adottare lo stile Orizzontale - Menu sopra l'Header, ed header vuoto impostato sui 100-200 pixel di altezza, che condizionerà l posizione del contenuto della pagina, che come noti d tutti gli esempi funziona a dovere...

... per avere un'idea di quello che avviene adesso, prova a posizionare in HEAD quest stringa:

<style> #imHeaderBg {background-color:transparent !important} #imHeader {background-color:transparent !important}</style>


.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Giuseppe Guida
Giuseppe Guida
User

Giancarlo, nell'Oggetto Codice HTML non vanno inseriti i tag head e body e il richiamo al file CSS va messo in head, anche io credevo come te che fosse così con l'Oggetto Codice HTML ma non lo è come spiegatomi da MAeSI sul loro blog, vedi sotto:

Lire plus
Posté le de Giuseppe Guida
Giancarlo B.
Giancarlo B.
User

grazie Giuseppe .... anche se è funzionante ? ma è solo una questione di sintassi corretta ?

Lire plus
Posté le de Giancarlo B.
Giuseppe Guida
Giuseppe Guida
User

Si Giancarlo, funzionava anche a me in effetti così come avevi scritto sopra, però, dopo il consiglio di MAeSi e dopo aver di conseguenza approfondito il funzionamento dell'Oggetto HTML (da me in effetti mai approfondito) è corretto come detto da loro due.

Lire plus
Posté le de Giuseppe Guida
Francesco P.
Francesco P.
User
Auteur

Ricapitolando:

* ho eseguito due prove, la prima risiede su http://residenza.francescopinto.it eseguita con il metodo "Giancarlo"

* la seconda su http://residenza2.francescopinto.it eseguita con il metodo "KolAsim"

Francamente ho constatato che il secondo è più semplice e francamente funziona meglio.

Domanda: se decido di cambiare le slide al WowSlider (se ho capito bene) basta solo inserire le immagini nuove nelle cartelle images e toolpips in data1 e basta oppure bisogna rinnovare totalmente il WowSlider e poi salvare il tutto?

Francesco

Lire plus
Posté le de Francesco P.
Giancarlo B.
Giancarlo B.
User

metodo "KolAsim".. se rimane delle stesse dimensioni e vuoi semplificarti la vita... una volta generato il progetto ed esportato i file in una cartella provvisoria sul desktop, non fai altro che prende tutti i file e le cartelle e sovrascrivere quelle presenti nella root principale del sito.

metodo "Giancarlo" non esiste, per chiarezza è quello originale di wowslider.

Ciao.

Lire plus
Posté le de Giancarlo B.
Francesco P.
Francesco P.
User
Auteur

Grazie

Lire plus
Posté le de Francesco P.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

Francesco Pinto
.. ... ... Domanda: se decido di cambiare le slide al WowSlider (se ho capito bene) basta solo inserire le immagini nuove nelle cartelle images e toolpips in data1 e basta oppure bisogna rinnovare totalmente il WowSlider e poi salvare il tutto? ... ... ...

... ha già anticipto Giancarlo, e puoi usare altre immagini, sia sostituendo quelle che hai mantenendo lo stesso nome (occhio alla cache)(*), sia usando immagini nuove, modificando gli url:

<li><img src="data1/images/1.jpg" alt="economico" title="economico" id="wows1_0"/></li>

... per esempio al posto di "data1/images/1.jpg" puoi mettere:

"https://cdn.pixabay.com/photo/2017/01/31/22/55/bank-2027944__340.jpg"

(*) ... nel caso di sostituzione delle immagini con stesso nome, per by passar la cache, sarebbe meglio editare con il blocco note la pagina html e correggere l'url in questo modo: "data1/images/1.jpg?1" ...ed a seguire per altre sostituzioni con al posto di 1 il 2, 3, ecc.

... vedo che non hai fatto la prova per provare quanto ti avevo detto precedentemente, in quanto sotto ai 960 pixel scompare lo slideshow...

.

(... il mio metodo DIV_CUSTOM+IFRAME dinamico, permette l'aggiornamento immediato dello slideshow senza toccare il programma, potendolo anche sostituire con slideshow di altre fonti, e per chi è attento, renderlo più leggero ed adatto ai dispositivi "mobile" con un rigo di script; ...½ MB per immagine non è l'ideale... )

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Giuseppe Guida
Giuseppe Guida
User

Francesco devi rivedere la posizione delle icne dei social in alto a destra, perchè alle risoluzioni più basse sono posizionate oltre iil margine destro dell'header e ti sfasano la pagina facendo apparire la barra di scroll orizzontale... Poi a occhio e croce dovresti sistemare l'altezza credo dell'header o rendere il suo sfondo trasparente anche alle risoluzioni più basse perchè sembra che l'header copra la slide o comunque la slide sparisce come ha detto Kol....

Lire plus
Posté le de Giuseppe Guida
Francesco P.
Francesco P.
User
Auteur

oK, sto lavorando, comunque è dura per chi non mastica un minimo di codice!

Lire plus
Posté le de Francesco P.
Francesco P.
Francesco P.
User
Auteur

Dopo i Vs preziosi suggerimenti questo è quanto ho saputo fare:

www.federicocasabandb.com

comunque ancora mi tormenta il fatto di non riuscire a tenere bloccato il menù in alto o in basso all'header come in questo caso:

http://www.cgwedding.it/index.html

Lire plus
Posté le de Francesco P.
Giuseppe Guida
Giuseppe Guida
User

Occhio ci sono delle cose da rivedere...

Lire plus
Posté le de Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

e altre cose qui...

Lire plus
Posté le de Giuseppe Guida
Francesco P.
Francesco P.
User
Auteur

Da una verifica mi risulta che la visualizzazione va bene su tutti i browser tranne Safari, dove si scorge l'immagine inserita a fondo pagina. Immagine utile perchè poi la ritroviamo in una pagina più sotto avendo quell'effetto di profondità.

La bandierina dell'eng è stata ripristinata

Per lo sfondo del carattere riscontro delle difficoltà in quanto il sistema di WowSlider non lo permette.

Grazie mille per il tuo intervento.

Lire plus
Posté le de Francesco P.
Giuseppe Guida
Giuseppe Guida
User

Scusami Francesco ma non capisco l'utilità di quella immagine inserita a fondo pagina se puoi utilizzare lo Stile Righe in Website per creare dei validi effetti parallax con immagini di sfondo a larghezza intera e oggetti vari (testo, immagini ecc) che ci scorrono sopra creando ugualmente un bell'effetto di profondità (il parallax serve proprio a questo)

Lire plus
Posté le de Giuseppe Guida
Francesco P.
Francesco P.
User
Auteur

Ti riferisci a questa

Lire plus
Posté le de Francesco P.
Giuseppe Guida
Giuseppe Guida
User

No.  A quella che ti ho indicato in una delle foto piú su che ti rimetto qui sotto... 

Lire plus
Posté le de Giuseppe Guida
Francesco P.
Francesco P.
User
Auteur

Scusa, non per insistere, ma io vedo, usando il PC, questa visualizzazione che allego usando i browser Firefox, Crome e Explorer ultima edizione. L'immagine che vedi (forse usando Safari) è un'immagine di sfondo che serve per una pagina successiva.

La bandiera della lingua è visibile.

Grazie per la pazienza che mi dedichi.

Francesco

Lire plus
Posté le de Francesco P.
Giuseppe Guida
Giuseppe Guida
User

Quella é la visualizzazione da Chrome.  Però considera che lo screenshot l'ho fatto un paio di giorni fa, poi non ho avuto occasione di visualizzare nuovamente il tuo sito dal pc.  Forse ora avrai modificato delle cose (tipo ripristinare la bandierina ecc).  Ma l'altro giorno con Chrome, come puoi anche tu vedere dallo screenshot,  appariva quella immagine sotto la slide di Wowslider al resize della finestra di Chrome. 

Lire plus
Posté le de Giuseppe Guida
Francesco P.
Francesco P.
User
Auteur

Ieri sera mi sono trovato in un negozio di un amico e dal suo PC ho controllato su Firefox il sito e ho constatato che tutto era OK. Alcune perplessità ho su Safari.

Francesco

Lire plus
Posté le de Francesco P.
Francesco P.
Francesco P.
User
Auteur

Questo è lo screenshot su Chrome di oggi 5 mar 11:27.

Un piccolo corollario: ti potrei chiedere come faccio a tenere il menu fisso in alto tipo questo sito?

http://www.cgwedding.it/index.html

Francesco

Lire plus
Posté le de Francesco P.
Incomedia
Riccardo P.
Incomedia

Buongiorno Francesco,

se hai altre domande riguardanti altri argomenti ti chiederei per favore di aprire un nuovo topic.

Grazie.

Lire plus
Posté le de Riccardo P.