Image flow? Float, clear, vertical align

[happyandrea]

Ciao a tutto il forum, questo è il mio primo messaggio

Sono un progettista grafico che si occupa anche di web, molto orientato però al fattore design dei siti internet, e con lacune nel development Cerco di realizzare siti semplici, senza strafare con il codice e con attenzione alla grafica :P

Sto progettando un sito internet "vetrina" dove ho bisogno di mostrare molte immagini. Ho un piccolo dilemma che ora proverò a spiegarvi:

Il sistema di gallery che ho pensato prevede che ci siano una serie di immagini della stessa dimensione una in fila all'altra, di seguito, all'interno di un div. Una volta che le immagini riempiono la larghezza del div vanno a capo e iniziano un'altra riga. Questo il codice che ho:

<div id="work_1">
[img]images/book_s.jpg[/img][img]images/333.jpg[/img][img]images/676.jpg[/img][img]images/684.jpg[/img][img]images/1454.jpg[/img]
</div>

Le funzioni in onclick servono per fare in modo che al click su un'immagine questa si ingrandisca. Praticamente si sostituisce ad un'altra immagine pìù grande.
Questo è il css che ho abbinato al tag img:

img {
	padding-right:8px;
	padding-bottom:8px;
	vertical-align:top;
	float:none;
	clear:none;
}

Il Problema che mi si pone è questo:
Quando clicco su una delle immagini, ingrandendola e quindi occupando più spazio nella riga, le foto che sono sulla destra vanno a capo, iniziando una nuova riga di immagini.
La nuova riga di immagini inizia però SOTTO l'immagine più grande, creando dello spazio bianco sulla DESTRA e SINISTRA dell'immagine (dove ci sono ancora le miniature).

Provando a impostare il float:left, le immagini che vanno a capo riempiono lo spazio a DESTRA dell'immagine (a seconda di cosa si è impostato nel vertical align). Mentre a SINISTRA lo spazio rimane bianco.

Viceversa se si imposta il float:right.

Quello che mi piacerebbe fare è che andando a capo le immagini riempissero tutto lo spazio bianco, sia a DESTRA che a SINISTRA dell'immagine ingrandita.

Qualcuno ha idea di come creare una cosa del genere? Oppure come sto già di mio pensando è impossibile?

Spero di non aver fatto troppo casino nello spiegare

[Mich_]

Fondamentalmente le "gallerie lato client" sono di due tipi:
- realizzate solo in HTML+CSS
- realizzate usando anche JS
naturlamente ci sono anche gallerie che fanno uso di AJAX e/o altre strutture lato server, ma mi pare che non siano da prendere in considerazione.

Quello che stai facendo, a guardare il tuo codice, mi pare che sia un ibrido tra le due. Non che sia impossibile, ne` che sia una cosa con risultato brutto a priori, ma la cosa non e` standard.

A questo punto io ti consiglierei di farti un giro a vedere cosa trovi in giro. Alcuni riferimenti sono anche tra i "link utili" del forum, altri li trovi sicuramente in rete.

Tieni presente che dal momento che usi JS, si puo` fare tutto quello che vuoi (il JS e` un linguaggio di scripting, che permette di far uso di "intelligenza"): a quel punto non vedo perche` non usare a fondo tale intelligenza.
E tieni anche presente che una galleria si puo` realizzare senza l'uso di JS: non si puo` far uso di intelligenza, ma si riesce a fare una cosa molto piu` leggera, che funziona in tutti i browser e che non ha problemi di accessibilita`.

[happyandrea]

Grazie Mich

Il tuo ragionamento purtroppo lo percepisco in parte, non ho conoscenza cosi evoluta da immaginarmi una gallery fatta solo in JS Nella gallery che sto provando a fare, ho preso ispirazione da questo sito:

link

Qui al click l'immagine diventa grande. Le immagini passano nella riga sotto però non riempiono gli spazi a destra e a sinistra dell'immagine. Ho guardato il codice (Un pò caotico) e mi sembra realizzato in maniera ibrida... secondo la tua definizione.

[Mich_]

"Solo in JS" non e` realizzabile, ma una galleria in cui JS e` preponderante si`; comunque se si usa JS si puo` anche risitemare il posizionamento degli altri oggetti: non e difficile, solo un po' piu` complesso.
Occorre premettere che io parto sempre dall'idea che se una cosa si puo` realizzare senza JS, e` meglio farlo senza (non per niente frequento questo forum e non JS, ma un tempo - prima di conoscere i CSS, quando non erano ben supportati dai brwoser - frequentavo molto il forum JS).
E mi spiego meglio: Una volta che usi JS, tanto vale fare tutto in JS, compreso il riposizionamento degli altri oggetti.
Comunque se questa e` la strada che vuoi percorrere, ti spostiamo nel forum JS.

In alternativa prova a valutare se ti puo` andar bene una galleria realizzata in "solo CSS", quindi senza apporto di JS: in quel caso non si puo` usare l'evento click, ma si deve utilizzare solo l'evento mouseover (che in CSS si realizza mediante la pseudoclasse :hover).
Quello che sto dicendo e` che ci sono altre gallerie, che forse puoi prendere in considerazione.

Mi pare di capire che modifiche pesanti di un JS o di un CSS non sono alla tua portata attuale: prova allora a vedere se trovi qualcosa di diverso che si avvicina meglio alle tue aspettative.

[happyandrea]

Ho capito meglio

Non posso usare solo css perchè ho bisogno dell'evento onclick per forza. Ho scritto questo post nella sezione css perchè pensavo che l'allineamento degli elementi che avevo in mente fosse solo un problema di fogli di stile.

Se invece la cosa che cerco di realizzare è fattibile solo con java allora è meglio spostare il post?

Grazie mille

[Mich_]

Attenzione che java non c'entra. Io non ho mai parlato di java, che un linguaggio molto diverso da javascript (JS). Java si usa lato server (JSP) e si usa nelle applet.

Per fare quello che vuoi (cioe` quello che io ho capito da quanto hai scritto) non puo` bastare il CSS, perche` tu vuoi anche modificare la successione e sistemazione delle immagini.

Se invece ti basta aprire un'immagine piu` grande sopra le altre (che vengono quindi in parte o in toto nascoste), allora si puo` fare tramite CSS da solo (indipendentemente se poi hai necessita` di JS per rispondere all'evento click).

Comunque sposto in JS; cosi` ricevi risposte anche da fonti diverse.

[happyandrea]

Si scusa... intendevo JavaScript

Hmm.. in realtà non è la successione di immagini il mio problema, ma riuscire ad impostare un float a destra e a sinistra di un'immagine più grande rispetto ad altre più piccole.