Unofficial WebSite X5
Area JS => Richieste Integrazioni => Topic aperto da: Miss. Lin - 01 Marzo, 2013, 12:30:28
-
Salve a tutti,
premetto che solitamente dopo vari smanettamenti riesco ad implementare quasi sempre i vari plugin. Oggi mi sto dilettanto e scervellando ad implementare questo plugin http://www.jasperrooswinkel.com/smooth-fullscreen-background-slideshow-in-jquery/
avrei voluto allegarvi il file già sistemato, ma non vedo + l'icona per allegarlo.
Vi ringrazio anticipatamente.
-
avrei voluto allegarvi il file già sistemato, ma non vedo + l'icona per allegarlo.
Facci sapere se hai questa "opzione":
[attachimg=1]
Comunque basterebbe, credo, un link per vedere cosa hai combinato/fatto.
-
Sono cieca come una talpa!!! Sorry, la cercavo in alto tra le icone!!!
-
Vi allego il file .IWZIP.
Allo stato attuale ci sono dei problemi di visualizzazione, infatti il background si sovrappone alla struttura del sito, in oltre devo inserire i collegamenti delle immagini non tramite url.
-
ragazzi ho apportato un'altra modifica, ho inserito tutto il codice nella sezione Head di esperto, ed adesso solo il retino si sovrappone alla struttura del sito...
-
credo che basti modificare il css in sezione esperto al passo 1 gli z-index
/* Display on top of slideshow */
z-index:-1000;
position:relative; /* This is very important! */
}
img#bg {
/* Stretch background */
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
z-index:-1000;
}
#bg_grid {
position:fixed; /* This is very important! */
top:0;
left:0;
height:100%;
width:100%;
background: none;
z-index:-2000;
però ho dovuto togliere anche il bg.png che comunque si sovrapponeva. A me così funziona.
ciao
sk
-
Vi allego il progetto modificato, per adesso modificando gli Z-Index da 2 a 0 lo sfondo retinato non si sovrappone più. Bene direi che per adesso, siamo messi bene. Adesso proverò ad inserire io delle immagini e dopo a sovrapporre una fascia fissa. Speriamo bene. Vi aggiorno quanto prima.
N.B.
Skeggia grazie per il supporto :).
-
ok, era solo una questione di z-index, però ora con la nuova versione ti sparisce la dicitura delle immagini.
ciao
-
se cambi in 2 lo z-index di image description tutto funziona.
-
se cambi in 2 lo z-index di image description tutto funziona.
Infatti, ho lasciato invariato l'ultimo z-index e adesso va bene.
-
Sto provando ad inserire delle immagini diverse, ma mi crea un pò di problemi. Il codice che sto modificando è il seguente
aImages[0] = "<img src="images/1.jpg" width="1920" height="1200">";
aImages[1] = "http://canvasinabox.com/preview/7/48/48-7-preview_large.jpg";
aImages[2] = "http://canvasinabox.com/preview/7/46/46-7-preview_large.jpg";
aImages[3] = "http://canvasinabox.com/preview/18/133/133-18-preview_large.jpg";
Nel codice originale il collegamento avviene tramite url on-line, io invece desidero collegarli tramite file inserito direttamente nella root del sito, ma il mio codice è errato inoltre se riesco ad inserire l'immagine, questa non si ridimensiona uniformemente alla grandezza del sito.
-
se ho capito bene, nella prima riga tu inserisci <img src.... ma secondo me basta images/nomeimg.jpg ..... senza img src e poi alleghi le immagini, giusto?
-
se non va, carica prima le foto sul dominio e ci metti l'url anche tu
-
se ho capito bene, nella prima riga tu inserisci <img src.... ma secondo me basta images/nomeimg.jpg ..... senza img src e poi alleghi le immagini, giusto?
In pratica se inserisco un collegamento normale di immagine, questa non si ridimensiona automaticamente in base alla grandezza della finestra browser.
-
allora, ho provato, se carichi le foto su server e metti l'url relativo, tutto funziona, anche ridimensionate.
dai che ci 6 . . .
-
allora, ho provato, se carichi le foto su server e metti l'url relativo, tutto funziona, anche ridimensionate.
dai che ci 6 . . .
Ok, ok ci sto provando :)
-
ragazzi perfetto, anche il passo 2 è ok.
Adesso non resta che portare a termine il passo 3, ovvero inserire sovrapposto al background di sfondo una fascia fissa in altezza che non si ridimensiona, ma che può ripetersi in larghezza.
Il codice che mi hanno suggerito di inserire è il seguente (non l'ho ancora testato, ma so che l'immagine in larghezza non si ripete:
<img style="border:none;position:fixed;top:0px;right:0px;z-index:10000;" title="" alt="" src="files/cattura.PNG"/>
<style type="text/css">
#imMnMn {position:fixed ; left: 50%; margin:0 0 0 -480px; }
</style>
N.B.
In pratica con la fascia sovrapposta, cerco di ricreare l'effetto di ripetizione che normalmenete in WS otterremmo inserendo l'immagine all'interno dello sfondo, ma in questo caso dovrà sovrapporsi al background. Spero di essere stata comprensibile.
-
ragazzi ed ecco qua il risultato: http://www.doublelldesignz.altervista.org/
-
Skeggia ti ringrazio per il tuo aiuto, sei stata davvero gentile ^__^
ragazzi ma non notate un difetto con lo scroll? Perchè il logo si alza? C'è un modo per fissarlo?
A proposito, qualcuno mi sa aiutare ad implementare un jcarousel fatto allo stesso modo di questo sito? http://www.weddingbag.it/#!negozio-on-line/c1my
Grazie
-
Ciao Miss, grazie per i ringraziamenti, per quel poco che so . . .
Volevo solo precisare, per la precisione, di non essere una Lei, ma di essere un attempato ato ato ato maschietto, anche se il nick potrebbe trarre in inganno, proveniente dalla mascotte della mia squadra del cuore, comunque ottimo lavoro miss . . . per il logo che si alza, in modo diverso da home a pag 1-2-3, potresti provare a mettere fixed nel div #imHeader, ma potrei errare, qui ci sono fior fior di campioni che ti potranno aiutare meglio di me. Good week-end.
sk
-
Io vedo uno scroll della pagina esagerato... ???
-
Il codice HTML è stato inserito nella sezione <HEAD>. Prima di tutto correggerei questo errore.
-
Concordo con essedi. Inserire un div nella sezione head, per quanto il browser possa più o meno visualizzare l'effetto desiderato, non è una buona soluzione.
Prova ad inserire il codice della slideshow fullscreen (da <!-- The container for the description --> ) in codice per attivazione delle statistiche, lasciando in head solo le regole di stile e lo script.
Per la fascia verticale, invece di inserire un'immagine, puoi inserire un div che ha questa immagine come sfondo. In questo modo la puoi tagliare e ripetere in orizzontale.
Ora hai nella pagina:
<img style="border:none;position:fixed;top:0px;right:0px;z-index:0;" title="" alt="" src="images/fascia2.png"/>
e dovrebbe diventare, sempre in codice per attivazione delle statistiche:
<div id="fascia2"></div>
poi, assegni a questo div la posizione (io metterei position:absolute non fixed) e l'immagine fascia2.png, ridimensionata a dovere, come sfondo.
Un codice di questo tipo:
Only registered users can see contents. Please click here to Register or Login.
Eventualmente correggi i valori di z-index ... non dovrebbe più esserci lo scroll dell'header.
-
Concordo con essedi. Inserire un div nella sezione head, per quanto il browser possa più o meno visualizzare l'effetto desiderato, non è una buona soluzione.
Prova ad inserire il codice della slideshow fullscreen (da <!-- The container for the description --> ) in codice per attivazione delle statistiche, lasciando in head solo le regole di stile e lo script.
Per la fascia verticale, invece di inserire un'immagine, puoi inserire un div che ha questa immagine come sfondo. In questo modo la puoi tagliare e ripetere in orizzontale.
Ora hai nella pagina:
<img style="border:none;position:fixed;top:0px;right:0px;z-index:0;" title="" alt="" src="images/fascia2.png"/>
e dovrebbe diventare, sempre in codice per attivazione delle statistiche:
<div id="fascia2"><>
poi, assegni a questo div la posizione (io metterei position:absolute non fixed) e l'immagine fascia2.png, ridimensionata a dovere, come sfondo.
Un codice di questo tipo:
Only registered users can see contents. Please click here to Register or Login.
Eventualmente correggi i valori di z-index ... non dovrebbe più esserci lo scroll dell'header.
Dunque, allo stato attuale ho apportato delle modifiche, ovvero ho inserito nella sezione "Codice per attivazione delle statistiche" il seguente codice:
<!-- The container for the description -->
<div id="image_description">
<span id="image_artist"></span><br/>
<a id="image_url"></a>
<>
<!-- The container for the background-image -->
<img id="bg" style="display:none" />
<!-- The container for the grid on top of the background-image -->
<div id="bg_grid">
<>
<img style="border:none;position:absolute;top:0px;right:0px;z-index:0;" title="" alt="" src="images/fascia2.png"/>
<style type="text/css">
#imMnMn {position:fixed ; left: 50%; margin:0 0 0 -480px; }
</style>
Ovviamente adesso ho dei problemi di sovrapposizioni. Lo sfondo si sovrappone al JCarousel posto in basso ed il banner si sovrappone al logo.
-
Prova a sistemare i valori di z-index:
img#bg: z-index:-2;
#bg_grid: z-index:-1; (puoi anche inserire l'immagine di sfondo grid.png ... non dovrebbe sovrapporsi)
E, te lo riscrivo, prova a sostituire il codice dell'immagine della fascia con il div:
Ora hai nella pagina:
<img style="border:none;position:fixed;top:0px;right:0px;z-index:0;" title="" alt="" src="images/fascia2.png"/>
e dovrebbe diventare, sempre in codice per attivazione delle statistiche:
<div id="fascia2"></div>
poi, assegni a questo div la posizione (io metterei position:absolute non fixed) e l'immagine fascia2.png, ridimensionata a dovere, come sfondo.
Un codice di questo tipo:
Only registered users can see contents. Please click here to Register or Login.
-
Ta Dan!!! http://www.doublelldesignz.altervista.org/
Grazie a tutti di vero cuore per l'aiuto!!! ^___^ beh speriamo che il resto del lavoro proceda bene!!!
-
Ciao Miss, grazie per i ringraziamenti, per quel poco che so . . .
Volevo solo precisare, per la precisione, di non essere una Lei, ma di essere un attempato ato ato ato maschietto, anche se il nick potrebbe trarre in inganno, proveniente dalla mascotte della mia squadra del cuore, comunque ottimo lavoro miss . . . per il logo che si alza, in modo diverso da home a pag 1-2-3, potresti provare a mettere fixed nel div #imHeader, ma potrei errare, qui ci sono fior fior di campioni che ti potranno aiutare meglio di me. Good week-end.
sk
Ciao Skeggia, scusami mi sono lasciata fuorviare dal nome per via di associazioni stereotipate ^__^ Per il resto diciamo che sto modificando il sito ... Cmq grazie per l'aiuto.