Stile Righe - Galleria di sfondi che cambia 
Autor: Enzo I.
Besucht 2322,
Followers 2,
Geteilt 0
Buongiorno,
Nello stile delle righe, in Website x5 13 PRO, è possibile inserire uno sfondo a schermo intero.
Vorrei sapere se per caso fosse possibile creare uno slideshow di sfondi che cambiano ogni tot secondi, sempre a schermo intero. Devo fare questo slideshow per la homepage di questo sito: http://tradingsn.netsons.org
Attualmente, l'immagine di header (che è stata inserita tramite lo stile righe in home page) è fissa, io vorrei intercambiarla con altre immagini... Quindi chiedo aiuto ^^
Vi ringrazio in anticipo per le vostre risposte, grazie.
Enzo
Gepostet am
Con il programma non è possibile creare uno slideshow da inserire nello stile righe.
È possibile creare ciò che intendi fare con programmi esterni, e quindi creare un video in html5 dove ci metterai le slideshow che scorrono e inserire quel video nello stile righe, ma ripeto, devi usare programmi esterni.
La questione l avevo già sollevata io e pubblicato a riguardo un post IDEA, ti invito x tanto a scrivere +1 nel seguente post https://helpcenter.websitex5.com/de/post/171134 con la speranza che venga preso in considerazione nelle future versioni.
ciao, .. non si può far tutto con un unico programma e qualcosa occorrerebbe pur saper fare con un minimo di bagaglio appresso...
... per quanto non previsto dalla opzioni già disponibili (video, gif, yt), il programma mette a disposizione i pannelli ESPERTO e gli appositi Oggetti Codice HTML; ...la propria preparazione poi farà la differenza, e questo si noterebbe anche se si clicca soltanto...
... se ti servisse lo sfondo a tutta pagina, al di là delle righe, sarebbe semplicissimo con il metodo ed istruzioni storiche di Mirko, che puoi vedere da > QUI ed eventualmente contattare dal suo Profilo...
... invece, per lo sfondo animato della prima riga della tua pagina linkata, per esempio puoi fare subito una rapida prova (maximage) con una delle mie invenzioni e penso che ti stupirai; ... poi il resto dipenderà da te...
... io attualmente non ho il programma, e mi sono basato sul sorgente del tuo esempio; ...incolla così com'è il codice che segue nel pannello esperto delle proprietà della pagina | codice personalizzato | opzione > prima della chiusura di HEAD... (dovrebbe funzionarti anche in Anteprima, anche se le prove andrebbero fatte in RETE)
<script>function sfondoK() {
hK= document.getElementById("imPageRowGraphics_1").offsetHeight;
divK= "<iframe src='http://www.kolasim-zone.it/supersfondok/maximage.html' width=100% height=" + hK + "></iframe>";
document.getElementById("imPageRowGraphics_1").innerHTML = divK;}
window.onload = function (){sfondoK()}
window.onresize = function (){sfondoK()}</script>
... oltre a quanto suggerito per la posizione del codice, elementare, ...il tuo unico impegno per niente gravoso sarebbe quello di saper realizzare lo slideshow fullscreen con maximage2, o con qualsiasi altra utility amichevole che troverai in rete, e pubblicarlo nella radice del tuo sito in rete, esportando con client FTP di terze parti, tipo FileZilla, eccetera...
.
Autor
Innanzitutto grazie per la risposta :)
Ho letto il tuo topic, parli di "Swiper Animated Slides" e il "codice di MAeSI": lo strumento Swiper Animated Slides lo posso acquistare senza problemi, mentre il codice di MAeSi non riesco a capire che cosa sia. Potresti essere più specifico per favore? Intanto ho messo un +1 al tuo post :)
Ho acquistato WebSite X5 appunto perchè non sono un programmatore.
la pagina di Queli del Cucuzzolo (MaeSi) è questa: http://quellidelcucuzzolo.blogspot.it/2016/11/layout-strisce-orizzontali-website-x5-13.html
Ops "Quelli" :-)
... mi riferivo più che altro a quanto detto in precedenza al mio post, e, per quello che ho detto io, non serve esserlo!! ...ma qualcosa in ogni caso, (come per le altre proposte!!), devi saper pur fare, come per esempio conoscere il programma e saper usare come minimo il Copia/Incolla oltre al cliccare; ... se provavi avresti già risolto da quattro giorni; non l'hai fatto, e questo dipende da te...!...
.
EDIT: ... proprio per curiosità, intanto che adesso digitavo, in questi cinque minuti, ho provato a clonare la tua pagina direttamente in rete, e ad incollare direttamente il mio codice preso direttamente dai miei esempi; ... detto e fatto con pochi click, e > questo è il risultato che potevi già aver potuto ottenere da te e sperimentare se non perdevi tempo...
.
Autor
Grazie, darò un'occhiata :)
Perdonami, ma non credo di aver perso tempo. Sono rientrato oggi in ufficio e appena ho visualizzato i messaggi ho risposto. In ogni caso non vedo modo di scaldarsi così tanto.
L'effetto ottenuto mi piace, pomeriggio proverò ad applicarlo, grazie molte.
PS: ti chiedo gentilmente se è possibile rimuovere il sito clonato, grazie :)
... non mi sono per niente scaldato, e da dove lo hai dedotto...!?...
...piuttosto dovevi leggere con attenzione e dare importanza a quanto di concreto è stato proposto, e casomai postare nel merito presentandole tue prove...
...!... il sito clonato era a dimostrazione della semplicità e nel tuo interesse, e si estinguerà da solo...!... (directory temporanea TRASH!)
.
ciao
Autor
Buongiorno,
Sto provando entrambi i metodi, così da valutare quale utilizzare. Ho scelto di partire da quello che mi hai consigliato tu, però riscontro un problema. Prima di acquistare Swiper Animated Slides vorrei essere certo di riuscire a realizzare quanto mi hai spiegato, ho provato quindi ad applicare il codice di MAeSI ad un oggetto immagine (1920x1080) inserito nella prima riga disponibile di una pagina del sito.
A questo punto, nelle proprietà di tale pagina, inserisco (prima della chisura del tag HEAD) il codice MAeSI:
<style>
#imPageRow_1 div, #imPageRow_1 iframe {
padding: 0;
width: 100% !important;
}
/* spazio laterale sotto i 480px */
@media (max-width: 480px){
#imPageRow_1 {
width: 92% !important;
}
}
</style>
Però non visualizzo l'immagine a schermo intero. Mi sono accertato che la riga contenente l'immagine sia la prima, ho provato ad inserire l'immagine in una pagina priva di altre righe ma niente. Sai dirmi dove sbaglio??
Ora proverò anche quanto consigliato da KolAsim.
Autor
Buongiorno KolAsim, ho avuto modo solo ora di mettermi dietro alla tua soluzione.
Mi sorge però una domanda immagino stupida: nella prima riga della homepage devo inserire un oggetto? Creare una riga senza oggetti? Oppure questo codice si occupa anche di creare una riga sulla quale inserire lo slideshow?
Seconda domanda, un pò più tecnica: una volta creato lo slideshow, lo sostituisco al link presente nel codice che mi hai scritto, ok. Però mi sono perso al passaggio successivo:
- pubblicarlo nella radice del tuo sito in rete, esportando con client FTP di terze parti;
Conosco e riesco ad utilizzare dei client FTP come FileZilla, però non ho capito cosa dovrei fare esattamente, perdono ^^
ti segnalo anche una eventuale alternativa con wowslider:
https://helpcenter.websitex5.com/de/post/173925
Ciao Enzo, quel codice che hai utilizzato tu va bene per la Google Map a pieno schermo...
Devi utilizzare quest'altro codice (facendo sempre attenzione ad inserire il giusto numero della riga nella quale posizioni la Swiper Animated Slides) che trovi a partire dalla riga 48 alla riga 56 andando su questo template http://www.bozzasito002.altervista.org/arredamento01 sul quale ho inserito una Swiper Animated Slides a pieno schermo. Vai sul template e clicca con il tasto destro del mouse e seleziona "Visualizza sorgente pagina".
Dalla riga 52 alla riga 54 c'è il codice per personalizzare la posizione delle frecce di scorrimento delle foto (se decidi di rendere tali frecce visibili) perchè con il codice di "Quelli del Cucuzzolo" inserito vedrai tali frecce di scorrimento tutte "ammassate" al centro delle foto e non una a destra una a sinistra, per cui utilizza la riga 52 per riposizionarle nel modo corretto. Il resto delle righe di codice, dalla 53 alla 54 sono personalizzazioni riguardanti la posizione dell' eventuale testo descrittivo inserito su ogni foto (sempre che tu lo inserisca tramite Swiper Animated Slides) ma bisogna risalire al giusto numero del #swiper_pluginAppObj_num (a num sostituire l'esatto numero rilevabile tramite "Ispeziona elemento" di Chrome oppure "Analizza elemento" di Firefox. A me c'è 110 ma è riferito al mio progetto. Devi personalizzare quel numero).
Ciao ciao
1) .....................................
... il codice che ho ideato è per lo sfondo delle righe che fanno da sfondo a quella sezione del contenuto della pagina, dedicato alla tua pagina cui relativo precedente clone, quindi ti basta copiare ed incollare al:
>> Passo 3 - Mappa > Finestra Proprietà Pagina > Le opzioni della Sezione Esperto | >▪Codice personalizzato | ▼Prima della chiusura del tag HEAD
... come hai visto dal clone, tu avevi degli oggetti nel corpo della pagina sovrastante la riga, che erano rimasti visibili; ... ti ripropongo nuovamente e temporaneamente il > clone ...in modo che puoi confrontarlo, e si estinguerà in serata; ...quindi puoi usare degli oggetti sovrastanti, come è logico che sia, altrimenti non avrebbe senso lo spazio vuoto...
2) ......................................
... crei lo slideshow col il servizio che preferisci; per esempio MAXIMAGE2 è semplicissimo, o altro che ti risulti più amichevole; quindi riversa in rete, nella radice del Sito la cartelle ed i files a servizio, compresa la relativa pagina html che sarà quella che andrai a sostituire nel percorso URL del mio codice; ...il primo passo che dovresti fare, e qui il programma non c'entra, è appunto quello di realizzare e pubblicare questo slideshow, e poi di postare qui il LINK per valutare eventuali aggiustamenti se necessari; ..fatto questo penseremo poi all'incorporamento nel progetto, che risulterà immediato, come per il mio clone, realizzato con due click; i tuoi link che posterai saranno fondamentali per seguire la situazione e semplificare gli interventi...
3) ....................................
... pubblicare nella radice del sito con filezilla, vuol dire di uppare i files e cartelle dello slideshow nella ROOT dove c'è la index.html...
... oppure puoi usare una cartella posta nella radice del sito chiamata "tuoslideshow", ed in questa riversare tutti i files a servizio, e nel URL utilizzerai tale percorso: tuoslideshow/nomeslideshow.html ... ...oppure con il percorso assoluto: http://www.tuosito/tuoslideshow/nomeslideshow.html
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
(...!... se invece ti interessasse lo sfondo HEADER a tutto schermo, allora sarebbe un altro discorso da fare, cui i 2 tutorial di Giancarlo...!...)
...!... altra soluzione EXTRA, ma fatta tutta con il programma, ancora più semplice ed immediata delle mie, che ho visto proporre da Andreas (DE), sarebbe quella di utilizzare per esempio solo il widget JSSOR-SLIDER nel contenuto della pagina corrispondente alla riga sottostante, e con una semplice e breve stringa di codice poter espandere la presentazione a tutto schermo...!...
.
... tutto è possibile, avendo le idee chiare e sapendo dove metter mano nel programma...
.
P.S. puoi anche crearti su ogni foto delle scritte con un programma di grafica e poi inserisci tali foto + scritte nella Swiper Animated Slides e ottieni qualcosa del genere:
http://www.bozzasito14.altervista.org/beb01/
Ottieni così un effetto decisamente più carino per quanto riguarda i testi descrittivi inseriti su ogni foto.
Ciao
Autor
Per caso il codice di cui parli è il seguente?
#imPageRow_1 div {
padding: 0;
width: 100% !important;
}
.swiper-button-prev {left: -45%; right: auto;} .swiper-button-next {left: auto; right: -45%;}
#swiper_pluginAppObj_110 .swiper-slide .slide-description { background-color: rgba(64,64,64, 0.8);
display: inline-block; margin-left: 5%; }
Se non dovesse essere questo, potresti gentilmente scrivermelo tu? Non sono molto pratico nel ricercare i codici nelle sorgenti, purtroppo.
Avevo già in mente di modificare le foto con Photoshop inserendo le descrizioni direttamente in immagine :)
Grazie per la risposta dettagliata, entro sera dovrei riuscire a mettere in pratica il tutto, così posterò lo slideshow realizzato in questo topic.
L'ultima soluzione, quella extra, mi sembra simile a quella proposta da Giuseppe ma versione "Free", in quanto questo tool di Website è gratuito. Ti andrebbe gentilmente di indicarmi quale codice dovrei inserire per far si che lo slideshow si espanda a tutto schermo?
Grazie di tutto.
Enzo
... per poter capire e potermi regolare sul codice, dovresti attuare lo slideshow che vuoi usar (JSSOR); ...se per caso usi la stessa prima riga che attualmente hai nella home, in teoria potrebbe andarti bene questo codice:
<style> #imPageRowContent_1 { width: 100% } </style>
...oppure questo:
<style> #imPageRowGraphics_1, #imPageRowContent_1 { width: 100% } </style>
... da inserire in:
>> Passo 3 - Mappa > Finestra Proprietà Pagina > Le opzioni della Sezione Esperto | ▪Codice personalizzato | > ▼Prima della chiusura del tag HEAD
... ovviamente se fai vedere il link aggiornato il tutto si sempificherebbe in base alla struttura reale della pagina...
... così però penso! ... non avendo io il programma, che perderesti la possibilità di inserire contenuti, cosa che col mio esempio non avverrebbe...
.
Si Enzo, il codice è esattamente quello e va inserito nella Pagina di tuo interesse in Proprietà/Esperto/Codice personalizzato/Prima della chiusura del Tag HEAD tra i tag <style> e </style> , in questo modo:
<style>
#imPageRow_1 div {
padding: 0;
width: 100% !important;
}
.swiper-button-prev {left: -45%; right: auto;} .swiper-button-next {left: auto; right: -45%;}
#swiper_pluginAppObj_110 .swiper-slide .slide-description { background-color: rgba(64,64,64, 0.8);
display: inline-block; margin-left: 5%; }
</style>
Occhio a personalizzare il numero 1 di #imPageRow_1 (ma se usi la riga 1 nella griglia di Impaginazione di Website per inserire Swiper Animated Slides, lascia il numero 1) e occhio al numero 110 di #swiper_pluginAppObj_110 , numero che devi ricercare così come ti ho spiegato sopra nell'altro post grazie alla funzione "Ispeziona codice" cliccando con il tasto destro sull'anteprima della pagina generata da Website
ciao ciao