Codice i-frame per visionare galleria sotto il menù
Author: Linda R.
Visited 1592,
Followers 2,
Shared 0
Salve a tutti,
sto realizzando un nuovo sito, devo inserire una gallery full-screen, ho il seguente codice che ho utilizzato per wowslider:
<style> #div_iframe {position:absolute;top:0px;width:100%; z-index:1} </style>
<script>function h_iframeK(){
var ww =1920; // larghezza immagini;
var hh =945; // 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>
come faccio a modificarlo per far visualizzare la gallery che ho inserito in una pagina nascosta?
Posted on the
... quello è i metodo che avevo inventato tempo fa, che vedi > QUI
... per capire se possa andar bene col tuo layout, sarebbe meglio:
1) realizzare un sito semplice con pochi contenuti; con il menu in alto; con l'intestazione vuota, trasparente, ed alta 200 pixel;...con questa opzione: Orizzontale - Menu sopra l'Header;
2) realizzare lo slideshow con un servizio qualsiasi, wowslider, maximage2, jssor, vegas, eccetera;
3) pubblicare il sito e metti il link: www.nomesito/
4) pubblicare lo slideshow con FTP Filezilla e metti il link: www.nomesito/slideshow/
... nel caso fossi già in ordine, nella sezione ESPERTO | prima della chiusura di HEAD incolla:
<style> #div_iframe {position:absolute;top:0px;width:100%; z-index:1} body { margin:0px;}</style>
<script>function h_iframeK(){
var ww =1920; // larghezza immagini;
var hh =945; // 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>
... e nella sezione ESPERTO | dopo l'apertura del BODY incolla:
<div id="div_iframe"><iframe id="iframek" name="iframek" width="100%" height="200" src="percorso/tuoslideshow.html" scrolling="no" frameborder="no"></iframe> </div>
... al posto di percorso/tuoslideshow.html metti quello tuo reale, come nel mio esempio...
... se posti comunque il link sarebbe meglio...
.
Author
Questo è il link http://www.felicieconfetti.com/Simply_Amalfi/ l'ho appena caricato, ma credo ci sia qualche problema xkè non si vede.
... sarebbe stato meglio, e te lo consiglio, realizzare lo slideshow indipendente ed al di fuori di WebSiteX5 per poter funzionare correttamente e senza interferenze, direttamente come da istruzioni della fonte che hai usato...
1) - hai un errore nella pagina sello slideshow; un doppio BODY che crea problemi, non proprio importanti, ma meglio evitarlo; ... forse lo slideshow dovresti impostarlo in full screen se disponibile dalla relative istruzioni...
2) - nella dichiarazione dell'IFRAME ti si sono formati dei caratteri (=) al posto degli spazi vuoti, e poi l'URL che hai usato per richiamare lo slideshow è errato; ...la stringa completa e corretta da usare è questa:
<div id="div_iframe"><iframe id="iframek" name="iframek" width="100%" height="200" src="http://www.felicieconfetti.com/Simply_Amalfi/gallery.html"
scrolling="no" frameborder="no"></iframe> </div>
.
... quando avrai corretto, poi vedremo gli altri eventuali aggiustamenti da fare...
.
Author
Adesso funziona, grazie mille Kolasim
... OK ...
... volendo, al #div_iframe potresti dargli top:40px;
ciao
.
Author
Kolasim una curiosità, tu cosa intendi realizzare la slide fuori da website? Intendi come per wowslider? Puoi farmi capire per favore? Bisogna inserire un codice che richiama direttamente la slide nella home?
Author
A proposito ho utilizzato il codice qui di seguito per inseire una fascia trasparente sopra la gallery ma purtroppo sta volta non funziona a differenza ch con altre slide:
<style>
<div id="blu-navy"></div>
<style type="text/css">
#blu_navy{
position:absolute;
left:0;
top:0;
width:100%;
background: url('http://www.felicieconfetti.com/simply_amalfi/blu_navy.fw') repeat-x 0 0;
z-index:-1;
height:100px;
}
</style>
Author
Ok questo ho risolto, ho cambiato semplcemente lo z-index dell'iframe.
ciao Linda, se vuoi, metti anche questo, suggerito da Lemonsong, nel tag head:
<style>
#imMnMn.static-menu {
text-align: center;
}
</style>
cosi allo scroll della pagina, ti resta sempre centrato il menu....
hai 2 tag style di apertura e solo uno di chiusura...
... ciao, ieri ero uscito e ... ti rispondo adesso...
1) - per wowslider, >> questa pagina ...per me non è proprio adatta; ...sarebbe meglio sostituirla con quella propria di wowslider con impostazione full screen, (no full width), in modo che i rapporti proporzionali siano congrui; più flessibile ed aggiornabile rapidamente, ed in più , volendo, con un piccolo incremento di codice poterlo rendere più adatto ai "mobile" con una pagina ad hoc per questo; (oppure usare maximage2, jssor, ecc., sempre in pagine proprie)...
2) - bello l'effetto trasparenza che coinvolge le barra del menu, però ...!... (*) in questo caso dovresti ridurre l'altezza dell'HEADER (abbinato al div_custom) di 100 pixel, modificando il relativo rigo aggiungendo il valore 100 di differenza, così:
document.getElementById('imHeader').style.height=hiframe - 100 +"px";}
3) - sarebbe meglio fare le prove su un modello già RESPONSIVE...
(*) ... per capire vedi >> tuo clone_1 ...e >> tuo clone_2 ...
.
bye
.
Author
Ragazzi buonasera. Sono a buon punto con il sito. Che ve ne pare? http://www.felicieconfetti.com/Simply_Amalfi/index.html
QUalcuno sa dirmi se vede problemi e come inserire i font? Ho provati ad integrarli con website ma on-line non si vedono, qualcuno sa indicarmi un metodo alternativo per implementarli?
Author
Kolasim purtroppo non sono riuscita a vedere i link che mi hai postato prima che li eliminassi.
Author
Grazie Mirko, consiglio seguito :)
Ciao Linda, occhio che io sul mio monitor da 15" (1366px di larghezza) visualizzo una barra di scroll orizzontale sotto mentre sulla destra in alto una voce del menù finisce fuori dall'intestazione creando uno spazio bianco sulla destra. Vedi foto sotto...
ah vedo che non hai attivato il responsive...
Author
Si ancora non l'ho settato il responsive.
... comunque, vedo che il tuo LINK adesso è OK, in linea con quanto proposto, ed essendo l'HEADER con TOP zero, in linea di massima ha in comportamento regolare ...
... però..!... come ti avevo detto nel punto 3), ...per poter valutare correttamente devi provare in "responsive" ...altrimenti lo slideshow non si posiziona correttamente; ...te ne accorgi con lo scroll orizzontale che lo decentra avendo la larghezza della finestra e non quella del sito...
.
ciao
.
Author
Ciao Kolasim, appen il cliente mi da l'ok procedo anche con il responsive. Per quanto riguarda l'implementazione dei font tu hai qualche notizia a riguardo? Non so come fare a farlo visionare on-line. Caricare i file tramit website non è servito purtroppo.
attivare il responsive , significa mettere una spunta e dato che potrebbe modificare la visualizzazione ed inficiare il lavoro che stai facendo è una cosa da fare subito ...
Poi dovrai mettere a posto a tutte le risoluzione testata e piè di pagina... io quindi inizierei a guardare come viene col responsive...
Per i font:
http://help.websitex5.com/it/v13/pro/web_fonts_ht.htm?zoom_highlightsub=font
Se si tratta di Google Fonts ricordati che il Codice @Importottenuto da Google va inserito nell'apposita sezione senza i tag <style> e </style> che Google invece inserisce nel codice che tu prelevi per ogni font. Cancellali quei tag.
Author
Ragazzi buongiorno, se inserisco i font nella root del sito questi non sono visibili on-line?
Author
Salve a tutti, purtroppo attualmente ancora non sono riuscita a risolvere il problema della visualizzazione del sito http://www.simplyamalfi.com su i dispositivi mobili.
Avevo provato ad oscurare le sezioni sottostanti ma purtroppo non funziona. Potete aiutarmi?