Galleria immagini a tutto schermo con header in alto con sfondo opaco
Autor: Stefano B.
Besucht 2704,
Followers 2,
Geteilt 0
ho la versione 17 pro di website x5.
volevo creare una galleria a tutto schermo con in alto un header con sfondo semi trasparente in modo da poter vedere sotto l'header parte delle imamgini della galleria.
è possibile tutto questo? devo usare codice o applicazioni tipo wowslider?
grazie
Gepostet am
... dipende dal risultato che vorresti ottenere; ...con le opzini del programma:
1) ... l'altezza dell'intestazione, header, la azzeri o la minimalizzi quanto basta per contenere il menu;
2) ... nello Stile delle Righe per la prima riga della pagina puoi selezionare una di queste opzioni:
Immagine: lo sfondo della Riga viene creato attraverso l'importazione di un'immagine.
Elenco immagini: come sfondo della Riga viene impostato uno SlideShow in cui le immagini scorrono una dopo l'altra.
(!) Video: come sfondo della Riga viene utilizzato un video. (!) (da preferire nel caso youtube)
...
... se il sito fosse in momo-pagina, avresti già risolto, ...altrimenti fare la stessa operazione anche nelle altre pagine dove avere un simil header...
.
.
Autor
ho provato cosi ma:
- se nello stile delle righe imposto uno slideshow poi non è responsive e le immagini sono tagliate a livelli più bassi e non mi va bene.
sono riuscito ad inserire il menù nell'header e poi mettere a zero l'header stesso, ma in questo caso non riesco a mettere uno sfondo opaco per l'header esteso per tutta la lunghezza del browser e che sia "sopra" lo slideshow. ho provato anche inserendo una immagine con colore opaco nell'header ma poi non mi viene visualizzata a tutto schermo ma lascia degli spazi bianchi laterali.
esiste una opzione anche a livello di codice che mi permette di portare una gallery/slide show che metto nella prima riga della pagina dietro l'header?
comunque quello che vorrei è avere un header opaco (semitrapsarente) con dietro le immagine (parte alta delle immagini) della gallery visibili
Ciao, leggi qui, è il tuo stesso caso:
https://helpcenter.websitex5.com/de/post/202561
Questo l'esempio in un sito sul quale sto lavorando (sempre se ho capito bene cosa vuoi ottenere):
http://www.bozzasito001.altervista.org/agenziaeventi001/
Ciao
Autor
si è proprio quello che mi serve!
ho provato a cliccare ctrl+maiusc+l sul link che hai postato ma non ho poi ben capito quale è il codice che devo mettere per
"Le pochissime righe di codice servono per portare "sotto" l'header il primo oggetto (posizionato all'interno della pagina) contenente la lista di immagini scorrevoli"
riesci a mandarmi le righe che devo inserire ed anche in quale parte/sezione del programma websitre x5 devo metterle?
Grazie
... dipende da cosa intendi; ...il ridimensionamento dovrebbe avvenire secondo la filosofia dell'attributo CSS COVER (come il mio primo metodo, R/R|C/C|W/H), per alcuni difficile da interpretare, e schematizzato nel seguente STAMP ed in questo esempio...
... ovviamente considerando il fatto che l'altezza della riga è FISSA; ...con opportuni contenuti nella riga, si potrebbe ottenere un aspetto razionale proporzionato alle immagini con miei codici EXTRA, ...o con i metodi EXTRA proposti nei Tutorial di Giancarlo...
... ... comunque quello che vorrei è avere un header opaco (semitrasparente) con dietro le immagine (parte alta delle immagini) della gallery visibili
... questo dipende da come gestisci le opzioni per gli sfondi delle celle sovrastanti, e/o dalle impostazioni assegnate per lo sfondo del contenuto e/o del corpo della pagina, in semitrasparenza per vedere lo sfondo immagini della riga...
- - -
.
... ... riesci a mandarmi le righe che devo inserire ed anche in quale parte/sezione del programma websitre x5 devo metterle?
... ...
... dovresti postare il tuo LINK, ...comunque nell'esempio di Giuseppe il codice EXTRA relativo al sollevamento del contenuto lo trovi al rigo nr.104, questo:
#imContent { position: relative; top: -120px !important; }
.
Autor
a che livello del codice devo inserire questa riga:
#imContent { position: relative; top: -120px !important; }
grazie
... proprietà pagina | esperto | codice personalizzato | opzione: prima della chiusura del tag /head...
... all'interno del tag <style> se già presente, ...altrimenti lo incolli in questo modo:
<style> #imContent { position: relative; top: -120px !important; } </style>
... personalizza il valore -120 per quel che serve a te...
.
Autor
l ho messo dopo l'apertura del tab body è funziona, adesso vedo la galleria sotto l'header.
però se imposto uno sfondo per l'header questo sfondo non si vede. io vorrei che le immagini della galleria fossero DIETRO anche lo sfondo dell'header in modo che questo si possa vedere e sotto lo sfondo si possano vedere le immagini
Autor
come posso portare DAVANTI lo sfondo dell'header oppure in secondo piano la gallery?
... ma non è corretto; ... dovresti rileggere...
... poi, prova ad aggiungere l'istruzione che trovi al rigo 109 del precedente codice sorgente...
.
Ciao Stefano, spiego tutto qui di seguito così che possa essere di aiuto anche agli altri utenti...
se vuoi che le foto scorrevoli inizino da sotto l'Header con Header trasparente che lascia intravedere tali foto nella parte alta (foto naturalmente inserite in "Stile Righe/Sfondo/Elenco Immagini") e vuoi ottenere tutto questo solo in una determinata pagina del tuo sito, allora devi inserire il codice extra in "Proprietà pagina | esperto | codice personalizzato | opzione: prima della chiusura del tag HEAD", tutto il codice va tra il tag di apertura <style> e tag chiusura </style> .
Di seguito una spiegazione in parole molto semplici ed elementari di quel che ho fatto passo passo così che possa essere di aiuto anche ai meno esperti (alla fine dei vari punti c'è il riepilogo del codice completo da inserire. E' un mio metodo, sia chiaro, forse si può ottenere la stessa cosa seguendo altre strade):
1) al "PASSO 2/Modello/Struttura del Modello" devi innanzitutto impostare l'altezza del tuo Header per tutti i Breakpoint (io ho impostato, come da link pubblicato qualche post più sù, un valore di 120px per tutti i Breakpoint). Setta poi come TRASPARENTE il colore dell'Header. Puoi anche inserire in piccolo file immagine PNG con semitrasparenza assegnando "Disposizione: 4 -Ripeti in entrambe le direzioni" per dare un colore semitrasaprente al'Header.
2) devi inserire uno z-index elevato in #imHeader per portare l'Header "sopra" ogni altro elemento (io ho messo il valore 30000 ma proprio ad esagerare, basterebbe anche meno):
#imHeader {z-index: 30000 !important;}
3) per la personalizzazione che riguarda la possibilità di far iniziare il contenuto pagina dalla "parte alta" della finestra del browser, sotto l'Header, io ho messo -120px (valore negativo!!) perchè ho impostato, come detto all'inizio, un Header alto 120px nella Struttura del Modello. Se hai per esempio un Header alto 300px allora dovrai mettere come valore -300px e così via, quindi se l'header è alto X allora il valore nella stringa di codice seguente dovrà essere -X (negativo), ok?):
#imContent {
position: relative;
top: -120px !important;
}
Infine, con Ispeziona codice o con Ctrl+Maiusc+I, devi individuare l'esatto numero del tuo Oggetto Menù (nel mio caso è 02) e devi inserire uno z-index maggiore dello z-index inserito in precedenza per l'Header in modo tale che quando si apre il menù a tendina con le varie voci, facendo click sul menù hamburger, tale menù a tendina NON finisca sotto i contenuti dell'header (tipo logo e altro inseriti in Header):
#imHeader_imMenuObject_02-menu-opened.animated {
z-index: 50000 !important;
}
Il codice completo da inserire in "Proprietà pagina | esperto | codice personalizzato | opzione: prima della chiusura del tag HEAD" è il seguente:
<style>
#imHeader_imMenuObject_02-menu-opened.animated {z-index: 50000 !important;}
#imContent {
position: relative !important;
top: -120px !important;
}
#imHeader {z-index: 30000 !important;}
</style>
Un ultimo accorgimento riguarda i valori dei margini esterni (margine esterno alto) da assegnare ai primi oggetti che andrai ad inserire nel contenuto Pagina, in pratica nella griglia di lavoro di impaginazione di Website X5:
se vuoi che tali contenuti INIZINO subito sotto il bordo inferiore dell'Header, dovrai assegnare a tali oggetti un margine alto esterno che sia un po' più elevato del valore impostato per l'Header nella Struttura del Modello (questo perchè abbiamo inserito del codice personalizzato che "sposta" verso l'alto e sotto l'Header tutto il contenuto pagina). Quindi nel caso del mio esempio, avendo un header alto 120px, devi assegnare SOLO ai PRIMI OGGETTI nella Griglia di impaginazione andando in "Stile/Allineamento e Margine/Margine esterno/Alto" un valore più elevato di 120px: potrebbe andare bene 130px, 140px, a discrezione propria e a seconda di quanto spazio si voglia lasciare tra il bordo inferiore dell'header e i primo oggetti inseriti nella Pagina.
Credo sia tutto, spero di essere stato utile a tutti.
Ciao
Autor
grazie tutto chiaro tranne una cosa:
mettendo il seguente codice prima della chiusura tag head:
<style> #imContent { position: relative; z-index=-1; top: -300px !important; }
</style>
ottengo il risultato di portare l'immgine che inserisco come primo oggetto della pagina a livello alto dell'header. però cosi facendo mi rimane dello sapzio vuoto tra la fine della pagina e l'inizio del footer, esattamente i 300px che sono andato a "spostare" in alto. come posso fare per togliere questo spazio e fare iniziare il footer esattamente dopo la fine effettiva della pagina? vedi allegato (devo togliere lo spazio ROSSO)
... magari, se posti il LINK si potrebbe valutare...
.
Autor
http://stefanobellucci.altervista.org/nuovagradarina/index.html
se vedi alla fine c'è uno spazio bianco tra la fine dei contenuti che ho messo nella griglia di website x5 e il footer, questo xk ho alzato il contentuo della pagina
<style> #imContent { position: relative; z-index=-1; top: -300px !important; }
</style>
si può in qualche modo togliere quello spazio bianco?
grazie
... purtroppo non ho il programma! ...ma, ...ad occhio e croce, ... potresti risolvere sostituendo il codice con questo:
<style> #imContent { position: absolute; z-index=-1; top: -300px; !important;} </style>
...............................
... occhio! alle impostazioni responsive; ...noto dello scroll orizzontale per elementi forse! fuori layout...
.
Autor
Si ci sono elementi fuori layout devo ancora finire.
Ho messo absolute al posto di relative ma adesso vedo quello che ho messo nel footer poco sotto il menù e quando scrollo la pagina a metà mi torna su in alto.
Cosa sbaglio?
... in rete non ho visto applicata nessuna modifica al codice...!...
Autor
Vedi adesso ho messo online
praticamente mi sembra di aver capito che mi porta il footer alla fine del contenuto minimo della pagina che io ho impostato a 600 nel mio modello. Però ogni pagina alla fine a secondo delle righe che metto avrà una altezza diversa quindi così non va bene.
... ho visto, ma non posso ben valutare sul mio PC i lavori fatti con la v.17; ...invece sullo smartphone quando arrivo a fondo pagina salta subito ad inizio pagina...
... avendo tempo si potrebbe provare con qualcuna delle mie invenzioni tramite DIV_CUSTOM EXTRA, ma resta comunque il fatto che il mio PC non mi permette di valutare adeguatamente...
... quando e se avrò tempo, farò un tentativo, ... più in là...
.
Premesso che ho capito poco, cioè non ho capito cosa si vuole ottenere e con quali oggetti e che vedo alcuni errori nei CSS postati.
Comunque da quello che ho potuto capire, se si vuole spostare in alto il div con id imContentdovrebbe essere sufficiente questo CSS:
<style>
#imContent {
margin-top: -300px;
}
</style>
Si può ovviamente integrare con altre regole per aumentare/diminuire i layer di altri elementi etc... come già accennato.
Se non ho capito 'na mazza, come non detto, ma se cercate nei posti giusti sono cose già testate e dimostrate da anni.
Autor
ciao lemosong, mettendo il tuo codice
<style>
#imContent {
margin-top: -300px;
}
</style>
ho risolto il problema dello spazio finale tra il contenuto della pagina e il footer.
però ho il seguente problema: vorrei avere una immagine nell'header diversa per ogni pagina ed il menu alla fine della foto, io ho fatto questo:
- impostato altezza header a 1000 e messo in fondo il menu nella sezione impostazione modello
- creato oggetto immagine nella prima riga della pagina di altezza 1000
- inserito il tuo codice nella pagina
fin qui tutto ok funziona, ma se per esempio diminuisco o ingrandisco il browser la immagine si adatta come dovrebbe alle dimensioni del browser, mentre il menu resta sempre nella stessa posizione ad altezza 1000 andando quindi a sovrapporsi alle altre righe della pagina, mentre io vorrei si adattasse alle dimensioni della pagina restando sempre ANCORATO in fondo alla immagine.
come posso ottenere il risultato scritto sopra?
Grazie
Autor
Se ad ogni "giro" cambi le regole del gioco, famo notte.
Premetto che forse si potrebbe ottenere lo stesso risultato (se ho capito bene) usando meno codice e più programma, ma non ho voglia di scoprirlo.
Comunque, con JS/jQuery si potrebbe calcolare ed inserire in tre variabili, rispettivamente l'altezza del menu, dell'header e dell'immagine.
Con i valori ottenuti si sposta #imContent ed il menu (facendo una sottrazione: altezza immagine - altezza menu).
Si richiama la funzione al caricamento ed al resize.
Son le stesse cose applicate in molti altri esempi e test visti e rivisti che appartengono alla classica programmazione lato client. Probabilmente si può fare in altri dieci modi diversi.
Il risultato è più o meno questo: