[Script] Fotogallery con Resize + LightBox + Categorie

mcmmultimedia

Questa galleria e ben fatta
ma come tutti i clienti chiedono... ma nn si puo mettere la descrizione all'immaggine??

ed ecco che si deve per forza avere un db!

Giusto?

zomer

Pova a vedere qui

h**p://xhtml.html*it/guide/lezione/1678/inserire-le-immagini/

ATTENZIONA CMABIA GLI ASTERISCHI

inverter

@Zomer said:

propio per questo avevo pensato di fare un upload con database, ho trovato questo:
...

Più che altro continuo a non capire se ti interessa che l'immagine sia ridimensionata al momento dell'upload o al momento della visualizzazione.
Perchè, nel primo caso, ti basterebbe inserire l'ultima porzione di codice che ho scritto nel mmio ultimo post, alla fine di questo che hai scritto tu, così da ottenere:

[php]
<?php
// Verifico eventuali problemi nell'upload del file
if((!isset($_FILES["file_inviato"])) || ($_FILES["file_inviato"]["error"] != UPLOAD_ERR_OK))
echo "Errore nell'invio del file. Riprova!");

$SizePh = 580; //Dimensione della foto dopo l'elaborazione
$DirGallery = "foto/"; //Nome della cartella in cui salvare la foto
$Compression = 100; //Compressione dell'immagine

ini_set("memory_limit", "128M"); //Settaggio a 128mb del limite imposto dal php.ini
set_time_limit(3000); //Prolungamento del limite imposto dal timer del php.ini

// Connessione e selezione del database
mysql_connect("localhost", "***", "")
or die("Connessione non riuscita: " . mysql_error());

if(!mysql_select_db("my_zomer"))
die("Selezione database fallita!");

// Recupero delle informazioni sul file inviato
$nome_file_temporaneo = $_FILES["file_inviato"]["tmp_name"];
$nome_file_vero = $_FILES["file_inviato"]["name"];
$tipo_file = $_FILES["file_inviato"]["type"];

// Leggo il contenuto del file
$dati_file = file_get_contents($nome_file_temporaneo);

// Preparo il contenuto del file per la query sql
$dati_file = addslashes($dati_file);

// Query per inserire il file nel DB
$query = "INSERT INTO tabella_file SET
nome = '$nome_file_vero',
tipo = '$tipo_file',
dati = '$dati_file'";

mysql_query($query)
or die("Query non valida: " . mysql_error());

//Ritorna le dimensioni della foto originale
list($width, $height, $type) = getimagesize($nome_file_temporaneo) or die("Impossible to get the file data");

//Calcolo delle nuove dimensioni per la foto originale.
if($width > $height)
{
$new_width = $SizePh;
$new_height = ($SizePh * $height) / $width;
$new_height = number_format($new_height, 0);
}
elseif($height > $width)
{
$new_height = $SizePh;
$new_width = ($SizePh * $width) / $height;
$new_width = number_format($new_width, 0);
}
elseif($height == $width)
{
$new_width = $SizePh;
$new_height = $SizePh;
}

$destimg = imagecreatetruecolor($new_width,$new_height) or die("Problemi nelle creazioni dell'immagine");
$srcimg = ImageCreateFromJPEG($nome_file_temporaneo) or die("Problemi nell'aprire l'immagine");
ImageCopyResampled($destimg,$srcimg,0,0,0,0,$new_width,$new_height,ImageSX($srcimg),ImageSY($srcimg)) or die("Problemi nel ridimensionamento");
ImageJPEG($destimg, $DirGallery.$nome_file_vero, $Compression) or die("Problemi nel salvataggio");

// Messaggio di successo
echo "Memorizzazione del file <b>$nome_file_vero</b> nel database eseguita correttamente!");

?>
[/php]Nel secondo dei due casi invece dovresti semplicemente spostare il file temporaneo, nella cartella da te selezionata come cartella principale della fotogallery. Ci sarebberò cioè due script che collaborano: uno che carica l'immagine in una cartella e l'altro che, quando viene richiamato, ridimensiona tutte le foto e le visualizza.

@mcmmultimedia said:

Questa galleria e ben fatta
ma come tutti i clienti chiedono... ma nn si puo mettere la descrizione all'immaggine??

ed ecco che si deve per forza avere un db!

Giusto?

