Inserire 4 immagini per riga

Printable View

16-01-2012, 00.17.07
raimaker

Inserire 4 immagini per riga

Saluti a tutti,
ho bisogno di un Vs. aiuto,
devo estrarre le immagini da un database e fin qui tutto ok,
sto utilizzando questo codice

Codice PHP:

while ($number > $i) { $immagine = mysql_result($result,$i,"immagine"); // impostzioni tabella risultati echo "<img src=\"{$immagine}\" alt=\"\" width='240' height='160'/> " ."<br><br>"; $i++; }}

le immagini vengono visualizzate in colonna uno sotto l' altra , adesso
la mia domanda è questa come modificare l 'impaginazione al fine di inserire 4 0 5 immagini per riga ?
16-01-2012, 01.11.37

PHP 4 Records per line.

:wink:
16-01-2012, 01.59.27
alemoppo

Invece di usare le tabelle, sarebbe opportuno usare il css: è sufficiente soltanto un "float:left". Poi, visto che specifichi anche l'altezza e la larghezza, sarebbe molto meglio usare una classe. In definitiva:

Tra <head> e </head>, mettere una cosa come:

Codice HTML:

<style type="text/css"> .immagine { float:left; width:150px; /*ovviamente da regolare*/ height:150px; /*ovviamente da regolare*/ } </style>

il resto, modificarlo ad esempio così:

Codice PHP:

while ($number > $i) { $immagine = mysql_result($result,$i,"immagine"); // impostzioni tabella risultati echo "<img src=\"{$immagine}\" alt=\"\" class=\"immagine\"> " ."<br><br>"; $i++; }}

{però, con i due <br>, non penso siano affiancate :mrgreen:}

Ciao!
16-01-2012, 13.43.30

Lo snippet è per l'idea, dato che aggiungere un <tr> o un <br> non cambia molto.

:wink:
16-01-2012, 14.06.53
alemoppo

Ma infatti non ho capito perché aggiungere <br> se vuole le immagini affiancate :???:

Ciao!
16-01-2012, 14.27.08

Le immagini sono elementi inline (a maggior ragione il float è inutile, anche perché ne annulla la possibilità di assegnare valori come vertical-align), quindi al posto di usare le tabelle ed i <tr> per andare a capo, può usare un <br /> o direttamente un <div> al posto dei <tr> dao che il principio è lo stesso, sarebbe semanticamente più corretto.

:wink:
16-01-2012, 14.36.47
alemoppo

:confused:

Hai ragione: avevo fatto la prova, e le immagini risultavano non-inline: avevano dimensioni troppo grandi :roll:

A questo punto allora, o usare "display:block;", oppure più semplicemente modificare il suo script così:

Codice PHP:

$conta = 0; while ($number > $i) { $conta++; $immagine = mysql_result($result,$i,"immagine"); // impostzioni tabella risultati echo "<img src=\"{$immagine}\" alt=\"\" width='240' height='160'/> "; if($conta > 4) { echo "<br><br>"; $conta = 0; } $i++; }}

..Comunque, preferisco con il css, con "display:block" (anche perché si evitano gli obsoleti width e height dentro il tag).
Con le tabelle "non mi piace" perché (da quel che avevo sentito dire) prima che il browser fa visualizzare le foto, le deve aver caricate tutte... Invece, usando css le foto sono indipendenti, quindi appena il browser le carica, le mostra... Un pò come il discorso dei layout con le tabelle... Poi ovvio: ogniuno fa come vuole :wink:.

Ciao!
16-01-2012, 14.40.24
raimaker

Citazione:

Originalmente inviato da alemoppo

Ma infatti non ho capito perché aggiungere <br> se vuole le immagini affiancate :???:

Ciao!

Ciao a tutti, il < br > l' avevo inserito per dare uno spazio tra le righe alle immagini , poi stavo provando a farle inserire affiancate ma non ci sono riuscito,
e mi sono rivlto a Voi e copiando il codice ho lasciato <br>.

Ho provato il codice di alemoppo mi genera una cosa strana, in quando la prima riga la visualizza in diagonale con 4 immagini mentre dalla seconda riga tutto va bene .
Le immagini sono allienate suula stessa riga.
16-01-2012, 14.46.13
alemoppo

Non ho capito il fatto della "diagonale": puoi scrivere l'indirizzo della pagina in modo che posso vedere?

Ciao!
16-01-2012, 15.00.01

Il browser rallenta sensibilmente il caricamento della pagina se i parametri height e width del tag <img> non sono definiti, ma credo sia stato "tolto" questo problema. Settare, invece, la dimensione nel CSS, evita che il layout si modifichi nel momento in cui viene caricata l'immagine.

Con il codice che ti ho postato nel secondo messaggio di questo topic, prova a far così:

Codice PHP:

echo '<div>'; $count = 1; while ($row = mysql_fetch_array($result)) { if (($count > 1) && (($count % 4) == 0)) { echo '</div><div>'; } ++$count; echo 'Tag <img>'; } echo '</div>';

Ovviamente riadattalo alle tue esigenze.

:wink:
16-01-2012, 15.03.07
raimaker

Citazione:

Originalmente inviato da alemoppo

Non ho capito il fatto della "diagonale": puoi scrivere l'indirizzo della pagina in modo che posso vedere?

Ciao!

Ok scusami avevo ricopiato il primo script adesso sono tutti allineati e abbiamo 4 immagini per riga ho modificato 4 a 3 per averne 4 immagini.
Un' altra cosa, se volessi aggiungere il titolo con il link all' immagine ?

Siete tutti gentilissimi.GRAZIE.
16-01-2012, 15.07.04

Per titolo cosa intendi? Il paramentro title="" dovrebbe fare al caso tuo.
Ricorda che anche il parametro alt="" è obbligatorio.

:wink:
16-01-2012, 16.37.25
raimaker

Citazione:

Originalmente inviato da biccheddu

Per titolo cosa intendi? Il paramentro title="" dovrebbe fare al caso tuo.
Ricorda che anche il parametro alt="" è obbligatorio.

:wink:

Per titolo intendo nome dell' immagine esempio fare una cosa del genere ;

Nome immagine ( webcam1 )
Immagine visualizzata
eventuale link per aprire l' immagine ingrandita

con il Vs. aiuto ho fatto questo

estrazione dal db e allineati 4 immagini per riga
http://raimaker.altervista.org/esempi/dbwebcam1.php

Citazione:

echo "<a href= $indirizzopaginasito target='blank'><img src=\"{$indirizzoweb}\" alt=\" $localita $prov \" width='240' height='160'/> </a>";

aggiunta della località
http://raimaker.altervista.org/esempi/dbwebcam2.php

Citazione:

echo $localita ;
echo "<a href= $indirizzopaginasito target='blank'><img src=\"{$indirizzoweb}\" alt=\" $localita $prov \" width='240' height='160'/> </a>";

per inserire il testo sopra l' immagine dove devo agire ?