Galleria immagini 100%
Autore: Giovanni Bevilacqua
Visite 918,
Followers 1,
Condiviso 0
vorrei fare una galleria immagini a tutto schermo possibilmente cosi se si puo fare http://www.caministufe.it/
Altrimenti se e troppo difficile anche una cosa semplice ad esempio io avevo scaricato la template gratuita gusto di web site x5 ma non capisco dove andare per cambiare le immagini http://giancarlob.altervista.org/template.html
Se riuscite ad aiutarmi senza mandarmi questo tutorial http://giancafoto.altervista.org/wowslider-v13/ che ho provato e riprovato ma non va
Postato il
Ciao Giovanni, il tutorial è molto semplice funzionale .. forse ti sfugge qualche passaggio.. poi se hai scaricato ancge quel template ... anche quello è realizzato con il metodo spiegato su quel tutoria.
Cosa non capisci di preciso ?
Per le immagini .. devi crearti il progetto con wowslider e poi inserirlo sul template con il metodo descritto sul tutorial.
Autore
io ho il template ma non capisco come fare con wowslide
Autore
ho scaricato wowslide inserito le immagini ma poi per avere il codice non so cosa schiacciare nel programma e poi dove mettere il codice riccavato
Giovanni spiegati... cosa intendi come fare ? quale passaggio ?
oppure ... forse NON sai usare wowslider ?
Autore
Ok adesso tramite wow slide ho il codice head e body ma non capisco dove metterlo
ok provo a semplificarti (forse) le cose.
hai il codice head procedi con step 2 del tutorial quando hai fatto dimmelo.
Autore
Praticamente io ho i 3 file di wowslide sono andato sul passo 1 - Statistiche seo...-Esperto - in basso File allegato al codice devo aggiungere i 3 file uno alla volta con Agiungi.. giusto?
Autore
Tieni presente che io sto facendo direttamente questa cosa utiklizzando il file gusto
.. dimenticavo ... solo il codice di wowslider quello nel quadrato rosso, lascia perdere il resto del codice che vedi sopra... ripeto incolla solo quello di wowslider in propprietà di pagina ... prima della chiusura del tag Head
ahh!! umm ... ora purtroppo non ho ne il template ne il programma sotto... perche io volevo farti semplificare il tutto usando meno codice... quindi così c'è caso che dovrai cancellare del codice superfluo.. sarebbe stato meglio partire da zero.
Autore
Ok llora facciamo cosi partiamo da 0 che e mglio apro il template nuovo cosa faccio ora che codice inserisco
wow slide mi da questo
2
<!-- 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 -->
3
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><a href="http://wowslider.com"><img src="data1/images/shutterstock_4563895.jpg" alt="wow slider" title="" id="wows1_0"/></a></li>
<li><img src="data1/images/shutterstock_120527473.jpg" alt="shutterstock_120527473" title="shutterstock_120527473" id="wows1_1"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title=""><span><img src="data1/tooltips/shutterstock_4563895.jpg" alt=""/>1</span></a>
<a href="#" title="shutterstock_120527473"><span><img src="data1/tooltips/shutterstock_120527473.jpg" alt="shutterstock_120527473"/>2</span></a>
</div></div><div class="ws_script" style="position:absolute;left:-99%"><a href="http://wowslider.com/vi">cssslider</a> by WOWSlider.com v8.7</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
aspetta!! vuoi solo sostituire le immagini al template GUSTO ?
Autore
Si mi basterebbe cambiare le immagini
ok ripartiamo da questo!!
hai creto un progetto con wowslider di che dimensioni ?
Autore
1024 × 768pero io lo vorrei a tutto schermo quindi 1900 pixel
all'ura... devi creare il progetto con wowslider a 1920 px imposta le dimensioni personalizzate poi c'è la funzione larhezza schermo
Autore
fatto
2
<!-- 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 -->
3
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><a href="http://wowslider.com/vi"><img src="data1/images/shutterstock_4563895.jpg" alt="css slider" title="" id="wows1_0"/></a></li>
<li><img src="data1/images/shutterstock_120527473.jpg" alt="shutterstock_120527473" title="shutterstock_120527473" id="wows1_1"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title=""><span><img src="data1/tooltips/shutterstock_4563895.jpg" alt=""/>1</span></a>
<a href="#" title="shutterstock_120527473"><span><img src="data1/tooltips/shutterstock_120527473.jpg" alt="shutterstock_120527473"/>2</span></a>
</div></div><div class="ws_script" style="position:absolute;left:-99%"><a href="http://wowslider.com/vi">cssslider</a> by WOWSlider.com v8.7</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
Scusami se ti rompo l'anima ma mi servirebbe davvero perche faccio 2 lavori cosi in home uno potrebbe vedere le immagini di entrambi
grazie mille ancora
ok avrai esportato il progetto sul desktop o dove volevi tu..
ora.. prendi le cartelle create con wowslider
data1
engine1
e mettile dentro la cartella Preview del tuo progetto
sovrascrivi le vecchie
Autore
ok trovate ma dove e questa cartella preview
tu sai dove vendono salvati i tuoi progetti ?
lo puoi vedere in preferenze si website...
dovrebbe poi esserci la cartelle Gusto, e dentro quella.. c'è la cartelle Preview.
Poi dentro a Preview incolli le due cartelle
data1
engine1
quando hai fatto mi dai conferma.
Autore
per capire dove devo andare su preferenze ma dovè
Autore
ok lho trovata
C:\Users\Karlo\Documents\Incomedia\WebSite X5 v13 - Evolution\
Autore
fatto le ho messe
ti ha chiesto di sovrascrivere giusto ?
Autore
no si sono incollate e basta
allora le hai messe nel posto sbagliato
verifica bene
Autore
ok fatto ho rifatto il procedimento prima avevo sbagliato una cosa adesso mi ha chiesto di sostituire il file cosa faccio ora :)
e dentro alla cartella Preview ...
ora prendi il tuo codice e lo incolli e sostituisci come da step3 del tutorial
proprietà di pagina... dopo l'apertura del tag BODY.
Autore
si fatto
ok ora premi CTRL e clicca su Anteprima dovrebbe essere ok...
Autore
non va purtroppo :(
cosa vuol dire NON va ?
Autore
Praticamente quando vado a mettere il codice non ne trovo ubo simile ma uno da 2 righe
Autore
Praticamente quando vado a sostituire il codice non ne trovo uno simile da sostiture ma queste 4 righe
<div id="div_iframe">
<iframe src="wowslider.html" style="width:1970px;height:594px;max-width:100%;overflow:hidden;border:none;padding:0;margin:0 auto;display:block;" marginheight="0" marginwidth="0"></iframe>
</div>
ma perchè non me lo hai detto ?
quindi cosa hai fatto ?
Autore
Te per caso hai provato e ti funziona ?
Autore
lho sostituito ma non e cambiato nulla
quello è fatto con l'iframe cacchio ?
riparti con il progetto da zero... quello scaricato dal mio sito !!
Autore
adesso ho rimesso il codice quello che cera prima
praticamente mi manca da mettere il codice wowslide adesso sul file gusto dentro website x5
il tutorial corretto è questo NON quello che avevi postato:
http://giancafoto.altervista.org/wowslider-v13-iframe/
è più semplice prendi tutto quello generato da wowslider cartelle e file e lo copi e sovrascrivi nella cartelle Preview
Autore
oh finalmente funziona però mi viene fuori la scritta wow slide in basso come posso fare per toglierla è unaltra cosa praticamente l'immagine viene fuori giusta tutto schermo ma mi mette una barra verticale perche l'immagine e troppo alta cosa devo modificare per fare in modo che sparisca laltezza
allo step2 del tutorial per iframe vedi il codice con le dimensioni... se l'altezza delle immagini di wowslider è differente da quella presente nel codice la devi modificare e aggiornare.
La scritta wowslider per eliminarla in teoria dovresti comprare il software... se lo vuoi gratis.. la scritta resta.
Autore
Va tutto tranne che non capisco come cambiare l'altezza che e 600 px
Autore
*Passo 3 del programma web site x5:
------Prima della chiusura del tag head
<style>
#div_iframe {position:absolute;top:300px;width:100%; z-index:1}
#imContent{
top: 65px;
}
/* distanza contenuti pagina della HOME da Slide */
#imContent {margin-top: 150px;}
</style>
<!-- Menu per sito monopagina -->
<script src="files/jquery.singlePageNav.ws.js"></script>
<script>
$(document).ready(function () {
$('#imMnMn li').removeClass('imMnMnCurrent');
//singlePagNav - options
$("#imMnMn").singlePageNav({
offset: $('#imMnMn').outerHeight(),
threshold: 140
});
});
</script>
--------Dopo l'apertura del tag body
<div id="div_iframe">
<iframe src="wowslider.html" style="width:1970px;height:650px;max-width:100%;overflow:hidden;border:none;padding:0;margin:0 auto;display:block;" marginheight="0" marginwidth="0"></iframe>
</div>
<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>
però ora non ricordo se quel template ha l'iframe elatico forse NO !!! puoi mettere il link della tua prova ?
<div id="div_iframe"><iframe src="wowslider.html" style="width:1970px;height:594px;max-width:100%;overflow:hidden;border:none;padding:0;margin:0 auto;display:block;" marginheight="0" marginwidth="0"></iframe></div>
se non ricordo male (ora non ho il programma) dovrebbe avere l'iframe proposto da wowslider ...
l'altezza è quella in grassetto... fai una prova..
Autore
se vuoi ti do il mio acccount drop box poi li trovi il file
Autore
cosi fai prima insomma
Autore
Perche ho fatto ogni prova possibile però nessuno mi cambia l'altezza dellimmagine
.... metti un link con il test online
Autore
certo http://www.associazioneferdinando.it/
Autore
online non va su web site x5 si
devi esportare anche le due cartelle
data1
engine1
usa filezilla
Autore
ci sono mi da varie cartelle tipo style public menu ... in quale cartella devo mettere i 2 file
... prima di tutto devi far funzionare wowslider...
...!... questo link che hai usato non esiste: http://www.associazioneferdinando.it/wowslider.html
.
in nessuna cartella root dove c'è la index.html
metti anche wowslider.html
in preatica Giovanni devi esportare le stesse cartelle e file che hai messo sul progetto in Preview
Autore
fatto come vedi cwe la linea pero
Autore
kolAsim in che senso perche esiste il file si apre se cerchi il link
<iframe src="wowslider.html" style="width:1970px;height:594px;max-width:100%
prova a mettere il codice con la quota in grassetto a 770px poi vediamo.
in realtà volendo essere precisi nella cartella dove hai esportato wowslider trovi anche un file wowslider-howto.html
se editi quel file troverai il codice esatto con le dimensioni da mettere al posto di quello che c'è ora es:
<div id="div_iframe"><iframe src="wowslider.html" style="width:1970px;height:594px;max-width:100%;overflow:hidden;border:none;padding:0;margin:0 auto;display:block;" marginheight="0" marginwidth="0"></iframe></div>
... adesso sì, ... ma quando avevo postato il link era errore 404 ...!... ...pagina mancante ...
.
... x Giancarlo, ... se può esserti/esservi di aiuto, se si fa uso del mio codice, lo style nell'iframe non servirebbe, in quanto l'ho progettato per renderlo dinamico; ...nella pagina di Giovanni mancano gli ID dell'IFRAME...
... il codice originale si può rilevare da questo > esempio ...
... per sezione /HEAD copiare dal rigo 5 al rigo 17 ... ...del sorgente (Ctrl+U) ...
... per sezione /BODY copiare dal rigo 23 al rigo 24 ... ...del sorgente (Ctrl+U) ...
.
ciao
Grazie Kol.. siamo in una critalleria... visto che è un template già fatto volevo far fare a Giovanni... il minimo possibile
... e invece guarda che po..po di post ...
... sì, il tuo template andava già bene con l'iframe ed header ad altezza fissa, che era il primo che a suo tempo avevo proposto ed attuato grazie a Mirko ...e maximage, ma adatto a qualsiasi slideshow ...
.
Autore
wow perfetto kol molto piu semplice e meno codice ma cosa dovrei fare di preciso ce mi basta prendere il codice di wowslide praticamente gisto? e dove lo metto tutto questo grazie
<html xmlns="http://www.w3.org/1999/xhtml"><head><style> #div_iframe {position:absolute;top:0px;width:100%; z-index:1} body { margin:0px;} </style><script>function h_iframeK(){ var ww =9; // larghezza immagini; var hh =3; // 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+ 10 +"px";} window.onload = function () {h_iframeK();} window.onresize = function () {h_iframeK();} </script></head><body><div id="div_iframe"><iframe id="iframek" name="iframek" width="100%" height="200" src="maximage.html" scrolling="no" frameborder="no"></iframe></div><div id="imHeader" style="width:100%; height:300px;background-color:blue"></div><div id="corpo" style="width:100%; height:700px;background-color:yellow"> TESTA CORPO PAGINA</div><div id="intermedia" style="width:100%; height:500px;background-color:green"> ZONA INTERMEDIA</div><div id="fondo" style="width:100%; height:300px;background-color:blue"> FONDO PAGINA</div><br></body></html>
Autore
non capisco se metterlo prima dell'appertura del tag body oppure dopo
Autore
e da dove poi mi prende le immagini dovrò sempre fare la procedura incollando i 3 file e mettendo data1 engine 1?
... di quel codice devi usare le righe che avevo indicato; ...in pratica NON devi usare i TAG di pagina <HTML></HTML><HEAD></HEAD><BODY></BODY> che sono da eliminare...
... del resto, come da indicazioni corrette di Giancarlo:
A ... nella sezione ESPERTO | Codice personalizzato | Prima della chiusura di HEAD devi incollare questa parte:
<style> #div_iframe {position:absolute;top:0px;width:100%; z-index:1} body { margin:0px;} </style>
<script>function h_iframeK(){ var ww =9; // larghezza immagini; var hh =3; // 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+ 10 +"px";} window.onload = function () {h_iframeK();} window.onresize = function () {h_iframeK();} </script>
........................................
B ... nella sezione ESPERTO | Codice personalizzato | Dopo l'apertura di BODY devi incollare SOLO questa parte:
<div id="div_iframe"><iframe id="iframek" name="iframek" width="100%" height="200" src="http://www.associazioneferdinando.it/wowslider.html" scrolling="no" frameborder="no"></iframe></div>
.................................
...!... ti ho messo l'URL assoluto al tuo slideshow, così dovrebbe funzionarti anche in anteprima...!...
.
Autore
fatto mi mette praticamente il risultato sopra il titolo un macello :(
Autore
metto quello che mi e venuto fuori
www.associazioneferdinando.it
... mi sembra che non hai usato il layout dell'esempio di base del tutorial di Gianfranco, basato su questo layout del menu:
Orizzontale - Menu sopra l'Header
... con altri tipi di impostazione dovrai riprogrammarti il codice...
... non avendo io il programma per ora non posso metterci mano...
.
Autore
Mi sarebbe utilissimo avere quel opzione ma purtroppo non mi riesce proprio sono disperato non so piu che fare ormai
Giovanni, se fai quella semplice modifica che ti avevo chiesto nel post, dovresti avere risolto il problema dello spazio sopra.
Se invece vuoi ricominciare e cimentarti nell'iframe elastico, devi ripartire da un progetto pulito oppure fare modifiche sostanziali al Template che stai utilizzando. Per questo ti basta seguire attentamente il tutorial iframe.
Però vedendo le tue difficoltà, come consiglio personale.. io farei la via più breve.. vedi tu.