Galleria immagini 100%
Autor: Giovanni Bevilacqua
Visitado 923,
Followers 1,
Compartido 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
Publicado en
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.
Autor
io ho il template ma non capisco come fare con wowslide
Autor
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 ?
Autor
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.
Autor
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?
Autor
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.
Autor
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 ?
Autor
Si mi basterebbe cambiare le immagini
ok ripartiamo da questo!!
hai creto un progetto con wowslider di che dimensioni ?
Autor
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
Autor
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
Autor
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.
Autor
per capire dove devo andare su preferenze ma dovè
Autor
ok lho trovata
C:\Users\Karlo\Documents\Incomedia\WebSite X5 v13 - Evolution\
Autor
fatto le ho messe
ti ha chiesto di sovrascrivere giusto ?
Autor
no si sono incollate e basta
allora le hai messe nel posto sbagliato
verifica bene
Autor
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.
Autor
si fatto
ok ora premi CTRL e clicca su Anteprima dovrebbe essere ok...
Autor
non va purtroppo :(
cosa vuol dire NON va ?
Autor
Praticamente quando vado a mettere il codice non ne trovo ubo simile ma uno da 2 righe
Autor
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 ?
Autor
Te per caso hai provato e ti funziona ?
Autor
lho sostituito ma non e cambiato nulla
quello è fatto con l'iframe cacchio ?
riparti con il progetto da zero... quello scaricato dal mio sito !!
Autor
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
Autor
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.
Autor
Va tutto tranne che non capisco come cambiare l'altezza che e 600 px
Autor
*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..
Autor
se vuoi ti do il mio acccount drop box poi li trovi il file
Autor
cosi fai prima insomma
Autor
Perche ho fatto ogni prova possibile però nessuno mi cambia l'altezza dellimmagine
.... metti un link con il test online
Autor
certo http://www.associazioneferdinando.it/
Autor
online non va su web site x5 si
devi esportare anche le due cartelle
data1
engine1
usa filezilla
Autor
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
Autor
fatto come vedi cwe la linea pero
Autor
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 ...
.
Autor
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>
Autor
non capisco se metterlo prima dell'appertura del tag body oppure dopo
Autor
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...!...
.
Autor
fatto mi mette praticamente il risultato sopra il titolo un macello :(
Autor
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...
.
Autor
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.