Come ho scritto nel primo post, ho costruito questa gallery, proprio nell'intento di creare una cosa semplice e funzionale al tempo stesso, tralasciando tutto ciò che può sembrare superfluo. Nessuno però impedisce di creare una piccola tabella mysql su cui inserire il nome della foto e una sua descrizione. In questo modo non ci sarà bisogno di aprire una cartella per eseguire il ridimensionamento, ma basterà una query.

Con un pò di fantasia e pazienza si può fare tutto, ma non è l'obbiettivo principale di questa fotogallery

mcmmultimedia

Perfetto...
Attualmente le foto relative alle gallerie gia le carico anche nel db, ho anche creato dal back and anche la funzione per eliminarle (anche fisicamente dalla cartella)

Puoi darmi una mano a fare in modo che sotto ogni immaggine venga visualizzata anche una descrizione!

zomer

Più che altro continuo a non capire se ti interessa che l'immagine sia ridimensionata al momento dell'upload o al momento della visualizzazione.

Allora ora ti spiegho quello che ho fatto. Io in collaborazione con un mio amico ho creato un social network dve gli utenti si registrano è possono creare un profilo, in questo profilo l'utente inserisce i suoi dati e un'immagine ora quello che voglio creare io è un metodo per careicare un immagine è inserirla nella pagina del profilo dell'utente. Ora ti posto una screen di quello che accede su facebook

h**p://img81imageshackus/img81/4093/cartaidentitai*jpg

Ora proviamo a ricavare il link dell'immagine

hp://w.facebookcom/albumphp?profile=1&id=163966*

***Qello che vedi in grasetto e sottolineato è il mio id ciò cosa significa? che facebook ha richiamato la mia immagine con il mio id.****Ora io non sò se facebook ha ridiensionato l'immagine o cosa ha fatto (anche sentito parlare di Thumbnail). Comuque io voglio creare qualcosa del genere sei si deve, anche con il database (per me sarebbe meglio) io so che tu ne sei capace, perchè sei molto bravo e non credo che ti toglierà più di 10 minuti.

Grazie

inverter

@mcmmultimedia said:

Perfetto...
Attualmente le foto relative alle gallerie gia le carico anche nel db, ho anche creato dal back and anche la funzione per eliminarle (anche fisicamente dalla cartella)

Puoi darmi una mano a fare in modo che sotto ogni immaggine venga visualizzata anche una descrizione!

Allora, consideriamo una banale tabella mysql così formata: ID | NOME | DESCRIZIONE
Suggerirei a questo punto, per non stravolgere il codice, di inserire una query solo al momento della visualizzazione delle anteprime, inserendo nel "title" la descrizione delle stesse.
Quindi la porzione di codice da cambiare è successiva al resize e precedente alla paginazione:
[php]
/**

Stampa a video delle foto in base al numero di foto per pagina scelto.
*/
//Query per recuperare le descrizioni delle foto
$result = mysql_query("SELECT * FROM nometabella") or die ("Impossibile recuperare le informazioni dal db. Errore: ".mysql_error());

// Inizio del ciclo per stampare a video le foto
$i = 0;
while ($row = mysql_fetch_array($result)) {
//Creazione del titolo della foto dal nome della stessa
$title = explode('.' , $value);
$title = str_replace('_' , ' ' , $title[0]);

//Se l'indice iniziale è minore dell'indice della prima anteprima da mostrare, viene stampato a video solo il link nascosto della foto, utile per la lightbox    
if ($i < $z)  
    echo "<a href=\"".$photo_path.$row['nome']."\" rel=\"lightbox[roadtrip]\" title=\"".$row['descrizione']."\" style=\"display:none;\">&nbsp;</a>\n";

//    Se l'indice iniziale è maggiore o uguale dell'inidce della prima foto da mostrare ed è anche minore dell'indice dell'ultima foto, allora stampo a video l'anteprima            
elseif ($i >= $z && $i < $last)
    echo " <a href=\"".$photo_path.$row['nome']."\" rel=\"lightbox[roadtrip]\" title=\"".$row['descrizione']."\"><img src=\"".$thumb_path."/".$row['nome']."\" title=\"".$row['descrizione']."\" border=\"0\" alt=\"".$row['descrizione']."\" class=\"img-indice\" /></a> \n";            

// Se l'indice iniziale è maggiore o uguale dell'ultima foto da mostrare, allora stampo solo il link nascosto per la lightbox
elseif ($i >= $last) 
    echo "<a href=\"".$photo_path.$row['nome']."\" rel=\"lightbox[roadtrip]\" title=\"".$row['descrizione']."\" style=\"display:none;\">&nbsp;</a>\n";
    
$i++;

}
[/php]Questo cambiamento impone che tu NON utilizzi la suddivisione in categorie, altrimenti bisognerebbe strutturare il back-end e la tabella mysql in modo più complicato

