Pagina di profilo con piu foto

carlitos1982

Pagina di profilo con piu foto

Salve di nuovo a tutti..:)
Vengo subito al dunque del mio quesito..:)
Ho creato una pagina d iscrizione al sito con l opportunità di inserire una foto...ora volevo aumentare le foto da poter uplodare da 1 a 4....
Fin qui' nessun problema...mi basta aggiungere altri 3 campi di invio foto a quello che già c'è e la cosa e fatta...
Ora cominciano i problemi...le foto per ogni dovrebbero essere visibili su una pagina personale chiamata profilo.php....di cui all apertura della pagina una dovrebbe esser visibile in un formato 400400 px mentre le altre 3 dovrebbero essere visibili in formato miniatur 5050px...
al clik sulla foto in miniatura nella stessa pagina vorrei chq uest ultima appunto si caricasse al posto di quella che c'è nel formato 400400px e che quella in 400400px si riducesse in miniatura prendendo il posto di una delle 3 miniature....tutto ciò nella stessa pagina... e cosi' via ad ogni clik sulla miniatura fare sempre la stessa cosa..
come potrei fare?devo usare i frame?

privacy.impresa

Ammesso che al caricamento della pagina profilo.php hai impostato la query al database per estrarre in variabili del tipo $foto1 $foto2 $foto3 $foto4 le 4 foto (con url già corretto, quindi o
http://sito.it/imm1.jpg oppure /img/imm1.jpg per esempio e non solo imm1.jpg se le immagini non sono nella stessa cartella di profilo.php) e ammesso che le foto piccole sono propozionali alle grandi e quindi l'immagine piccola è la stessa della grande, solo ridotta (nel tuo caso dei qudrati)... fai così:

//qui simulo che le 4 variabili abbiano i valori giusti, ma tu non devi mettere queste 4 righe,
//ma ricavare i dati dal database
<?php
$foto1 = "foto1.jpg";
$foto2 = "foto2.jpg";
$foto3 = "foto3.jpg";
$foto4 = "foto4.jpg";

?>

//imposto i 5 div

//qui andrà riscritto richiamando la funzione
<div id="big"><img id='fbig' src="<?=$foto1?>" /></div>

//in questi 4 ci sono le foto forzate ad essere piccole e con il richiamo alla funzione
<div id="1"><a href="#" onclick="caricaFoto('<?=$foto1?>')"><img width="50" height="50" id="f1" src="<?=$foto1?>" /></a></div>
<div id="2"><a href="#" onclick="caricaFoto('<?=$foto2?>')"><img width="50" height="50" id="f2" src="<?=$foto2?>" /></a></div>
<div id="3"><a href="#" onclick="caricaFoto('<?=$foto3?>')"><img width="50" height="50" id="f3" src="<?=$foto3?>" /></a></div>
<div id="4"><a href="#" onclick="caricaFoto('<?=$foto4?>')"><img width="50" height="50" id="f4" src="<?=$foto4?>" /></a></div>

I 4 div li posizioni con css dove vuoi tu con position:absolute

I div piccoli sono 4... per farne solo 3 e "sostituire" la piccola con la grande e viceversa serve un codice molto più elaborato...

keiske

p.s.: Nei tag img setti border="0" per non avere il bordo colorato

carlitos1982

immagino serva del codice javascript piu' elaborato...giusto..?

privacy.impresa

No, il codice che ti ho scritto basta che lo ricopi e in cima ci metti il codice php per le query... l'ho provato stamattina e funziona

keiske

carlitos1982

@Privacy-Impresa said:

No, il codice che ti ho scritto basta che lo ricopi e in cima ci metti il codice php per le query... l'ho provato stamattina e funziona

keiske
Si...ho capito...
intendevo codice piu' elaborato nel far si che ne esca una in formato 400px e le altre 3 in miniatura con apertura al clik al posto di quella in formato 400400px...
altrimenti nn mi resta che... alle 3foto che rimangono in miniatura aggiungere in collegamento al formato originale con un window.open,quindi abbandonando l idea di farle aprire al posto di quella 400400px...diciamo che e una soluzione scorciatoia..

privacy.impresa

col mio codice metti al centro quella piccola...

dovresti fare in modo che quando clicchi oltre a mettere al centro quella piccola, metti nello spazio di quella piccola quella al centro... la cosa diventa un po' complicata quando devi "tracciarle"

Ma ho provato e devo dire che le 4 foto piccole e cliccando ognuna si apre al centro senza ricaricare mai la pagina è un bell'effetto... sfruttalo...

keiske

carlitos1982

@Privacy-Impresa said:

col mio codice metti al centro quella piccola...

dovresti fare in modo che quando clicchi oltre a mettere al centro quella piccola, metti nello spazio di quella piccola quella al centro... la cosa diventa un po' complicata quando devi "tracciarle"

Ma ho provato e devo dire che le 4 foto piccole e cliccando ognuna si apre al centro senza ricaricare mai la pagina è un bell'effetto... sfruttalo...

keiske

MmmM...allora nn avevo capito io bene...
quindi conq uesto codice mi crea 4 miniature piccole delle foto e al clik su ognuna si apre nella stessa pagina la foto in formato originale...?

privacy.impresa

Esatto, senza ricaricare nulla...

Perchè non copi il codice così come te l'ho messo e metti dentro alla stessa cartella 4 foto delle dimensioni dette chiamate foto1-2-3-4.jpg e vedi cosa succede?

keiske

carlitos1982

@Privacy-Impresa said:

Esatto, senza ricaricare nulla...

Perchè non copi il codice così come te l'ho messo e metti dentro alla stessa cartella 4 foto delle dimensioni dette chiamate foto1-2-3-4.jpg e vedi cosa succede?

keiske
Allora...ho composto la pagina che dovrebbe visualizzare il tutto cosi'

[PHP]

<?
//connessione al database con valori ovviamente non veri
// Includo la connessione al database
require('config.php');

//mi connetto al datase
$link = mysql_connect("$db_host", "$db_database", "$db_username", "$db_password") or die("Errore connessione: ". mysql_error());
mysql_select_db('my_italiawebchat') or die("Errore apertura database: " . mysql_error());
//seleziono i campi da visualizzare per singolo utente
$strsql="SELECT nickname,sesso,data,utenteemail,descrizione,foto,foto1,foto2,foto3 FROM iscritti ";

$rs=@mysql_query("$strsql",$link) or die("Errore query database: " . mysql_error());
echo mysql_num_rows($rs);
//faccio un ciclo while
while ($riga = mysql_fetch_array($rs)) {
$str_nome = $riga['nickname'];
$str_sesso = $riga['sesso'];
$str_data = $riga['data'];
$str_utenteemail = $riga['utenteemail'];
$str_descrizione = $riga['descrizione'];
$str_foto = $riga['foto'];
$str_foto1 = $riga['foto1'];
$str_foto2 = $riga['foto2'];
$str_foto3 = $riga['foto3'];

}//qui chiudi il while

?>
<script language="javascript">
function caricaFoto(foto) {
//questa funzione cerca l'elemento chiamato big e ci scrive dentro la nuova immagine
document.getElementById('big').innerHTML = "<img id='fbig' src='" + foto + "' />";
//ritorno falso per non far scattare il caricamento nel tag <a>
return false;
}
</script>

[/PHP]

niente...nn mi funziona escono 4 finestre con un altra piu' piccola sopra ma si vede nessuna foto all interno...

carlitos1982

nn riesco a farlo funzionare in nessuna maniera....:?

ilnetsurfer

Io l'ho provato e funziona egregiamente...
Sono sicuro che il tuo errore è dovuto al fatto che non trova le immagini...sicuro di aver impostato la cartella prima di aver fatto l'echo dell'immagine?

carlitos1982

[..]
Si..purtroppo non mi trova le immagini...non ricava le immagini dal database mi sa...

carlitos1982

@carlitos1982 said:

si..purtroppo nn mi trova le immagini...non ricava le immagini dal database mi sa...
HO modficato lo script cosi'

[PHP]
<script language="javascript">
function caricaFoto(foto) {
//questa funzione cerca l'elemento chiamato big e ci scrive dentro la nuova immagine
document.getElementById('big').innerHTML = "<img id='fbig' src='" + foto + "' />";
//ritorno falso per non far scattare il caricamento nel tag <a>
return false;
}
</script>

//qui simulo che le 4 variabili abbiano i valori giusti, ma tu non devi mettere queste 4 righe,
//ma ricavare i dati dal database
<?php

//connessione al database con valori ovviamente non veri
// Includo la connessione al database
require('config.php');

//mi connetto al datase
$link = mysql_connect("$db_host", "$db_database", "$db_username", "$db_password") or die("Errore connessione: ". mysql_error());
mysql_select_db('my_italiawebchat') or die("Errore apertura database: " . mysql_error());
//seleziono i campi da visualizzare per singolo utente
$strsql="SELECT foto,foto1,foto2,foto3 FROM iscritti ";

$rs=@mysql_query("$strsql",$link) or die("Errore query database: " . mysql_error());
//faccio un ciclo while
while ($riga = mysql_fetch_array($rs)) {
$foto1 = $riga['foto'];
$foto2 = $riga['foto1'];
$foto3 = $riga['foto2'];
$foto4 = $riga['foto3'];
}//qui chiudo il while
?>

//imposto i 5 div

//qui andrà riscritto richiamando la funzione
<div id="big"><img id='fbig' src="<?=$foto1?>" /></div>

//in questi 4 ci sono le foto forzate ad essere piccole e con il richiamo alla funzione
<div id="1"><a href="#" onclick="caricaFoto('<?=$foto1?>')"><img width="50" height="50" id="f1" src="<?=$foto1?>" /></a></div>
<div id="2"><a href="#" onclick="caricaFoto('<?=$foto2?>')"><img width="50" height="50" id="f2" src="<?=$foto2?>" /></a></div>
<div id="3"><a href="#" onclick="caricaFoto('<?=$foto3?>')"><img width="50" height="50" id="f3" src="<?=$foto3?>" /></a></div>
<div id="4"><a href="#" onclick="caricaFoto('<?=$foto4?>')"><img width="50" height="50" id="f4" src="<?=$foto4?>" /></a></div>
[/PHP]
il problema è sempre quello...perchè non riesce a visualizzarmi le foto presenti nel database..?
in questi 4 campi presenti nella stringa qui sotto
[PHP]$strsql="SELECT foto,foto1,foto2,foto3 FROM iscritti ";[/PHP]
homemorizzato i nomi delle immagini...
perchè tramite questi nomi non mi ricava l immagine?

ilnetsurfer

Le foto non si trovano in una cartella specifica?

carlitos1982

[...]
Si..stanno nella cartella foto...
Però il problema mio è che non deve visualizzarmi tutte le foto_presenti nella cartella....ma solo quelle relative al profilo che viene visitato...

Per esempio se faccio cosi':
[php]
$foto1 = "foto/foto1.jpg";
$foto2 = "foto/iooooo.jpg";
$foto3 = "foto/foto1.jpg";
$foto4 = "foto/foto1.jpg";
[/php]Il tutto funziona....
però nel momento in cui cerco di cambiare questa parte di codice collegandomi al database ed estraendo i dati delle foto da li' non funziona piu'.

Cioè cosi'..
[php]
//mi connetto al datase
$link = mysql_connect("$db_host", "$db_database", "$db_username", "$db_password") or die("Errore connessione: ". mysql_error());
mysql_select_db('my_italiawebchat') or die("Errore apertura database: " . mysql_error());
//seleziono i campi da visualizzare per singolo utente
$strsql="SELECT foto,foto1,foto2,foto3 FROM iscritti ";

$rs=@mysql_query("$strsql",$link) or die("Errore query database: " . mysql_error());
//faccio un ciclo while
while ($riga = mysql_fetch_array($rs)) {
$foto1 = $riga['foto'];
$foto2 = $riga['foto1'];
$foto3 = $riga['foto2'];
$foto4 = $riga['foto3'];
}//qui chiudi il while
?>[/php]In queste 4 variabili...cioe $foto1 $foto2 $foto3 e $foto4 dovrebbe recuperarmi il nome del file presente nel database...ma non funziona..non mi visualizza le immagini,_forse è il codice javascript che non consente di far ciò che voglio io...?
Cioè devo per forza inserire il percorso della cartella in queste 4 variabili $foto?
Non posso recuperare il nome delle foto presenti nel database per poi_lanciarle tramite questo codice?
Cioè questo..

[php]//imposto i 5 div

//qui andrà riscritto richiamando la funzione
<div id="big"><img id='fbig' src="<?=$foto1?>" /></div>

//in questi 4 ci sono le foto forzate ad essere piccole e con il richiamo alla funzione
<div id="1"><a href="#" onclick="caricaFoto('<?=$foto1?>')"><img width="50" height="50" id="f1" src="<?=$foto1?>" /></a></div>
<div id="2"><a href="#" onclick="caricaFoto('<?=$foto2?>')"><img width="50" height="50" id="f2" src="<?=$foto2?>" /></a></div>
<div id="3"><a href="#" onclick="caricaFoto('<?=$foto3?>')"><img width="50" height="50" id="f3" src="<?=$foto3?>" /></a></div>
<div id="4"><a href="#" onclick="caricaFoto('<?=$foto4?>')"><img width="50" height="50" id="f4" src="<?=$foto4?>" /></a></div>[/php]

ilnetsurfer

Potresti provare modificando questa parte:
[php]while ($riga = mysql_fetch_array($rs)) {
$photos = Array($riga['foto'],$riga['foto1'],$riga['foto2'],$riga['foto3']);
foreach($photos as $photo){

echo " <div id="".$photo.""><a href="#" onclick="caricaFoto('".$photo."')"><img width="50" height="50" id="f1" src="foto/".$photo."" /></a></div>";
}//Chiude il foreach
}//qui chiudi il while[/php]

E poi modifichi JavaScript così:

 <script language="javascript">
function caricaFoto(foto) {
//questa funzione cerca l'elemento chiamato big e ci scrive dentro la nuova immagine
document.getElementById('big').innerHTML = "<img id='fbig' src='foto/" + foto + "' />";
//ritorno falso per non far scattare il caricamento nel tag <a>
return false;
}
</script>

carlitos1982

Mi da un errore di sintassi

Parse error: syntax error, unexpected T_STRING, expecting ',' or ';' in /membri/italiawebchat/prova.php on line 30

ilnetsurfer

Perdonami...errorini miei...
[PHP]
echo " <div id="".$photo.""><a href="#" onclick="caricaFoto('".$photo."')"><img width="50" height="50" id="f1" src="foto/"".$photo."" /></a></div>";
[/PHP]

carlitos1982

@ilnetsurfer said:

Perdonami...errorini miei...
[php]
echo " <div id="".$photo.""><a href="#" onclick="caricaFoto('".$photo."')"><img width="50" height="50" id="f1" src="foto/"".$photo."" /></a></div>";
[/php]
mmm...
allora...al clik sulle finestre in 50px mi da la foto corrispondente...
però nelle finestre piccole mi da la x....non trova le foto

ilnetsurfer

Ecco qui:
[php]
<div id="big"></div>

<?php
while ($riga = mysql_fetch_array($rs)) {
$photos = Array($riga['foto'],$riga['foto1'],$riga['foto2'],$riga['foto3']);
foreach($photos as $photo){

echo " <div id="".$photo.""><a href="#" onclick="caricaFoto('".$photo."')"><img width="50" height="50" id="f1" src="file/".$photo."" /></a></div>";
}//Chiude il foreach
}//qui chiudi il while
?>
[/php]

E il javascript così:


<script language="javascript">
function caricaFoto(foto) {
//questa funzione cerca l'elemento chiamato big e ci scrive dentro la nuova immagine
document.getElementById('big').innerHTML = "<img id='fbig' src='file/" + foto + "' />";
//ritorno falso per non far scattare il caricamento nel  tag <a>
return false;
}
</script>