Autore Topic: Slideshow dimensionato in base alla risoluzione del monitor  (Letto 1254 volte)

roberto.paganelli

  • Nuovo arrivato
  • *
  • Post: 21
    • Progettazione e realizzazione siti web.
Salve,[/font]
in un sito in fase di costruzione (con WS X5 9), ho impostato una dimensione in orizzontale a 1.062 pixel. Nella pagina HOME - intestazione, ho realizzato uno SLIDESHOW fotografico con VISUAL LIGHTBOX.
Per motivi puramente estetici, vorrei che tale SLIDESHOW sia visibile a tutto schermo, per monitor con risoluzione a 1.920 pixel. Quindi ho fatto una "forzatura" dimensionando lo SLIDESHOW a 1.900 pixel in "Modifica Modello - Intestazione".
Ora il problema! La visualizzazione è perfetta su monitor con risoluzione a 1.920. Ovviamente nel caso in cui si accede al sito con un PC con risoluzione inferiore, compare la fastidiosa barra di scorrimento orizzontale.
C'è un sistema per fare in modo che la visualizzazione dello SLIDESHOW venga ottimizzata in base alla risoluzione del monitor?
Oppure un'idea, un suggerimento o un escamotage per ovviare il problema?
Per vedere il sito in questione: http://www.miralago-hotel.it/home
Attendo vs. risposte. Grazie a tutti!
Web Agency Roberto Paganelli
Fonte Nuova ( Roma )
Tel. 06 90084499

stesil

  • Anziani
  • Utente storico
  • *
  • Post: 1219
    • quellidelcucuzzolo
Re:Slideshow dimensionato in base alla risoluzione del monitor
« Risposta #1 il: 02 Marzo, 2013, 00:33:00 »
Due idee ... entrambe con l'uso di js ... magari nessuna delle due buona.

Ridimensionare lo slider posizionato in header come nel tuo esempio in funzione della larghezza del monitor si può fare. Con jquery rilevi la larghezza della finestra e attribuisci questo valore, sempre tramite js, al div che contiene lo slider. Ma, così facendo, le immagini si modificano anche in altezza, che, per una risoluzione minore di 1920px, diventa inferiore a 500px. E resta uno spazio vuoto nell'header sotto lo slider.

E si potrebbe pure impostare di conseguenza l'altezza dell'header, in modo che questo spazio venga annullato ... ma poi tutta la grafica di sfondo viene sfasata, e dovrebbe essere completamente rivista, vista la presenza di un header dinamico in altezza.

Un modo più semplice, ma non è detto sia ottimale da un punto di vista grafico, mi sembra quello di "tagliare" lo slider per la parte eccedente se le dimensioni del monitor superano la larghezza prevista per il sito (1062px), eliminando la barra di scroll orizzontale.
Sempre tramite un codice js: assegni ad una variabile la larghezza della finestra del browser, che rilevi con il metodo width di jquery. Se le dimensioni della finestra superano quelle assegnate per il sito (1062px) assegni al body la proprietà css overflow-x:hidden.