@Zomer said:

Allora ora ti spiegho quello che ho fatto. Io in collaborazione con un mio amico ho creato un social network dve gli utenti si registrano è possono creare un profilo, in questo profilo l'utente inserisce i suoi dati e un'immagine ora quello che voglio creare io è un metodo per careicare un immagine è inserirla nella pagina del profilo dell'utente. Ora ti posto una screen di quello che accede su facebook

h**p://img81imageshackus/img81/4093/cartaidentitai*jpg

Ora proviamo a ricavare il link dell'immagine

hp://w.facebookcom/albumphp?profile=1&id=163966*

***Qello che vedi in grasetto e sottolineato è il mio id ciò cosa significa? che facebook ha richiamato la mia immagine con il mio id.Ora io non sò se facebook ha ridiensionato l'immagine o cosa ha fatto (anche sentito parlare di Thumbnail). Comuque io voglio creare qualcosa del genere sei si deve, anche con il database (per me sarebbe meglio) io so che tu ne sei capace, perchè sei molto bravo e non credo che ti toglierà più di 10 minuti.

Grazie

Ok, adesso ho capito finalmente cosa ti serve, e ho anche capito che in realtà c'entra poco con il mio script iniziale. Sarebbe bello continuare la discussione in un altro topic separato, li potremmo parlare senza trarre in inganno chi cerca di capire come funziona questa specie di "tutorial"
Ci rivediamo in un altro topic!:)

mcmmultimedia

Ciao Inverter e grazie per il codice....

L'ho studiato ed adattato alle mie esigenze solo che io la descrizione o eventualmente anche il totolo della foto voglio farlo uscire al di sotto della foto, non della descrizione quindi di seguito al tuo codice ho aggiunto:

