PDA

View Full Version : [PHP - Js] Galleria immagini da directory e apertura dell'immagine in un div


Albume
23-03-2010, 11:46
Salve a tutti. E' qualche giorno che sto sbattendo la testa perchè sto cercando di fare una galleria che carichi le miniature delle immagini direttamente da una directory e che, una volta cliccato su una miniatura, mi apra quell'immagine in un altro div nella stessa pagina.
Sono abbastanza digiuno di PHP ma ho trovato questo script
<?php

$path = "immaginicatalogo/";
$dir_handle = @opendir($path) or die("Unable to open folder");

while (false !== ($file = readdir($dir_handle))) {

if($file == "index.php")
continue;
if($file == ".")
continue;
if($file == "..")
continue;

echo "<a href='#'><img src=\"{$path}{$file}\" width='15%' height='15%' /></a>";

}
closedir($dir_handle);
e sembra funzionare bene. Il problema nasce appunto quando voglio far aprire l'immagine cliccata in un div. Ho provato con uno script in javascript ma non so come "spiegargli" quale immagine deve aprire di volta in volta. Qualcuno è in grado di darmi una mano? Magari anzichè uno scrpit js si può fare proprio in PHP, ma a giro per la rete non ho trovato niente di utile...

Torav
23-03-2010, 11:57
Forse non ho capito bene. Tu vuoi che come clicki su di un'immagine ti venga visualizzato un div contenente l'immagine a grandezza naturale? In questo caso crei un div nascosto dove vuoi tu, magari con position:fixed:


<div id="div_immagine" style="position:fixed; display:none" class="classe_css_qua">
<img id="immagine_grande" src=""></img>
</div>


poi la parte in cui stampi con php il tag <img> diventa:


echo "<a href='#'><img src=\"{$path}{$file}\" onclick=\"visualizza_immagine('{$path}{$file}')\" width='15%' height='15%' /></a>";


e da qualche parte ficchi una funziona javascript di questo tipo:


function visualizza_immagine(img_url) {
document.getElementById("immagine_grande").src = img_url;
document.getElementById("div_immagine").style.display = "block";
}


e l'unica cosa che devi aggiungere è un pulsante per "chiudere" il div: ti basta mettere onclick="this.style.display='none'" et voilà, dovresti avere quello che ti serve! Non ho provato tutto sto accrocco quindi prendilo col beneficio del dubbio: qualche errore potrebbe esserci ma il senso è quello!

nerthase
23-03-2010, 14:14
Ciao, quello che dice Torav è tutto corretto. Ti aggiungo giusto qualche esempio di utilizzo di JavaScript a questo scopo. Spero possa esserti utile.

Pagine Web dinamiche con JavaScript (http://www.nerthase.com/blog/pagine-web-dinamiche-con-javascript)

Se ci sono dubbi, contattami pure per PM o su nerthase.com

Albume
16-04-2010, 12:06
Scusate se riuppo un post un pò vecchiotto ma ho ancora bisogno di voi e il problema è legato a quello di questa discussione.
La necessità ora sarebbe di avere un carousel orizzontale in javascript che prenda le immagini direttamente da una directory.
Come carousel ho trovato questo:
http://sorgalla.com/projects/jcarousel/#Getting-Started.
Sembra perfetto, ma tra gli esempi l'unico che si avvicina è quello che recupera l'url delle immagini da un file php in cui questi sono inseriti in un array.
Esempio di carousel dinamico (http://sorgalla.com/projects/jcarousel/examples/dynamic_ajax_php.html).
Qualcuno mi sa dire come modificare il file php per fare in modo di non doverci scrivere gli indirizzi a mano ma di recuperarli automaticamente prendendo le immagini da una directory?

Spero ci si capisca qualcosa, non sono certo di essermi spiegato bene :P