[Jquery] immagine in fade out

[stardom]

Ho bisogno di un piccolo aiuto, a metà fra Jquery e grafica.
All'apertura di http://www.nelpaesedelvino.com/ ci dovrebbe essere subito il logo dell'azienda, ma per un paio di secondi si vede il sito sottostante. Come posso evitare quest'ultimo inconveniente?

Grazie per l'attenzione

[m4rko80]

Essendo un po grande l'immagine, capita che si apra lentamente e si vede quello che sta sotto prima che abbia finito di caricare.

Prova a nascondere di default col css il resto della pagina, se non sbalgio id container, footer e layer(tutti i blocchi della pagina).

Sul click visualizzi questi e nascondi l'immagine.

[stardom]

l'immagine l'ho fatta grande solo perchè non sapevo come mettere il logo su uno sfondo nero che coprisse il sito.
Mi dici di "nascondere di default col css", ma non sono un grande esperto di css/html/java. Potresti indicarmi un paio di linee di codice, come intenderesti tu?

[m4rko80]

Allora diciamo che se volessi lasciare cosi' com'e':

nel css:

#container {display:none;}

e quando clicchi sul logo per nasconderlo aggiungi

$('#container').show();

cosi per gli altri elementi da nascondere (css/javascript).

Oppure potresti usare il classico plugin lightbox per far apperire l'overlayer che copre tutta la pagina.

Qui ci sono esempi ma ci sono piu' plugin che fanno questo.

[stardom]

dunque, evitiamo lightbox perchè dorvei andare a modificare troppe cose.. lasciando il sito com'è,

nel css ho aggiunto
#container {display: none; .....;}
#footer {display: none; ....;}

e nello script del fade out, ho aggiunto le ultime due righe relative al css

<div id="intro">[img]images/intropage.jpg[/img]</div>
<script> 
$("div#intro").click(function () { 
    $(this).fadeTo("slow", 0, function() {
        $(this).hide();
    });        
$('#container').show();
$('#footer').show();
});
</script>

La cosa sembra funzionare, ma il sito ci mette di più a caricare, e poi non riesco a coprire l'intero sito con l'immagine (in risoluzione 1280x1024, immagino sia dovuto alla grandezza dell'immagine). Invece di avere quest'imamgine, non esiste un modo per avere solo il logo in trasparenza su un background opacizzato a valore zero (cioè nero)?... non so se mi sono spiegato

Dimmi comunque se i codici sopra sono sbagliati. Grazie

[m4rko80]

Il codice e' correto, la scroll e' dovuta alla dimensione del monitor/risolizione.
Io la vedo col mio portatil per dire...

Se pero' metti al css per #intro anche widht:100% e height:100% l immagine si adatta allo schermo e va via la scroll bar.

Questo e' un coniglio che puoi provare... io non sono grafico e magai nel forum css sapranno aiutarti con consigli migliori

[m4rko80]

In alternativa per evitare uso stiramento dell immagine potresti mettere heght e widht del contenitore al 100% al posto dell'immagine e dargli bakcground-color:#000 (nero)
e l'immgine centrarla sempre da css con dimensione fissa.

[stardom]

ok, grazie di tutto. Il sistema del 100% non funziona, ma per ora va bene. Poi mi rivolgerò al forum css per migliorie.