Una griglia con immagini che si adatta alle dimensioni del browser
Martedì 27 Ottobre 2009 - 08:37
di Cesare Lamanna
L’effetto, se così si può definire, lo possiamo vedere in azione su Google Images. Ridimensionando la finestra del browser, il numero di immagini disposte su una riga della griglia si adatta automaticamente alla larghezza della finestra. Restringendo, quindi, non appena un’immagine non trova più posto nell’area visibile della finestra, scivola in basso. In pratica, fino a tre immagini per riga, non compare la barra di scrolling orizzontale.
Credo (e chiedo conferma) che una cosa simile si possa ottenere anche solo con i CSS, ma comunque ecco un breve tutorial che spiega come replicare il tutto sfruttando jQuery (demo).
Categoria: Scripting | Permalink
Commenti
1
primo!
:p
scherzo… buon girono a tutti…Credo (e chiedo conferma) che una cosa simile si possa ottenere anche solo con i CSS
ma scherzi?! hai voglia!!
l’unica difefrenza è che loro cancellano le immagini “vedove”…
se ne rimane una o due che non riempiono una riga non le visualizzano…
2
funzionalità di dubbia utilità.
Se proprio volete una buona struttura con layout fluido, usate questo:
http://www.sohtanaka.com/web-d.....ss-jquery/# - postato da Jan Tonellato - 27 Ottobre 2009 - 10:03
3
Io ho ottenuto quell’effetto con solo i CSS sul mio sito www.krakatoa.it, ed e’ online senza grossi cambiamenti ormai da 4-5 anni… :)
4
@ krataoa,
non c’entra.
L’effetto specifico del plug-in è di nascondere le immagini vedove, come giustamente scrive EsseZeta.# - postato da Jan Tonellato - 27 Ottobre 2009 - 10:24
5
Jan, hai leggermente storpiato il mio nick! :)
Comunque, scusate, non avevo cliccato il link alla demo e mi sa che non avevo capito bene il post di Cesare. Tutto chiaro ora… sorry! ;)
6
In realtà sono stato poco chiaro io, nel senso che è vero che l’immagine che si trova in fondo alla riga ’scivola’ su quella successiva quando si restringe la finestra, ma la cosa più notevole è che il layout rimane sempre integro, ovvero ogni riga è sempre ‘piena’. C’è da dire che per certe situazioni una demo vale più di mille parole contorte :)
# - postato da Cesare Lamanna - 27 Ottobre 2009 - 14:26
7
Non solo toglie le vedove ma aggiunge nel caso manchino.
Facendo il resize da tutto schermo a una finestra più piccola google image è passato:
- da 18 immagini su 3 righe da 6
- a 20 immagini su 5 righe da 4aggiungendo quindi due immagini prelevate dalla ipotetica pagina successiva e modificando tutti i link di paginazione.
bello! :)