[PHP
// Se l'indice iniziale è maggiore o uguale dell'inidce della prima foto da mostrare ed è anche minore dell'indice dell'ultima foto, allora stampo a video l'anteprima
elseif ($i >= $z && $i < $last)
echo " <a href="".$photo_path.$row['nome']."" rel="lightbox[roadtrip]" title="".$row['descrizione'].""><img src="".$thumb_path."/".$row['nome']."" title="".$row['descrizione']."" border="0" alt="".$row['descrizione']."" class="img-indice" /></a><br>".$row['descrizione']."\n";
[/PHP]

le descrizioni escono ma in modo disordinato, cioè non proprio sotto l'immaggine, si devono inserire in una tabella?

inverter

La tabella è meglio lasciarla stare, meglio utilizzare css e div.
Qui ho trovato una guida interessante, penso che prenderò spunto per aggiornare la fotogallery:
domedia.org/oveklykken/css-photo-gallery.php

Credo sia quello che vuoi tu

EDIT: Adesso che ci penso puoi anche eliminare queste due righe di codice, credo che tu non le stia più utilizzando
[php]
//Creazione del titolo della foto dal nome della stessa
$title = explode('.' , $value);
$title = str_replace('_' , ' ' , $title[0]);
[/php]

@Zomer said:

Allora ora ti spiegho quello che ho fatto. Io in collaborazione con un mio amico ho creato un social network dve gli utenti si registrano è possono creare un profilo, in questo profilo l'utente inserisce i suoi dati e un'immagine ora quello che voglio creare io è un metodo per careicare un immagine è inserirla nella pagina del profilo dell'utente. Ora ti posto una screen di quello che accede su facebook

h**p://img81imageshackus/img81/4093/cartaidentitai*jpg

Ora proviamo a ricavare il link dell'immagine

hp://w.facebookcom/albumphp?profile=1&id=163966*

***Qello che vedi in grasetto e sottolineato è il mio id ciò cosa significa? che facebook ha richiamato la mia immagine con il mio id.Ora io non sò se facebook ha ridiensionato l'immagine o cosa ha fatto (anche sentito parlare di Thumbnail). Comuque io voglio creare qualcosa del genere sei si deve, anche con il database (per me sarebbe meglio) io so che tu ne sei capace, perchè sei molto bravo e non credo che ti toglierà più di 10 minuti.

Grazie

Continuiamo qui la discussione
Allora, secondo me ti conviene agire in questa maniera:

Conti quante copie della stessa immagine ti serve e a quali misure (per esempio: una serve per l'immagine del profilo con dimensioni 200100, un'altra come anteprima con dimensioni 5050, e così via).
Dai la possibilità all'utente di caricare l'immagine
Ridimensioni la foto tante volte quante immagini uguali ma di diverse dimensioni ti servono
Salvi le foto nel server

Oppure ridimensioni le foto al volo ogni volta che c'è ne bisogno, ma a mio avviso è sbagliato, rallenterebbe molto il caricamento.

Se mi dici a quali misure vuoi che l'immagine caricata sia ridimensionata, proviamo a buttare giù un pò di codice

mcmmultimedia

Ecco come è venuto il risultato finale!
h**p://vvv.infissipiu.com/infissi2.php

mi chiedo.. come mail la scritta pagine:1 adesso e vagante... ci vorrebbe un div anche li giusto!?

Dovro modificare un po anche l'admin perche adesso se voglio eliminare una foto dal server dovro eliminare anche la miniatura...

Magari ci becchiamo a presto, adesso sono KO!

Nienta male per uno che di php nn ne capisce una mazza

zomer

Ecco le misure che mi servirebbero:
1 profilo:
200x200px
2 chat-tag-board:
50x50 px
3 blog:
100x100 px

Comuque pensa che queste sono misure standard dovremo fare qualcosa del tipo:
[PHP]
<?
// Ottengo le informazioni sull'immagine originale
list($width, $height, $type, $attr) = getimagesize($_SERVER['DOCUMENT_ROOT']."/$id.jpeg");

//funzione che capisce se l'immagine è verticale o orizzontale
function verticale_orizzontale($width, $height)
{
if (! is_numeric($num1)) { return false; }
if (! is_numeric($num2)) { return false; }

if ($width > $height)
{
{
return $width;
} else {
return $height;
}
}
}

?>
[/PHP]

cpendo quale delle due grandezze è più grandi potremmo capire se l'immagine è orizzontale o verticale. Poi per capire quanti pixel dobbiamo agigungere se un immagine è orizzontale ci basterà fare un sotrazzione tra l'altezza e la larghe il risultato va aggiunto ai 200x200 es:

1.carico un immagine 1000x1800
2.capisco che l'immagine è orizzontale quindi *$width *è il maggiore
3. faccio una sotrazzione tra 1000-1800 il risultato è: 800
4.aggiungo 800 alla $width default che ho scelto per la minuatura in questo caso 200x200 quindi uscirà 200x1000...

FORSE HO SBAGLIA MA QUESTA E' UN IDEA SE NE HAI ALTRE SPARA!

christian82

Ciao ho fatto uno script che forse si adatta molto bene al tuo problema.
[PHP]
<?php
ini_set("memory_limit","256M");
$id_raccolta = $_GET['id_raccolta'];
$dir_thumbs = "../../thumbs/".$id_raccolta."/";
$dir_opera = "../../opera/".$id_raccolta."/";
$dir_original = "../../original/".$id_raccolta."/";

$filename_temp = $_FILES['new_img']['tmp_name'];
$filename = $_FILES['new_img']['name'];

//--ORIGINAL--
if (!is_dir($dir_original)) {
mkdir($dir_original);
}
$file_original = $dir_original . basename($filename);
// Ottengo le informazioni sull'immagine originale
list($width, $height, $type, $attr) = getimagesize($filename_temp);

// Creo la versione originale dell'immagine (original)
$original = imagecreatetruecolor($width, $height);
$source = imagecreatefromjpeg($filename_temp);
imagecopyresized($original, $source, 0, 0, 0, 0, $width, $height, $width, $height);

// Salvo l'immagine ridimensionata
imagejpeg($original, $file_original, 100);

if (is_uploaded_file($filename_temp)) {

//--THUMBS--
if (!is_dir($dir_thumbs)) {
    mkdir($dir_thumbs);
}
$file_thumbs = $dir_thumbs . basename($filename);
// Ottengo le informazioni sull'immagine originale
list($width, $height, $type, $attr) = getimagesize($filename_temp);

if ($width > $height) {
    $width_new = 110;
    $height_new = ($width_new * $height)/$width;
}
else {
    $height_new = 100;
    $width_new = ($height_new * $width)/$height;
}

// Creo la versione thumbs dell'immagine (thumbnail)
$thumb = imagecreatetruecolor($width_new, $height_new);
$source = imagecreatefromjpeg($filename_temp);
imagecopyresized($thumb, $source, 0, 0, 0, 0, $width_new, $height_new, $width, $height);

// Salvo l'immagine ridimensionata
imagejpeg($thumb, $file_thumbs, 60);
if (is_uploaded_file($filename_temp)) {
    
    //--OPERA--
    if (!is_dir($dir_opera)) {
        mkdir($dir_opera);
    }
    $file_opera = $dir_opera . basename($filename);
    // Ottengo le informazioni sull'immagine originale
    list($width, $height, $type, $attr) = getimagesize($filename_temp);
    
    if ($width > $height) {
        $width_new = 440;
        $height_new = ($width_new * $height)/$width;
    }
    else {
        $height_new = 400;
        $width_new = ($height_new * $width)/$height;
    }
    
    // Creo la versione web dell'immagine (opera)
    $opera = imagecreatetruecolor($width_new, $height_new);
    $source = imagecreatefromjpeg($filename_temp);
    imagecopyresized($opera, $source, 0, 0, 0, 0, $width_new, $height_new, $width, $height);
    
    // Salvo l'immagine ridimensionata
    imagejpeg($opera, $file_opera, 100);
    if (is_uploaded_file($filename_temp)) {
        
        echo "success";
    }
    else {
        echo "error";
    }
}
else {
    echo "error";
}
}

else {
echo "error";
}

?>
[/PHP]
Io ho ripreso e modificato lo script che trovate qui valums.com/ajax-upload/

zomer

Grazie...ma non funziona :bho: mi dice error...prova nache tu il link del sito è questo

h**p://zomer.altervista*org/login.php

USERNAME: Zomer
PASSWORD: tgbyhn

:(:(

christian82

Ciao prova a usare lo script originale ( valums.com/ajax-upload/ ), poi se funziona vai ad aggiungere le cose che ti servono...

zomer

Non capisco niente di AJAX...scusate per il disturbo, non si potrebbe fare in php?

billa147

Ciao a tutti, sono nuovo su questo forum.
Mi occupo da un paio d'anni della progettazione del sito web del mio team ciclistico. Il sito è statico, e diventando sempre più grande la mole dei dati, sto cercando di apprendere il linguaggio PHP per rendere il più dinamico possibile il tutto.
Ho utilizzato lo script creato da inverter per realizzare le fotogallery sul mio nuovo sito di prova, e devo dire che funziona tutto alla grande.

L'unica cosa è che vorrei anche fare in modo di creare una pagina dinamica che mi visualizzi i nomi delle sottocartelle, e da li un link alla fotogallery relativa.

Riuscite ad aiutarmi? Ci sto provando da solo da una settimana, ma causa la mia conoscenza limitata del linguaggio PHP, non ci riesco...:(

Per darvi un'idea di quello che vorrei fare, vi dò il link del mio sito, ed alla voce Photogallery potete vedere quello che vorrei fare dinamicamente...

biketeammandello.it

Ciao a tutti!!!

billa147

Nessuno è così generoso da aiutarmi? Please...

galis

Ciao, e complimenti Inverter per il tuo ottimo script, lo sto utilizzando per un sito di un amico.
Vorrei chiedere, se è possibile far fare l'upload anche ad immagini con formato diverso da quello jpeg, come ad es. png e gif, utilizzando questo script.

Grazie

mirko.exe5

grande ottimo script domanda da 3 punti mi esce a video questi errori...

Warning: mkdir(foto/thumbnails): No such file or directory in url-sito.net\script.fotogallery.php* on line 67

Warning: opendir(foto/): failed to open dir: Invalid argument in url-sito.net\script.fotogallery.php* on line 72
Impossibile aprire la cartella
Pagine:

domanda ho fatto settare i permessi a 777 ma nulla...

lo script e altro stanno nella cartella principale della dir e in essa la cartella foto e successivamente ho creato al suo interno tumbnails

pardon mi auto quoto e correggo

*ho risolto con *
la variabile $DirGallery che avevo settato con il link ...
ma non bastava ho fatto proprio tutto il percorso dall'unità ad es C:/ etc fino allo script...

magomac

Ciao Inverter,

da quanto ho letto in questo post questa fotogallery mi sembra che risponda proprio a quello stavo cercando: una galleria semplice e perfettamente integrabile nel design di qualsiasi sito.

I link, sia della demo sia per il download, non sono più disponibili.
Riesci per caso a ricaricarli?

Grazie!