Wowslider fullscreen in oggetto HTML 
Autor: Giancarlo B.
Visitado 2963,
Followers 6,
Compartido 0
Sto cercando di semplificare al massimo l'inserimento di wowslider su una pagina, e sempre utilizzando il codice dei ragazzi MAeSI ho inserito l'iframe in un oggetto HTML portando quest'ultimo a full-screen, poi ho inserito uno script per rendere dinamico/elastico l'iframe, sembra ok...
L'unico ostacolo ora è rendere dinamico anche l'oggetto HTML (contenitore), questo si adatta solo con un refresh della pagina ... ma la funzione dovrebbe essere automativa ad ogni resize dell'iframe ... 
Publicado en
... prova ad aggiungere al IFRAME: onresize="calcHeight()"
.
Autor
Grazie Kol.. ma l'iframe si adatta è il contenitore html che si adatta solo al refresh della pagina
con IE11 io vedo tutto funzionante...
Autor
Ciao Mirko in effetti funziona correttemente, ci sarebbe un piccolo ritocco.... se tu cambi risoluzione e rimpicciolisci la finestra l'iframe si ridimensiona correttamente... ma rimane spazio sotto fra la scritta "Iframe in oggetto HTML Full Screen" se fai un refresh della pagina la scritta torna alla giusta distanza ... perchè si ridimensiona correttamente anche l'oggetto HTML, scusami ma non so se mi sono spiegato....
mi dispiace ma (sempre con IE11) ho fatto come dici, stretta fino al massimo ma funziona tutto perfetto, la scritta rimane sempre attaccata alla slide....
... allora prova ad aggiungere in HEAD:
<script> window.onresize =function(){ location.reload();} </script>
.
Vedo come Giancarlo con Chrome, slide ok con iframe che si stacca, faccio refresh e iframe si attacca correttamente.
Autor
provato KolAsim ad inserire lo script.. ma è un refresh dietro l'altro ...
Giancarlo, ma perchè inserire la slide in un iframe? Io qui ho inserito il codice di Wowslider direttamente in un OGGETTO CODICE HTML, abilita nell'Oggetto Codice HTML "ALTEZZA AUTOMATICA", essendo la slide inserita nella riga n.1, inserisci in Proprietà della Pagina/Esperto/Prima della chiusura del Tag HEAD il codice suggerito da Quelli del Cucuzzolo specificando come numero di riga 1:
<style>
#imPageRow_1 div {
padding: 0;
width: 100%;
}
</style>
e non hai nessun problema di testo che si distanzia dalla slide o di refresh vari, vedi qui e fai il resize della finestra del browser, il testo sta sempre alla stessa distanza dal bordo inferiore della slide:
http://www.bozzasito14.altervista.org/slidefullwidth
Non serve l'iframe con il codice suggerito da MA&SI (ancora un doveroso grazie a loro!)
Ciao ciao
Autor
Ciao Giuseppe mattiniero
, si lo so gia provato come dici tu, ma è per un test cche non devo utilizzare NON per altro, infatti sul mio esempio credo sia tutto come hai descritto tu sopra compreso il codice MAeSI, la differenza è averer provato con un iframe, Grazie ancora... e buona giornata.
Ciao Giancarlo, si, infatti senza iframe funziona benissimo la slide e si integra in Website in pochi secondi. Non serve scervellarsi per integrarla in altri modi. Ciao ciao
Autor
... questo il codice visibile sulla pagina, credo che sull'oggetto HTML nella versione EVO NON sia disponibile l'altezza AUTO ho sopperito con il codice per l'oggetto imHTMLObject_07
<style>
#imPageRow_1 div {
padding: 0;
width: 100% !important;
height: auto !important;
}
#imHTMLObject_07 {
height:auto !important;
}</style>
... ti avevo dato quei suggerimenti senza entrare nel contesto generale della tua pagina...
... ma, se il tuo intento era o è quello di semplificare l'inserimento di slideshow esterni, non hai provato per caso il mio codice che hai già usato nel tuo tutorial, nato a posta per questo scopo...?...
... osservando la struttura della tua pagina, prova a fare copia/incolla di questo codice:
... HEAD...
<style> #imPageRow_1 div {padding:0px; width: 100% }</style>
<script>function h_iframeK(){
var ww =1920; // larghezza immagini;
var hh =800; // altezza immagini;
var wdiviframe = document.getElementById('div_iframe').offsetWidth;
var hiframe=Math.round(wdiviframe*hh/ww);
document.getElementById('iframek').style.height=hiframe +"px";
document.getElementById('imPageRow_1').style.height=hiframe +"px";}
window.onload = function () {h_iframeK();}
window.onresize = function () {h_iframeK();} </script>
... Oggetto Codice HTML...
<div id="div_iframe"> <iframe id="iframek" name="iframek" width="100%" height="200" src="http://giancarlob.altervista.org/galleria-full-html/wowslider.html" scrolling="no"
frameborder="no"></iframe> </div>
... non avendo il programma, posta l'esempio per vedere se potrebbe essere necessario qualche aggiustamento...
.
Autor
Grazie KolAsim per la tua disponibilità.
Come è pubblicato ora, ho notato che il comportamento è OK su firefox mentre su Crome occorre un refresh, appena riesco e mi ritrovo del tempo.. (visto che è solo per mio diletto..) provo altre varianti compreso il tuo ormai famoso codice.
Buona giornata ciao Giancarlo.
Autor
Kol.. ho editato la pagina manualmente ed aggiunto le modifiche che hai postato al volo..
http://giancarlob.altervista.org/galleria-full-html/index_kol.html
...
...grazie per il test, velocissimo, e che mi ha tolto i dubbi...
... ho potuto vedere solo su PC 1280 con Ch ed Ff e mi pare regolare e mi soddisfa il risultato, ... e credo che confermi quanto avevo presunto...
... se risultasse anche a te su altri dispositivi, potresti preparare un nuovo tutorial visto che sei specializzato...
ciao ...
.
Autor
durante la pausa ... ci sono riuscito.. mi sembra ottimo il risultato... ora mi resta da fare un ultimo test..
aggiungere sulla stessa pagina l'effetto parallasse, per valutare se con questa configurazione non sballa.. ma questo lo vedrò con il programma sotto ....
Grande KolAsim
Scusate, io adesso non capisco la necessità di inserire l'iframe e tutto quel codice in più se la cosa si risolve in modo molto più semplice e senza nè iframe nè codice per iframe elastico come nell'esempio postato sopra da me... Si sta discutendo di come semplificare al massimo e di come integrare in pochissimo tempo una slide full screen in Website? O forse ho capito male io il senso di questo topic?
A mio parere con l'iframe si rende tutto più.. "complicato" (relativamente complicato, sia chiaro! Ma è molto più immediato e veloce il metodo descritto da me sopra).
Giancarlo, ora ho letto bene. Giustamente nella Evolution bisogna farlo con il codice non avendo l'oggetto HTML l'impostazione dell'altezza automatica. OK. Pardon allora.
Autor
ciao Giuseppe, hai senza dubbio ragione.. ormai con la V13 le alternative per chi vuole implementare lo slider full ci sono.. e la soluzione migliore è quella descritta da te sopra utilizzando i codici MAeSI... l'unico vantaggio di questa soluzione, è quella di inserire nuove immagini ed uno slider modificato senza intervenire successimamente con
website.. ma ripeto, la soluzione senza iframe è migliore per il mio modesto parere, ed è quella che preferisco.
Si, sicuramente con l'iframe cambi le immagini nella slide senza dover aprire di nuovo Website e ripubblichi solo la slide online.
ciao Giuseppe,
...(...O.T. >> prima di tutto ti ringrazio per la tua partecipazione dimostratami in altro Topic n.n....)
... per quanto asserisci adesso, io l'ho sempre pensata allo stesso tuo modo, ed il metodo da te suggerito, sarebbe quello veramente da seguire, dimostrato chiaramente dai tuoi esempi, e da quelli di Giancarlo cui primo tutorial, e da quelli di Mirko già dagli albori...
... chi conosce bene il programma non incontrerebbe difficoltà in ogni caso...
... ma per i meno esperti, come spesso dimostrato, potrebbe risultare molto più semplice ed immediato l'uso degli IFRAME con un semplice copia/incolla del codice adatto, utilizzabile per molti altri scopi extra, oltre al vantaggio unico di cambiare /aggiornare lo slidershow senza toccare il programma...
... ciao, e sempre in gamba...
.
Ciao Kol, grazie a te per le dritte suggerite ogni volta. Il tuo iframe elastico l'ho utilizzato e funziona alla perfezione solo che a volte (non sempre e non ho capito perchè) interferisce con il parallax inserito nella stessa pagina.
Comunque la mia soluzione va bene per chi ha la V 13 PRO che in effetti permette di impostare l'ALTEZZA AUTOMATICA per l'Oggetto codice HTML, in alternativa chi ha la 13 EVO deve aggiungere una stringa di codice in più per dare Altezza Automatica all'Oggetto Codice HTML e poter ottenere quello che ho fatto io con la 13 PRO.
Ben vengano tutte le "sperimentazioni" e prove possibili.
Ciao ciao
Comunque Giancarlo, per ottenere con la EVO 13 un OGGETTO CODICE HTML con ALTEZZA AUTOMATICA bisogna impostare l'altezza dell'OGGETTO CODICE HTML a 0 (zero), togliere la spunta dalla voce "Visualizza barre di scorrimento" (quindi DISABILITARLE) e inserire nelle Proprietà della Pagina dove è inserito l'OGGETTO CODICE HTML contenente il codice di WOWSLIDER, sezione Esperto/ Prima della Chiusura del Tag HEAD il seguente script così come sta scritto:
<script>x5engine.settings.imGrid.enabled = true;</script>
E funziona tutto come con la V 13 PRO, come da me ampiamente testato qui: http://www.bozzasito14.altervista.org/slidefullwidth
N.B. per completare la spiegazione su come ottenere quella slide a pieno schermo come nel mio esempio sopra, ecco tutto il procedimento:
tutto il codice generato da Wowslider (bisogna essere un po' pratici di Wowslider) sia per il body che per l'head va inserito nell'Oggetto Codice HTML posizionato nella Riga 1 della griglia di impaginazione di WEBSITE incollandolo nel primo tab "Codice HTML" e facendo attenzione ad inserire la parte di codice di Wowslider riferita al body tra i tag <body> e </body> e la parte di codice riferita all'head tra i tag <head> e </head>.
Con la 13 PRO invece ricordarsi di spuntare (quindi ABILITARE) la funzione "Abilita Altezza Automatica" nell'Oggetto codice HTML, disabilitare sempre "Visualizza Barre di scorrimento" e inserire la riga di codice
<style>
#imPageRow_1 div {
padding: 0;
width: 100%;
}
</style>
per rendere l'oggetto codice HTML a pieno schermo come dettagliatemente spiegato da Quelli del Cucuzzolo, descrizione qui:
http://quellidelcucuzzolo.blogspot.it/2016/11/layout-strisce-orizzontali-website-x5-13.html
facendo attenzione a riportare nel codice lo stesso numero di Riga in cui è posizionato l'Oggetto Codice HTML sulla griglia di impaginazione di Website.
Credo sia tutto, ora se non si riesce ad inserire la slide full width di WOWSLIDER in Website Evo 13 e Pro 13 credo bisognerebbe recarsi a Lourdes!
ciao, ... ne avevo letto anche > qui e confermato > qua, ...ma non essendo stati prodotti esempi per me è difficile poter valutare...
... visto la flessibilità del DIV_CUSTOM+IFRAME penso che eventuali problemi potrebbero non esser tali, magari con qualche minimale aggiustamento come avvenuto per il precedente esempio di Giancarlo...
.
ciao
Kol, il sito che ho creato per conto terzi è questo: http://www.anotherweb.it/usato
usa il tuo codice dell'iframe elastico, mi dava problemi sull'anteprima in locale di Website con la riga impostata con il parallax, se non ricordo male una volta online non c'era più il problema. Infatti ora non ha più quel problema anche se c'è da dire che chi lo ha personalizzato ha ridotto di molto l'altezza della riga con l'effetto parallax, il problema era evidente sulla riga del parallax impostata con una certa altezza, altezza che superava i 700-750 px circa se non ricordo male, quindi ora in effetti non si può neanche più valutare più di tanto. Devo riprendere quel progetto e riprovare e poi metterlo online su un indirizzo provvisorio.
... forse è un problema relativo proprio dell'anteprima, di cui un caso simile senza script extra fu segnalato anche >> qui e risoltosi con esportazione in rete; ...il vero test da fare è sempre quello in rete...
... con l'esperienza che si ha, ed a seconda delle occasioni o necessità, si può fare come si crede meglio e conveniente per lo scopo, come hai dimostrato diverse volte...
...
...comunque, il tuo lavoro si presenta molto bene, complimenti, e grazie per il link con l'esempio reale che ha eliminato i dubbi...
ciao
p.s.: ... per altri esempi con eventuali problemi, magari posta il link per valutare eventuali aggiustamenti...
Autor
.. l'anomalia diciamo se così si puo dire, è che il parallasse non esegue tutto il percorso completo ... se vedi anche sulla pagina di Giuseppe si blocca (almeno sul mio monitor) su finestre più grandi si nota molto, ciao Giancarlo.
... grazie Ginacarlo, ... non dubito della tua prova, ...ma sul mio PC con Ch ed Ff a 1280 non noto niente di particolare in ambedue, funzionando il parallasse correttamente, ed è regolare anche zoommando in negativo di vari gradi e ridimensionando la finestra a varie risoluzioni simulando un grande schermo...
... nel caso sarebbero utili altri eventuali riscontri per capire cosa sia che influisca veramente...
.
ciao
però nel tuo esempio la slide non si adatta in lunghezza alla dimensione del monitor.
tutto alla perfezione @GiuseppeGuida pero' non tutto il codice va inserito nel widget oggetto HTML.
QUESTO VA INSERITO NELLA SEZIONE ESPERTO > PRIMA DELLA CHIUSURA HEAD
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
Dan Abba, a me si adatta in lunghezza fino alla dimensione di 1920px, credo che sia anche il limite di lunghezza consentito da Website. Se non erro tu hai un monitor molto più grande di 1920px, così mi era sembrato di leggere in qualche altro post, giusto?
Kol, grazie per i complimenti. Ok, in caso di altri problemi su slide full width, iframe elastico e simili vedrò di postare esempi qui. Per ora con il metodo che ho usato io sembra che problemi non ce ne siano, nè con la 13 PRO, nè con la 13 EVO (aggiungendo quello script per rendere automatica l'altezza dell'oggetto codice HTML), tranne per quanto segnalato da Dan Abba, nache se a me fino a 1920 px in larghezza non c'è nessun tipo di problema con l'adattamento full width della slide, ripeto credo che Dan abbia un monitor maggiore di 1920px e credo che il limite sia legato alla dimensione max di 1920px consentita da Website. Se qualcuno può fornirmi riscontro gliene sarei grato.
Dan occhio alla riga <script type="text/javascript" src="engine1/jquery.js"></script> del codice di Wowslider per la sezione HEAD, se non la elimini ti darà un mare di PROBLEMI su alcune impostazioni grafiche di Website (quella riga la puoi eliminare tranquillamente, già testato da me e da Giancarlo, wowslider funziona benissimo anche senza, dà solo problemi se la lasci lì). Nei siti e nei template messi in rete da me quella riga che ti ho indicato sopra non la troverai mai, eliminata dappertutto, creava problemi di ogni genere.
Ciao
si, il mio monitor è 2560 px per 1080 px. Il problema si risolve indicando a wowslider di creare uno slide schermo intero (versione 8.7) e non a larghezza piena.
Per il codice da te indicato, non ho mai avuto problemi. Se qualcosa non dovesse andare bene, rimuoverò quella stringa di codice.
Dan però con l'impostazione di Wowslider che tu indichi, le immagini poi vengono tagliate lateralmente perchè l'altezza rimane fissa, a me servono immagini che si adattano in entrambe le dimensioni ed uso quindi la funzione "Larghezza piena" in Wowslider. Le immagini che ho io hanno larghezza 1920px, devo provare ad inserire in Wowslider immagini di larghezza maggiore (proverò ad usare immagini di 2560px come il tuo monitor) e, usando sempre, "larghezza piena", dovrebbero riempire anche tutto il tuo schermo... il problema però si ripresenterà se arriva poi qualcuno che ha uno schermo ancora più grande del tuo
Meglio trovare una "via di mezzo" al quel punto. Non bisogna "inseguire" il full width ad ogni costo.
vai di schermo intero e risolvi. già provato su schermo più grande del mio. Perfezione.
Si Dan, ok... però se io imposto la funzione "Larghezza piena" come faccio di solito, riducendo la finestra del browser la slide si vede come nell'allegato (le foto si ridimensionano in altezza e larghezza e NON vengono tagliate)...
... Se invece imposto "Schermo intero" come da te consigliato, io alla riduzione della finestra del browser vedo che le foto della slide vengono tagliate come puoi ben vedere nell'allegato qui sotto (gli sciatori presenti sulla foto vengono "eliminati" e ne rimane solo uno, il "sopravvissuto", ma a me questo non va bene)
scusa ma che dimensioni hai dato alle foto? io facendole 2560 per 1080 vedo tutto corretto.
Dan, te l'ho scritto sopra: le mie foto hanno dimensioni 1920px. Ma se tu restringi la finestra del browser che succede alle foto? Puoi mettere un link o mandare degli screenshot?
Io non ho idea di quali possano essere le massime dimensioni dei monitor. So che il tuo è 2560px, ok... Tu hai impostato le foto a 2560px e sul tuo si vedono full width alla massima dimensione consentita dal tuo schermo. Ma se poi arriva qualcuno con schermo più grande del tuo, come vedrà le foto? Con spazi laterali o no? Siamo sempre lì alla fine.
... trattandosi di extra, per le prove personali posso capire, ma le grandi misure non sarebbero da prendere in considerazione se si è sensibili al web...
... le misure da considerare dovrebbero stare tra max 800 pixel (xMobile) e tra max 1400 (xDestop) per coprire il 98% del WEB, e se si volesse, max 2400 pixel per la fetta rimanente; in questi casi potrebbe entrare in gioco la flessibilità dell'IFRAME (x semplificare), come si è intuito precedentemente...
.
ciao
Kol sono d'accordissimo con te.
Attenzione alla slide WOW a schermo intero (sia in larghezza che in altezza), chi si pubblicizza tramite facebook viene visualizzata sballatissima nei dispositivi mobile Apple dal browser interno di facebook.
Mentre sul browser interno di FB da Android nessun problema!