WebSite X5Help Center

 
Linda R.
Linda R.
User

Codice i-frame per visionare galleria sotto il menù  it

Autor: Linda R.
Visitado 1591, Seguidores 2, Compartilhado 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?

Publicado em
23 RESPOSTAS
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... 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...

.



Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... 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...

.



Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Linda R.
Linda R.
User
Autor

Adesso funziona, grazie mille Kolasim kiss

Ler mais
Publicado em de Linda R.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... OK ...

... volendo, al #div_iframe potresti dargli top:40px;

ciao

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Linda R.
Linda R.
User
Autor

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?

Ler mais
Publicado em de Linda R.
Linda R.
Linda R.
User
Autor

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>

Ler mais
Publicado em de Linda R.
Linda R.
Linda R.
User
Autor

Ok questo ho risolto, ho cambiato semplcemente lo z-index dell'iframe.

Ler mais
Publicado em de Linda R.
Mirko Boschetti
Mirko Boschetti
Moderator

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....wink

Ler mais
Publicado em de Mirko Boschetti
Mirko Boschetti
Mirko Boschetti
Moderator
Linda R.
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>

hai 2 tag style di apertura e solo uno di chiusura...

Ler mais
Publicado em de Mirko Boschetti
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Linda R.
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?

... 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

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Linda R.
Linda R.
User
Autor

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?

Ler mais
Publicado em de Linda R.
Linda R.
Linda R.
User
Autor

Kolasim purtroppo non sono riuscita a vedere i link che mi hai postato prima che li eliminassi.

Ler mais
Publicado em de Linda R.
Linda R.
Linda R.
User
Autor

Grazie Mirko, consiglio seguito :)

Mirko Boschetti
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....
Ler mais
Publicado em de Linda R.
Giuseppe Guida
Giuseppe Guida
User

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...

Ler mais
Publicado em de Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

ah vedo che non hai attivato il responsive...

Ler mais
Publicado em de Giuseppe Guida
Linda R.
Linda R.
User
Autor

Si ancora non l'ho settato il responsive.

Giuseppe Guida
ah vedo che non hai attivato il responsive...
Ler mais
Publicado em de Linda R.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Linda R.
Kolasim purtroppo non sono riuscita a vedere i link che mi hai postato prima che li eliminassi.

... 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

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Linda R.
Linda R.
User
Autor

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.

Ler mais
Publicado em de Linda R.
Claudio D.
Claudio D.
Moderator
Usuário do mês IT

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

Ler mais
Publicado em de Claudio D.
Giuseppe Guida
Giuseppe Guida
User

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. 

Ler mais
Publicado em de Giuseppe Guida
Linda R.
Linda R.
User
Autor

Ragazzi buongiorno, se inserisco i font nella root del sito questi non sono visibili on-line?

Ler mais
Publicado em de Linda R.
Linda R.
Linda R.
User
Autor

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?

Ler mais
Publicado em de Linda R.