Allineamento immagini

**alberigo** · 06-03-2010, 20:49

Ho l'esigenza che all'apertura di una pagina del sito che sto realizzando, vengano prelevate le immagini da una tabella del database e disposte sulla pagina in una o più file da quattro a seconda di quante sono le immagini sul db.
Ciò che sono in grado di fare è di caricare le immagini una sotto l'altra (attraverso una tabella, le immagini dinamiche e un ciclo do...loop) ma ovviamente, nel caso di trenta immagini, si avrebbe un'unica colonna lunghissima e poco pratica.
Sapreste suggerirmi la via per incolonnare le immagini su più righe e quindi più colonne?
Grazie di ogni suggerimento.

**lucalicc** · 07-03-2010, 01:06

quando scorri il recordset, metti un contatore ad esempio da 0 a 4
quando il contatore arriva a 4 mandi a capo e riporti il contatore a 0
in questo modo visualizzi cinque immagini per riga
esempio

ii=0
comincio il ciclo del recordset
mostro prima immagine del recordset
if ii=4 then
vado a capo o altra riga della tabella
ii=0
else
ii=ii+1
end if
chiudo il ciclo del recordset

luca

**alberigo** · 08-03-2010, 13:00

L'idea del contatore mia aveva sfiorato ma poi, visto che ogni foto era identificata da un contatore univoco, avevo fatto delle prove con il recuperare il valore del contatore di ogni foto ma mi sono inchidato di fronte al ritorno a capo, cioè andare alla riga successiva. Come posso fare per andare alla riga successiva?

**lucalicc** · 08-03-2010, 16:05

puoi usare un normale

oppure, se usi le tabelle per impaginare il risultato,
chiudi la tabella con </tr> e ne apri un'altra con il <tr>
Inoltre il contatore ii che ho indicato per segnare il ritorno
a capo, è un contatore che metti tu solo per questo scopo
e non c'entra niente con il recordset o con l'id delle foto.
luca

**alberigo** · 08-03-2010, 18:36

Quella di utilizzare l'id delle foto era solamente un'idea che mi era balenata in mente probabilmente dettata dalla mia scarsa conoscenza di asp. Che il contatore ii indicatomi da te non c'entrava nulla con la mia idea e che era a se stante con il ritorno a capo lo avevo capito.
Ad ogni modo questa sera proverò i tuoi suggerimenti.
Indipendentemente dall'esito ti ringrazio comunque per la tua disponibilità.

**Grambo** · 09-03-2010, 17:12

oppure usa i div

css per queste cose è molto comodo hehe

usando l'esempio che ti è stato fatto

codice:

<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	width:80px;
	height:80px;
	z-index:1;
}
-->
</style>
</head>

<body>
....
sinistra=0
alto=100
ii=0
comincio il ciclo del recordset

if ii=4 then
sinistra=0
alto=alto+100
ii=0
else
ii=ii+1
sinistra=sinistra+100
end if

%>
<div id="Layer1" style="top:<%=alto%>px; left:<%=sinistra%>px;">tua immagine</div>
<%


chiudo il ciclo del recordset

**alberigo** · 04-04-2010, 18:30

codice:

<%
sx=0
alto=0
ii=0
     do until rstElencoFoto.EOF
     if ii=4 then
	alto=alto+100
	ii=0
     else
	ii=ii+1
	sx=sx+100
    end if
%>

<div id="foto_portfolio" style="top:<%=alto%>px; left:<%=sx%>px;">">[img]<%=(rstElencoFoto.Fields.Item([/img]" /></div>

<%
   rstElencoFoto.MoveNext()
   Loop
%>

Questo è come ho adattato il tuo esempio alle mie necessità. Risultato: le immagini sono incolonnate verticalmente una per una, ovvero tante righe quante sono le foto.

Ho forse sbagliato nello scrivere il codice asp? Considerate che il tutto è al di fuori di ogni tabella e che, cliccando sull'immagine piccola, viene eseguito l'ingrandimento.

Grazie

**Grambo** · 06-04-2010, 00:34

azzera sx qua

do until rstElencoFoto.EOF
if ii=4 then
alto=alto+100
sx=0
ii=0
else

comunque mi sembra corretto il resto..in teoria come l'hai scritto te dovevano venire in orizzontale...non capisco perchè ti vengano incolonnate

**alberigo** · 07-04-2010, 10:13

Anche così non funziona. Tuttavia, ammetto assolutamente casualmente, con questo codice:

codice:

<%
   do until rstElencoFoto.EOF
%>
              
">[img]<%=(rstElencoFoto.Fields.Item([/img]" />
            
<%
   rstElencoFoto.MoveNext()
   Loop
%>

le immagini mi vengono allineate in orizzontale e, cosa più importante, quando arriva alla larghezza massima del div che le contiene, va a capo allineandole perfettamente. Non chiedetemi perchè però funziona. Pensando che potesse trattarsi di un caso ho visualizzato le pagine con più browser ma tutti mi danno lo stesso risultato. Secondo voi è giusto oppure è frutto del caso?

Grazie comunque a tutti coloro che mi hanno dato dei suggerimenti per risolvere il mio problema.

**Grambo** · 07-04-2010, 11:49

semplicemente il programma stampa tutte le immagini orizzontalmente e arrivato alla fine del div (come giusto che sia) va a capo e riparte a stampare immagini..ma se allunghi il div che le contiene lui proseguirà a stampare orizzontalmente

l'unica cosa che mi viene in mente per il codice precedente è di controllare che la larghezza del div che contiene le immagini sia largo abbastanza altrimenti va a capo e tu vedrai tutto in verticale

il resto mi sembra corretto

Discussione: Allineamento immagini

Strumenti discussione

Ricerca discussione

Visualizza

Allineamento immagini

Permessi di invio