WebSite X5Help Center

 
Linda R.
Linda R.
User

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

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
23 ANSWERS
 ‪ 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...

.



Read more
Posted on the from  ‪ 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...

.



Read more
Posted on the from  ‪ KolAsim ‪ ‪
Linda R.
Linda R.
User
Author

Adesso funziona, grazie mille Kolasim kiss

Read more
Posted on the from Linda R.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... OK ...

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

ciao

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Linda R.
Linda R.
User
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?

Read more
Posted on the from Linda R.
Linda R.
Linda R.
User
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>

Read more
Posted on the from Linda R.
Linda R.
Linda R.
User
Author

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

Read more
Posted on the from 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

Read more
Posted on the from 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...

Read more
Posted on the from 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

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Linda R.
Linda R.
User
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?

Read more
Posted on the from Linda R.
Linda R.
Linda R.
User
Author

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

Read more
Posted on the from Linda R.
Linda R.
Linda R.
User
Author

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....
Read more
Posted on the from 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...

Read more
Posted on the from Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

ah vedo che non hai attivato il responsive...

Read more
Posted on the from Giuseppe Guida
Linda R.
Linda R.
User
Author

Si ancora non l'ho settato il responsive.

Giuseppe Guida
ah vedo che non hai attivato il responsive...
Read more
Posted on the from 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

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Linda R.
Linda R.
User
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.

Read more
Posted on the from Linda R.
Claudio D.
Claudio D.
Moderator
Best User of the month 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

Read more
Posted on the from 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. 

Read more
Posted on the from Giuseppe Guida
Linda R.
Linda R.
User
Author

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

Read more
Posted on the from Linda R.
Linda R.
Linda R.
User
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?

Read more
Posted on the from Linda R.