Probblema nel visualizzare le immagini del database

[mexonline]

non so se sono nella sezione giusta, ho visto che erano presenti altri problemi sulle immagini... allora vi descrivo il mio problema:
Ho dei link scritti nel database che portano a delle immagini,
avevo pensato di selezionare il db e ogni link (immagine) presente nella tabella, poi con $foto=$array["link_foto"]; ricavare tutti i link immagine di un determinato utente e visualizzarlo sulla pagina .php ma qui arriva il problema, vorrei che mi si visualizzasse una sola immagine per volta e caso mai o con il passaggio del mouse, o cambiarla dopo un tot di tempo in automatico, ma non trovo nessun modo per farlo... potete darmi una mano perfavore grazie

[NLSweb]

una volta che hai acquisito le immagini (i link delle immagini) in un array devo solo creare un interfaccia grafica per visualizzarle...
avendo la lunghezza del array (quindi il numero di link) , ti bastera' impostare un indice al array per vedere una foto alla volta.
se hai bisogno di altro aiuto , per favore scrivi il codice o posta il link della pagina , grazie.

[mexonline]

<?php
$conn=mysql_connect("$db_host", "$db_user", "") or die(mysql_error()); 
$sele=mysql_select_db("$db_name", $conn) or die(mysql_error()); 
$selezione=mysql_query("select link_foto, link_imposta from foto_diario WHERE email='$email' ORDER BY data_ora DESC") or die(mysql_error()); 
if(mysql_num_rows($selezione)>0){ 
while($array=mysql_fetch_array($selezione)) 
{ 
$foto=$array["link_foto"]; 
$imposta=$array["link_imposta"]; 
$foto="$foto";


echo "<form> 
<table border=\"0\" bgcolor=\"yellow\" width=\"250\" height=\"200\" align=\"center\"><tr><td>
<img width=\"250\" height=\"200\" src=\"$foto\">
</td></tr><tr><td>
<center><a href=\"$imposta\">Imposta foto al profilo</a><br>
</td></tr></table>
<table align=\"center\" width=\"250\" height=\"15\"><tr><td></td></tr></table>
<onfocus='this.blur()' onstartselect='return false;'>";};}else {echo "<center>Non ci sono ancora foto sul diario.</center>";}
?>

solo che in questo modo le immagini caricate da un utente vengono visualizzate una sotto l'altra con uno spazio tra una e l'altra, io però vorrei mostrarne una soltanto alla volta per non aumentare le dimensioni della pagina se le immagini diventano tante...
ecco la pagina che ho io ma come vedi si posizionano una sull' altra

[mexonline]

$result = mysql_query("SELECT link_foto FROM foto_diario WHERE email='$email'");
$array = array();
while($r = mysql_fetch_array($result))
$array[] = $r[0]; 

Potrei usare questo per creare un array? No di questo non ci capisco nulla so solo che alla fine creato l'array lo posso contare con

count($array); 

[NLSweb]

prima del ciclo while dichiara una variabile da usare come contatore
all'interno del ciclo indicizza l'array con la variabile (esempio $array[$i]=$r['foto']; )
e sempre all'interno del ciclo crea una lista <li> in cui inserisci le immagini (esempio echo "<li><img src='".$array[$i]."' /></li>"; )
chiaramente devi creare a monte del ciclo un <div> e un <ul> , ed dopo il ciclo li devi chiudere.
ora crei il tuo foglio di stile css in cui il div avra' un overflow nascosto (per il resto della impostazione grafica segli tu come preferisci)
non ti rimane che generare uno script (js o jquery come preferisci) che faccia scorrere le immagini all'interno del div..
fatto!

se hai dubbi su come procedere fammi sapere...

[mexonline]

<div id="immagini">
<lu>
<?php
$result = mysql_query("SELECT link_foto FROM foto_diario, link_imposta WHERE email='$email' ORDER BY data_ora DESC");
$array = array();
//qui ci dovrebbe stare un ciclo for?
$array[$i]=$result['link_foto'];
$arraylink[$i]=$result['link_imposta'];
echo "<li><a href='\".$arraylink[$i].\"' alt=\"Imposta foto al profilo\"><img src='\".$array[$i].\"' /></a></li>";
//qui essendo dentro al php va messo echo per visualizzare le foto e prima dei " interni al echo và messo \ questo?
?>


</lu>
</div>

Potrebbe andare bene così il file php?

[NLSweb]

attento e' <ul> e non <lu> !!!
dentro il codice php dopo esserti connesso al server ed aver attivato la query , crei l'array (nessun problema fino a qui)
quindi inizializzi la variabile contatore ($i) e crei il div con ul (sempre usando echo)
poi crei il ciclo while non for per prelevare tutti i dati dal db e copiari nel array
poi crei la lista ... si per poter scrivere " lo devi fare \"
quindi devi incrementare il contatore $i = $i +1;
e chiudi il ciclo while
alla fine chiudi echo "</ul></div>";

quindi puoi chiudere la connessione

p.s.

stai attento !!

echo "<li><a href='\".$arraylink[$i].\"' alt=\"Imposta foto al profilo\"><img src='\".$array[$i].\"' /></a></li>";

echo "...".$arraylink[$i]."..."; 

in questo caso non devi usare \" poiche' i doppi apici aprono e chiudono il codice da scrivere

quando invece i doppi apici sono all'interno della dichiarazione

echo "<li><img src='".$foto[$i]."' width=\"400px\" height=\"200px\" /></li>"; 

allora li devi usare ... guarda bene : apro " scrivo width= e qui devo riusare " ma non devo chiudere la dichiarazione quindi scrivo \"

poi devo chiudere width= \" 200px \" e riuso lo stesso sistema alla fine della dichiarazione chiudo solo con "

[mexonline]

Aaa sisi tutto chiaro per la storia dei \" è che sto con il cellulare a scrivere il codice, e non avevo visto <lu> con <ul> poi appena accendo il pc scrivo il codice che ho in mente e lo testo.. se non riesco richiedo aiuto qui :) grazie per il tuo aiuto fino ad ora :)

[mexonline]

ok ho scritto il codice su un file di di prova... ma non sono riuscito...

<?php
echo "<div id=\"immagini\"><ul>";
$s=mysql_query("select link_foto, link_imposta from foto_diario WHERE email='$email' ORDER BY data_ora DESC") or die(mysql_error()); 
if(mysql_num_rows($s)>0){ 

//creo la variabile partento da 0 per il contatore
$i = 0;

//inizia il ciclo da $i=0 a $s=numero di tutti i link foto
while($i=mysql_fetch_array($s))
{ 
$foto=$i["link_foto"]; //recupero i link delle immagini
$imposta=$i["link_imposta"]; //recupero i link per vederle

$foto[$i]=$i["link_foto"]; //creo la lista delle foto
$imposta[$i]=$i["link_imposta"]; //lista dei link

echo "<li><a href='".$imposta[$i]."' alt=\"Imposta foto al profilo\"><img src='".$foto[$i]."' /></a></li>"; //visualizzo dati

}
}
echo "</ul></div>";
?>

non ho aggiunto l'aumento $i + 1; perchè mi segnalava un errore in quella linea.. se clicchi il file dove ho messo il codice cioè in questa pagina pui vedere che i <li> sono 3 come i link nel database ma non fa vedere le immagini..

[NLSweb]

allora....credo che nel codice cosi' come lo hai postato ci siano un po' di problemi..
ti posto un codice funzionante cosi' che potrai confrontarlo..

<?php
$con=mysqli_connect("localhost","nlsweb","","my_nlsweb");
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$result = mysqli_query($con,"SELECT * FROM lista WHERE tipo='news'");

$fotonovita=array();

$i=0;
echo "<div id=\"foto\"><ul>";

while($row = mysqli_fetch_array($result)) {
  $fotonovita[$i]=$row['foto'];
 
echo "<li><img src='".$fotonovita[$i]."' width=\"435px\" height=\"290px\" /></li>";

  $i = $i +1; 
}

echo "</ul></div>";

mysqli_close($con);
?>

[NLSweb]

come vedi , come prima cosa richiamo tutti idati dalla tabella
quindi dichiaro un array e la variabile contatore

creo il mio div e ul

quindi creo il ciclo while in cui scorro tutti i risultati prelevati dal db
e ogni risultato viene copiato nel array con indice la variabile contatore

creo la mia lista con le immagini prese dal array

ed infine aumento il contatore

chiudo il ciclo e chiudo ul e div

fine , chiudo la connessione al db

[mexonline]

sisi il percorso da seguire lo avevo capito che lo avevi gia scritto sopra, ma non so come andava scritto un giusto array con il ciclo while.. da oggi ho fatto qualche ricerca e ho letto che while si usa come if.. e ho cercato di scrivere qualcosa su quello che conoscevo.. ho scritto il codice che mi hai dato su questa pagina adesso le immagini e i link si vedono.. Grazie tanto :) adesso come avevi detto devo creare un foglio css dove c'è lo stile del div (dovrei mettere le immagini una sul altra?) e poi creare il file js che da il movimento.. (per il file js non ho nessuna idea non so neanche che tipo di codice va inserito).

[NLSweb]

le immagini non devi metterle una sull'altra ... ti basta impostare il tuo contenitore (div) con overflow nascosto e dimensionarlo per poter vedere un foto al completo , chiaramente definirai il layout che preferisci con il tuo foglio di stile.

se non vuoi usare script puoi ache evitare , devi pero' complicarti un po' il lavoro con i CSS3 ...

una cosa alla volta .. intanto configura il layout .. poi se hai bisogno di altro aiuto , chiedi pure.

[mexonline]

ok ho usato come hai detto overflow nascosto e questo è il risultato pagina di prova puo andare bene? inserendo poi un file js che da il movimento (ogni 10 secondi cambia l'immagine restando sempre nel area precedente)

[NLSweb]

il puntino... e' la prioprieta' CSS list-style-type ...

adesso che viene mostrata una sola foto alla volta , devi decidere come far vedere le altre e se usare o meno gli script

[mexonline]

non so altri modi altri gli <script> ho trovato questo script su internet se lo adatto? anche perchè io avrei le array in lista in questo modo

immagini[0]="percorsoprimaimmagine.jpg";

se non sbaglio...

<script language="Javascript" type="text/javascript">
var secondi=10;
var num=0;
function CambiaImmagine() {
	var immagini=new Array();

//io avrei questa parte
	immagini[0]="percorsoprimaimmagine.jpg";
	immagini[1]="percorsosecondaimmagine.jpg";
//fino a qui e se adatto questo? dovrebbe funzionare

	document.getElementById("img").src=immagini[num];
	num=(num+1>=immagini.length)?0:num+1;
	setTimeout("CambiaImmagine()",secondi*1000);
}	
CambiaImmagine();
</script>

nel css ho aggiunto quella cosa per toglere i puntini

[NLSweb]

.....se vuoi usare array creato in php nel tuo js dovrai usare JSON ...

ma come hai impostato il codice non ti serve a molto...

prima di tutto tu le immagini c'e' le hai gia' in una lista nascosta , quindi non devi modificare il src di img ...

la cosa e' molto piu' semplice ... devi solo scegliere se le vuoi temporalizzarle o a scorrimento manuale

[NLSweb]

se vuoi temporalizzarle puoi anche non usare js ma solo css

[mexonline]

Penso sia più utile sia con il cellulare che con il pc temporizzare e cambiare automaticamente le foto

[mexonline]

Anche perche se clicco la foto mi riporta su un altra pagina

[NLSweb]

se provi ad usare solo CSS con animation @keyframes
devi definire la durata della animazione in base a questo calcolo: (durata transizione + durata fermo immagine) * num di immagini
quindi ad ogni step (@keyframes) fai muovere la lista verso l'alto...

se invece vuoi usare gli script , allora crea una classe che esegue una singola animazione (spostamento verso l'alto della lista) , quindi crei un intervallo js ed assegni ad ogni ciclo la classe al <li> , alla fine della lista decidi se crei un loop o chiudi l'intervallo.

[mexonline]

Con le animazioni automatiche cè la possibilità di inserire il loop? Io avrei in mente di cambiare le immagini e farle ripartire al infinito...

[NLSweb]

Si che puoi... basta che metti un controllo nel ciclo che quando superi il numero di foto rincomincia dalla prima

[mexonline]

ok facendo cosi mi muove tutto il div con le immagini... io però dovrei far restare il div fisso ma far muovere solo le immagini


.foto{
width:290px;
height:190px;
overflow:hidden;
position:relative;
-webkit-animation: mov 5s; /* Chrome, Safari, Opera */
animation: mov 5s;
}
li {list-style: none;}
ul {list-style-type:none;}



/* Chrome, Safari, Opera */
@-webkit-keyframes mov {
0% {left:0px; top:0px;}
25% {left:200px; top:0px;}
50% {left:200px; top:200px;}
75% {left:0px; top:200px;}
100% {left:0px; top:0px;}
}

/* Standard syntax */
@keyframes mov {
0% {left:0px; top:0px;}
25% {left:200px; top:0px;}
50% {left:200px; top:200px;}
75% {left:0px; top:200px;}
100% {left:0px; top:0px;}
}

come vedi qui

[NLSweb]

non capisco il @keyframes con il box-shadow ? se vuoi far muovere la lista da basso verso l'alto devi modificare la posizione o con top o con bottom ..

se hai dubbi chiedi piu' esplicitamente...

[mexonline]

scusa non riesco a farle muovere :( non ho capito come se applicare la classe al li o al div.. scusa ancora se disturbo

[NLSweb]

tu applichi la classe della animazione al div , ecco perche' si muove tutto il div
devi applicarla al <li> che contiene le img , cosi' il div rimane fermo e le immagini scorrono

poi non ti serve usare left ma solo top visto che nella lista , le immagini sono una sotto l'altra

[mexonline]

sisi ho notato che sono una sotto l'altra.. pensavo che si potevano anche far scorrere verso destra e sinistra..

[NLSweb]

stavo creando un esempio ma usando uno script ..

[NLSweb]

se non vuoi usare script comunque la strada che stai facendo e' quella giusta , devi solo perfezionare l'animazione