« precedente successivo »
Pagine: « 1 2   Vai giù

Autore Topic: Smooth slideshow sfondo a schermo intero in jQuery  (Letto 11701 volte)

Miss. Lin

  • Utente inesperto
  • **
  • Post: 189
Re:Smooth slideshow sfondo a schermo intero in jQuery
« Risposta #15 il: 01 Marzo, 2013, 16:30:16 »
Citazione da: skeggia - 01 Marzo, 2013, 16:29:11
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 :)
Connesso

Miss. Lin

  • Utente inesperto
  • **
  • Post: 189
Re:Smooth slideshow sfondo a schermo intero in jQuery
« Risposta #16 il: 01 Marzo, 2013, 16:46:26 »
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.
Connesso

Miss. Lin

  • Utente inesperto
  • **
  • Post: 189
Re:Smooth slideshow sfondo a schermo intero in jQuery
« Risposta #17 il: 01 Marzo, 2013, 18:01:34 »
ragazzi ed ecco qua il risultato: http://www.doublelldesignz.altervista.org/
Connesso

Miss. Lin

  • Utente inesperto
  • **
  • Post: 189
Re:Smooth slideshow sfondo a schermo intero in jQuery
« Risposta #18 il: 01 Marzo, 2013, 18:57:17 »
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
Connesso

skeggia

  • Utente inesperto
  • **
  • Post: 248
  • utente inesperto
    • Il sito del mio cucciolone
Re:Smooth slideshow sfondo a schermo intero in jQuery
« Risposta #19 il: 02 Marzo, 2013, 10:01:25 »
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
« Ultima modifica: 02 Marzo, 2013, 10:04:08 da skeggia »
Connesso

GDR

  • Moderatore globale
  • Utente anziano
  • *****
  • Post: 576
Re:Smooth slideshow sfondo a schermo intero in jQuery
« Risposta #20 il: 02 Marzo, 2013, 15:57:14 »
Io vedo uno scroll della pagina esagerato... ???
Connesso

essedi

  • Anziani
  • Utente esperto
  • *
  • Post: 418
Re:Smooth slideshow sfondo a schermo intero in jQuery
« Risposta #21 il: 02 Marzo, 2013, 18:21:25 »
Il codice HTML è stato inserito nella sezione <HEAD>. Prima di tutto correggerei questo errore.
Connesso

stesil

  • Anziani
  • Utente storico
  • *
  • Post: 1219
    • quellidelcucuzzolo
Re:Smooth slideshow sfondo a schermo intero in jQuery
« Risposta #22 il: 04 Marzo, 2013, 17:55:45 »
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:
Codice:
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.
Connesso

Miss. Lin

  • Utente inesperto
  • **
  • Post: 189
Re:Smooth slideshow sfondo a schermo intero in jQuery
« Risposta #23 il: 04 Marzo, 2013, 18:27:32 »
Citazione da: stesil - 04 Marzo, 2013, 17:55:45
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:
Codice:
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.
Connesso

stesil

  • Anziani
  • Utente storico
  • *
  • Post: 1219
    • quellidelcucuzzolo
Re:Smooth slideshow sfondo a schermo intero in jQuery
« Risposta #24 il: 04 Marzo, 2013, 18:40:21 »
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:
Citazione da: stesil - 04 Marzo, 2013, 17:55:45

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:
Codice:
Only registered users can see contents. Please click here to Register or Login.
Connesso

Miss. Lin

  • Utente inesperto
  • **
  • Post: 189
Re:Smooth slideshow sfondo a schermo intero in jQuery
« Risposta #25 il: 04 Marzo, 2013, 18:48:40 »
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!!!
« Ultima modifica: 04 Marzo, 2013, 19:19:58 da Miss. Lin »
Connesso

Miss. Lin

  • Utente inesperto
  • **
  • Post: 189
Re:Smooth slideshow sfondo a schermo intero in jQuery
« Risposta #26 il: 04 Marzo, 2013, 18:50:53 »
Citazione da: skeggia - 02 Marzo, 2013, 10:01:25
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.
Connesso
Pagine: « 1 2   Vai su
« precedente successivo »