Semplice tutorial per inserire una galleria full screen in V13
Author: Giancarlo B.
Visited 7226,
Followers 10,
Shared 0
Semplicissimo tutorial per implementare wowslider su un progetto fatto con website 13.
Con pochi passi inseriamo una galleria full screen.
http://giancafoto.altervista.org/wowslider-v13/
Spero sia utile, Giancarlo.
Posted on the
Author
esempio da questo link:
http://giancafoto.altervista.org/wowslider-v13/wowslider-V13.zip
Author
Marco.. se vuoi come ti ho scritto al punto 2 puoi mettere il test online.
Oppure prova la soluzione con iframe:
1) prendi le due cartelle ed i 3 file generati da wowslider e le esporti dentro la root del tuo sito (directory principale)
2) scrivi questi codici come segnato nell'allegato
Finito.
... grazie Giancarlo per l'idea del tuo TUTORIAL, che sarà un riferimento nei suggerimenti per richieste su argomenti simili...
... grazie a nome di tutti, ciao
.
p.s.: ho oscurato i post che alteravano lo scopo di questo argomento...
Author
Grazie a te Kol..
sia lodato Giancarlo!
Author
Ecco le due versioni commentate:
Versione (wowslider)
http://giancafoto.altervista.org/wowslider-v13/
Versione con iframe (KolAsim)
http://giancafoto.altervista.org/wowslider-v13-iframe/
Potete passare da una versione all'altra dal menù che trovate sul menù.
Grazie a tutti...
... per versione con IFRAME, basta aggiornare la pagina che nel Tutorial di Giancarlo si chiama wowslider.html, e che poi sarebbe questa: http://giancafoto.altervista.org/wowslider-v13-iframe/wowslider.html ...e come detto nella sua presentazione...
... puoi usare qualsiasi tipo di slideshow, come maximage, vegas, tympanus, sorgalla, eccetera, ...tra quelli che possano risultare più amichevoli...
.
Ciao
Complimenti bellisimo tutorial.Posso chiedervi come si fa a mettere nella root del sito le due cartelle data1 ed engine1?
Author
Puoi utilizzare un qualsiasi programma che permetta il trasferimento di file in Rete attraverso il protocolloFTP, io iso Filezilla.
ma con il menu da programma e con lo scroll non si riesce a fare?
mi sono accorto che le arrows ed il pulsante pause non funziona. Inoltre, come faccio a non mettere il logo vicino il menu?
<style>
/* impostazioni distanza Slide full width dal menù e altre impostazioni slide*/
#wowslider-container1{top: 80px; z-index:-1;}
/* FINE impostazioni distanza Slide full width dal menù e altre impostazioni */
</style>
basta inserire z-index:1
mentre per il logo? me lo ritrovo sempre alla estremità dello schermo.
Author
grazie Dan è stata una mia svista ora è z-index:0
per il menù al momento non ho la possibilità di verificare ....
Author
mi sono trovato un minuto e ho provato questo codice (non ho il programma sotto):
#imHeader_imCellStyle_1 { position:fixed; width: 50%; top: 10px; z-index:1;}
#imHeader_imCellStyle_1 è la cella del logo e si posiziona in questo modo con il logo molto più vicino al menù
ma credo ci sia un metodo migliore di questo ... con un po di pazienza e tempo si possa fare tranquillamente.
perfetto funziona, ora faccio delle prove dettagliate e posto i risultati.
Giancarlo, e se volessi mettere una foto come logo anzichè il widget Titolo? Il codice è lo stesso? Ho provato, ma la foto non esce.
Author
Dan devi identificare l'oggetto #imHeader_nomeoggetto potrebbe cambiare.... se vuoi prova a mettere l'esempio online.
Author
.... sul sito che ho fatto cgwedding il nome per la cella del logo è #imHeader_imCellStyle_1 quindi mi funziona con lo stesso codice.
su giancafoto la cella invece è #imHeader_imCellStyle_2 quindi adrebbe cambiata.
ecco a te:
/www.realizzazionesitiwebsalerno.it/prove
prova a ridimensionare la finestra del browser e vedrai il logo
Author
Dan l'oggetto è quello ... il comportamento è strano... ho preso il cocice dal tuo test (che poi è quello postato) e l'ho incollato con un editor html sulla pagina il locare come vedi dall'allegato si comporta bene e l'immagine è spostata a destra ma non si deforma.
Forse c'è qualcosa sul tuo progetto prova a controllare.
Dan ti avevo inviato un progetto con il menù già impostato per regolarti la posizione di logo e voci menù, dovevi solo inserire poi la slide di Wowslider seguendo le indicazioni che ti dà Wowslider stesso.
Se non ho capito male si parlava di un problema delle immagini che si deformano? Giusto?
Avviene (come spiegato in un post sulla versione 12 da Stesil e Lemonsong), se ci sono dei link sulle immagini, l'immagine si derforma se provi a ridimensionare 3 o 4 volte di seguito la finestra del browser con le maniglie laterali, rimpicciolendola quasi al minimo e poi riportandola alle dimensioni iniziali, facendo il tutto un po' velocemente...
Lo fa anche a me su questo sito sull'immagine rotonda azzurra con la scritta "Clicca qui" che ha come sfondo il fotografo e il pianista:
http://www.ggweb70.altervista.org/prove13pro02/
se trascino più volte un lato della finestra del browser e poi riporto alla dimensione iniziale la finestra per 3 o 4 volte, l'immagine rotonda diventa ovale come potete vedere nella foto allegata.
Ho segnalato già la cosa in privato ad Incomedia ma non riescono a ricreare il problema... qualcuno può confermare? Grazie mille
Author
ahh!! Grazie dell'info Giuseppe, non ho ancora riscontrato quel problema... utilizzando l'oggetto html con <a href="http://www.nomesito.it/"><img src="img/sito_logo.jpg" /> questo non accade
Ah ok.. avevo letto questa tua frase riferita a Dan Abba: "come vedi dall'allegato si comporta bene e l'immagine è spostata a destra ma non si deforma." .. quindi credevo si parlasse di quello.. Forse sarebbe meglio spostare il mio post in un altro topic per non "sporcare" ciò che riguarda il tutorial.
P.S. Giancarlo ma nel tuo codice vedo i commenti al codice, in alcuni punti, esattamente come li avevo commentati io nella mia prima prova in assoluto sulla Pro 13 con slide full width in alto e menù sopra alla slide, full width anch'esso. O forse sbaglio?
Author
si esatto i tuoi commenti sono belli (come i tuoi siti)
Thanks
Giancarlo, nel tutorial riferito all'inserimento di wowslider tramite iframe come suggerito da Kol manca credo un passaggio, quello dove va spiegato cosa vuol dire nel codice "wowslider.html" (riferito, per chi lo sa, alla creazione di una pagina nascosta chiamata "wowslider" alla quale non va applicato il modello grafico). Ho dato uno sguardo in fretta ma non ho trovato nulla riferito alla creazione della pagina wowslider.html
Correggimi se sbaglio.
ciao ciao
Author
Giuseppe, ho cercato di semplificare il più possibile i passaggi senza entare troppo nel merito è molto light, quella pagina viene generata da wowslider in automatico .... come ben tu sai.. è la pagina che viene poi visualizzata nella finestra dell'iframe, diciamo che è realmente la galleria con le immagini fullscreen. Poi per quanto riguarda l'uso di wowslider meglio fare riferimento al sito ufficiale del software.
ah si, poi ho letto meglio, tu infatti consigliavi di caricare nella root del sito tutte le cartelle e i file generati da wowslider (per cui quella pagina "wowslider.html" era già generata dal programma). Ok, giusto come dici tu. Io invece di solito creo una pagina nascosta in website alla quale non applico il modello grafico e assegno 1920 px come dimensione della pagina e poi la richiamo con l'iframe... è la stessa cosa in fondo
ciao ciao
questo è il mio esempio con iframe (come indicato da te e da Kolasim) e Slide Wowslider in pagina nascosta creata con Website senza applicare il modello grafico, è lo stesso risultato, funziona molto bene:
http://www.ggweb70.altervista.org/provaslideiframe/
ciao ciao
Author
Ottimo Giuseppe grazie, direi che di alternative e di spunti per l'inserimento di uno slider full screen ce ne sono, ora basta solo un po' di buona volontà.
Si, hai davvero fatto degli ottimi tutorial, ora via alle varie prove da parte di tutti!
Ciao
ragazzi scusate, un po' mi son perso e vi spiego...
l'esempio riportato in questa guida
http://giancafoto.altervista.org/wowslider-v13/
mi piace molto, e x prova vorrei ricreare una finestra simile ( x intero ) solo che mi son perso xke... 1 non trovo i codici, si sono riportati nel immagine screen, ma non potreste scriverli ??
poi mi son perso xke dice... x vedere l'anteprima in website locale.. bisogna copiare le cartelle di wowslider nella cartella previews dei progetti... e dove la trovo ? nella directory di installazione di wsx5 vi e soltanto una cartella previews... la dentro vanno incollate ??? e quando dice, inserire questa parte di codice nelle proprieta della pagina............. intende quale pagina ? la home ? tutte ??
sono perplesso, la soluzione e cosi vicina, e pure mi perdo
Author
Adriano se leggi bene i codici li trovi sono commentati quando sei sulla pagina dimostrativa premi CTRL + U li copi e li incolli in un file .txt
La cartella Preview è quella del tuo progetto .... con quella di installazione ... se il tup progetto ci chiama pippo, all'iterno della cartella pippo troverai la cartella Preview, ma sai dove sono salvati i tuoi progetti ? spero di si .... comunque lo vedi in website in preferenze.
La propietà della pagina naturalmente è quella dove inserirai la galleria full screen, nel caso dell'esempio è la home.
Ciao Giancarlo.
...!... frammentando... >> https://helpcenter.websitex5.com/en/post/157693
Kalos... scusa una cortesia.. mi avevi fatto vedere del codice, in modo tale che sotto ad alcune risoluzioni spariva lo slider.... ricordi... dovrei far sparire lo slider ma far comparire una foto....? come posso fare... grazie
Author
Da una richiesta di Max D. ho fatto questo test con Header in trasparenza.
Ho utilizzato il codice iframe di Kolasim, è semplice da implementare basta posizionare l'iframe
a Top=0 e rendere trasparente l'Header. Inserisco anche questo nel post idea, come esempio.
Spero sia utile, Giancarlo.
http://giancarlob.altervista.org/header-trasparente/
... volevo fare.. che quando gli utenti vedono il sito ad esempio dal telefonino... sparisca lo slider e visualizzi una foto.
Attendo aiuto. Grazie
Author
Marco in teoria utilizzando il codice di Kolasim ed inserendo una jquery si potrebbe fare per fare sparire wowslider..
il 719px è la misura ipotetica
@media(max-width: 719px){
#div_iframe{display:none !important;}
}
poi viceversa per l'immagine o sotto all'iframe oppure con un cocice inverso per mostrarla ... dovresti fare qualche prova.. è solo una mia ipotesi..
io lo slidere grazie a Kalos sotto i 719px sono riuscito a nasconderlo.. ma io oltre che a nasconderlo dovrei far comparire su questi px una foto... qualcuno riesce a darmi il codice per poter aggiungere questa funzione...?
Giancarlo, datosi che ho creato un wowslider con opzione "schermo intero" quindi si adatta alla finestra del browser sia il larghezza che in altezza, come dovrei modificare questi parametri in quanto mi danno comunque un'altezza fissa e non rispettano la slide:
var ww =1280; // larghezza immagini;
var hh =853; // altezza immagini;
Spero di essere stato chiaro...
Questa è la slider: http://www.vincenzoerrico.it/wowslider/index.html
Grazie mille!
Author
Vincenzo chiarissimo,
purtroppo non ho mai testato questa evenienza con il codice di Kolamis, direi di aspettare un suo suggerimento in proposito .... oppure potresti provare ad utilizzare il codice originale wowslider senza iframe... ma se vuoi usare l'iframe probabilmente avrai i tuoi buoni motivi...
Ok, grazie! Si, in iframe in quanto lo devo incorporare in diverse pagine...
Ho provato con il codice di wowslider ma mi fa abbassare il menu sotto la slide.
... devi usare i valori delle misure delle tue immagini per mantenere il rapporto ratio...
... tue attuali immagini misurano 1600 x 1066 pixel ...
... casomai posta il link della pagina di prova in cui tenti di incorporare lo slide con l'IFRAME...
...
...invece del codice che hai usato, prova con questo:
@media(max-width: 719px){
#iframek{display:none !important;}
#div_iframe{background-image: url("files/nomeimmagine.jpg");}
}
.
Kalos Dammi un occhio per favore come mai non va?
www.mediacar.biz
...xMarco, l'immagine non mi sembra adatta, e l'URL non è completo...
... o metti l'URL relativo:
"Tel01.jpg"
... oppure l'URL assoluto, completo:
"http://www.mediacar.biz/Tel01.jpg"
-
Adatta cosa vuol dire...scusa....
ma come mai non vedo nulla... l'immagine non mi compare...?
... stai attento su queste cose basiliari...
...!... cosa sarebbe questo...?... http://www.mediacar.biz/Tel01.jpg2
... attualmente te l'avevo detto prima: http://www.mediacar.biz/Tel01.jpg (non adatta!)...
.
Kalos... perdonami... ma io ho corretto il piccolo errore ma non mi visualliza nulla...
... prova ad aggiungere l'altezza al #div_iframe:
height:200px;
.
no nulla... non compare..
... se ripeti gli errori fatti prima, non ci posso far niente... cioè l'immagine errata...
... comunque le regole son quelle; ...prova a giostrarci intorno, personalizzando con altri attributi se occorresse...
.
Kalos... scusa ma immagine errata cosa vuol dire... perdonami..
... non c'è, è la stessa che ti avevo già indicato qui: https://helpcenter.websitex5.com/en/post/157292#comment84
.
Kalos... ma la foto è pubblicata sul web.... certo che cè?
... de l'ho detto diverse volte, tu hai messo questo nell'URL, ...!... cosa sarebbe che non c'è, ...come hai visto dal link che è chiaro...?... http://www.mediacar.biz/Tel01.jpg2
.
Kalos... scusami... ma questo link http://www.mediacar.biz/Tel01.jpg2 ho provveduto a sistemarlo.. appena mi hai "richiamato" dell'errore... ;)
Kalos.. come sempre avevi ragione tu... ho fatto un errore io.. e non si aggiornava la pagina... scusa.... ascolta guarda ora.. che scherzo fa...non la vedo a tutto schermo.. ma solo per meta.. grazie davvero tanto...
Kalos ?? Marco S... Lui è tra i più famosi e attivi del forum da una vita e tu me lo chiami Kalos? Come si distrugge un mito lui è Kolasim!!! L'unico e inimitabile Kolasim!
... x Marco, dagli l'altezza che vuoi, prima gli avevi assegnato 200px ...
... puoi anche metterla centrata aggiungendo:
background-repeat: no-repeat;background-position: center;
... ormai puoi fare come credi ...
... x Giuseppe ... ciao ... ...
Ciao a te... Kalos
KolAsim... ho provato diversi Px ma non riesco a vederla a tutto schermo sotto certi px.... riesci ad aiutarmi ancora un momento almeno chiudo progetto... ;)
... più di quanto detto, e senza avere programmi, proprio non saprei, devi fare delle prove tu...
... poi non hai provato l'ultima aggiunta detta prima, tanto per vedere come si sarebbe presentata...
... poi quella immagine come ti avevo detto non mi sembra adatta, come puoi vedere direttamente dal link che avevo postato...
... non va bene insistere in questo Topic nato per altri scopi, e nel caso apri argomenti tuoi......
ok.. KolAsim... grazie
salve, ho inserito questo codice che blocca il menu e l'Heder nel top della pagina:
<style>
/* distanza contenuti pagina dal top */
#imContent{top: 100px;}
#imContent{margin-top: 100px;}
/* impostazioni menu, header e sfondo intestazione */
#imHeaderBg{position:fixed; top: 0px; z-index: 10; }
#imHeader{position:fixed; width: 100%; top: 0px; z-index: 10; }
#imMnMn{position:fixed; top: 40px; z-index: 10; }
</style>
Come devo fare per fare in modo che il menu ed il logo scorrano con tutta la pagina, anziché restare sempre visibili?
Author
Stefano.. sul tutorial trovi sia.. la versione originale wowslider che probabilmente stai provando.. sia.. quella di KolAsim con iframe, in questo coso.. nell'esempio testato.. l'header ed il menù NON sono fissi e si muovono con la pagina.
...e nel passo 3 va solo quella piccola riga di codice?
in seo non devo inserire niente?
Come ho detto altrove, non capisco niente di html... scusatemi...
OK FUNZIONA!!!
c'è la possibilità di potere aggiungere qualche cosa sulla slider? tipo un pulsante, una scritta, un logo...
Author
Devi crearti lo slider con wowslider è un software con molte opzioni ..... scritte ecc. puoi scaricarlo gratis.
ho gia fatto lo slider, io parlavodi aggiungere qualcosa sopra lo slider, tipo un pulsante interattivo, una scritta o un logo che posso inserire in un secondo momento, possibilmente con un collegamento ipertestuale...
come posso fare ad alzare un immagine dal body sullo slider,usando il codice iframe?
Author
allo step 2 c'è scritto come posizionare l'iframe dall'header... però quello che chiedi tu non so se è la stessa cosa posta un esempio per capire meglio...
praticamente è quello... però, da alcune prove che ho già fatto con quel codice l'immagine sul body non resta fissa in un posto, ma va correndo per tutto lo slider in modalità responsive nelle visualizzazioni inferiori.
posto qualche esempio giusto per capire:
In modalita responsive massima, l'effetto è quello voluto, la scritta Cuordisale e la scritta sole, mare vento.. sono delle immagini caricate nella pagina home e che tramite il codice:
<style>
/* impostazioni di pagina distanza Slide full e menù */
#wowslider-container1{top: 100px; z-index: -1 !important;}
/* distanza contenuti pagina della Home da Slide */
#imContent {margin-top: -600px;}
</style>
restano nel giusto posto.
quando vado a restringere la pagina ecco che incomincia a sballare tutto:
per passare al disastro completo nelle modalità responsive inferiori, quando pure il testo inserito molto più giu, sale sulla slider:
prova con le @media query.....guarda il mio codice:
http://www.mirboprova.altervista.org/wowslider12Pro-scroll/
...stavo proprio guardando quello!!! grazie Mirko..!!!
ma si adatta per la 13?
fatto la prova... con questo codice con questo non si apre la slider...
ok!!! utilizzando il codice:
@media screen and (min-width: 1400px) and (max-width: 1600px) {
#imContent {margin-top: -500px;}
}
@media screen and (min-width: 1200px) and (max-width: 1399px) {
#imContent {margin-top: -400px;}
}
...e via dicendo per le visualizzazioni inferiori, l'immagine resta sempre all'incirca dove voglio io!!!
Qualcuno può dirmi gentilmente come posso mettere del testo sotto ak nostro slider...? o una cella di testa sempre sotto la slider... grazie
premesso che mi sembrate tutti dei maghetti e io lo sono sicuramente meno , mi chiedevo...giusto per capire...
1) wowslider... se non ho capito male... va comprato giusto??? esiste uno strumento gratuito per fare la stessa cosa?? Quale suggerite??
2) ma se io volessi mettere questa galleria nella header???
3) in caso di responsive quelle gallerie full screen come si comportano??
grazie e ... chiedo venia per la mia ignoranza....
Ciao Giancarlo, peccato che usando l'iframe per wowslider blocca l'effetto parallasse se usato nella stessa pagina.
Nel browser interno di webX5 viene visualizzato correttamente l'effetto ma con il browser Chrome non va!
@D&m S.
non ho capito le domande 2 e 3?
http://provews.altervista.org/wowslider/
ne stanno parlando da oltre 100 Post...
Author
Ciao Vincenzo, in questo Template convivono insieme ... però forse ti riferisci ad un codice diverso:
http://giancarlob.altervista.org/company/
Si Giancarlo, mi riferisco a questo codice:
<style> #div_iframe {position:absolute;top:100px;width:100%; z-index:1} </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('imHeader').style.height=hiframe +"px";}window.onload = function () {h_iframeK();}window.onresize = function () {h_iframeK();} </script>
Author
ahh!! ok Vincenzo è il codice di KolAsim..
NON ricordo se ho fatto dei test di convivenza con quel codice e con il Parallax, appena riesco faccio una prova, e NON so nemmeno se Kol.. abbia fatto test a riguardo, anche perchè da quanto so non ha il programma per poter fare test..
Author
Ciao Vincenzo, ho fatto il test inserendo anche il Parallax e quest'ultimo, con quel codice iframe ha un comportamento anomalo, taglia la parte bassa e non completa l'effetto, a questo punto forse la soluzione migliore se si vuole utilizzare l'iframe, è quella utilizzata 3 post sopra per il Template company.
Ciao Giancarlo.
Ciao, mi accodo a questo post, esiste un modo per fare uno slideshow a pieno schermo con all'interno un baloon rettangolare con link e testo?
http://www.cineworldtrento.it/ come esempio
Thanks
Author
Ciao Matteo, mi sembra di ricordare che slideshow ha già questa funzione e cioè quella di creare delle scritte in un box rettancolare che scorrono alle quali puoi abbinare un link...
scusate ragazzi
dopo l'inserimento del fame e quindi dello slide come faccio ad inserire altre info sulla pagina al di sotto dello stesso?
Perche se no mi si accavalla tutto
in attesa di vostre
Author
Ciao Antonio, considerando che hai la v13 oggi forse la soluzione più semplice ed immadiata è quella di inserire tutto il codice di wowslider in un oggetto HTML l'oggetto per essere ad altezza automatica dovrai impostarlo a 0 (zero)
Poi babilmente essendo il primo oggetto della pagina sarà la Row1 quindi nella proprietà di pagina codice personalizzato basta inserire questo semplice codice MAeSI:
<style>
#imPageRow_1 div {
padding: 0;
width: 100%;
}
</style>
semplicissimo ed immediato.. tutto il resto ... copiare cartelle ecc lo trovi nel tutorial.
Ciao.
ok Tanks
un altra domanda , supponiamo di voler rendere l'oggetto social tipo facebook largo tutta la pagina , come posso farlo?
Ma questo WOW SLIDER è gratis o a pagamento??
Grazie.
Ciao.
Silvio
Author
Ciao Silvio, per siti personali lo puoi utilizzare gratis, per quelli commerciali è a pagamento !!
http://wowslider.com/it/