Preview immagini interne alla pagina

[Trumanshow]

Salve!
Ho iniziato ad utilizzare JS da qualche giorno e sono già sommerso di cose che non riesco a fare. Come da titolo, il mio problema riguarda le anteprime di una lista di immagini.
Vorrei fare un paio di cose:
1. Visualizzare la preview delle immagini, passandoci sopra il cursore. Da quanto ho visto si usa jQuery:

[img]1s.jpg[/img]

ma non sono riuscito a farlo funzionare sul mio codice.
Può essere dovuto al fatto che le immagini sono in cartelle diverse?
Le immagini della lista sono in una cartella photo, mentre quelle ingrandite sono in photo/new.
La versione ingrandita è nominata come foto_new.jpeg (mentre quella piccola foto.jpeg)

html code:

<ul class="list_photos">
	<li class="item_photo">
		<a href="big/foto_new.jpeg" class="preview">
			[img]foto.jpeg[/img]
		</a>
	  	<div class="caption">Descirizione immagine 1</div>
	[/list]

2. Vorrei visualizzare (onclick) l'immagine grande, con la possibilità di scorrere tra le immagini (next-previous) [come si vede sulla maggior parte dei social network].
Per la singola foto ho aggiunto:
Html:

<li class="item_photo" onclick="gallery()" >

JS:

function gallery(){
	var scr_img = image.src.replace("photo/","photo/new/"+"_new.jpeg")
}

La parte next-previous pensavo di farla con un assegnamento di un numero a ciascuna immagine. O c'è un metodo migliore?

Grazie in anticipo per l'aiuto.

[cavicchiandrea]

Ma sta usando una gallery o la stai sviluppando tu?

[Trumanshow]

Sto facendo tutto io da zero, puramente per imparare. Sto facendo un sito "tipo social network" in html, con una homepage, una pagina photo (in cui visualizzo la lista di foto su cui vorrei fare questo lavoro), pagina con amici etc.. per il layout ho già fatto il file css, ed ora volevo fare la parte di JS.
Attualmente è tutto fatto in locale, le foto sono tutte sul computer, non online.

Non so se è questo ciò che volevi sapere..

[cavicchiandrea]

Si, proprio quello che volevo sapere.
Tornando ai "problemi/dubbi" jquery è un gran ben prodotto, ma senza delle buone basi di js ritengo sia inutile, e ritengo anche che quello che vuoi fare sia un po troppo ambizioso per un profano.
Per quanto riguarda le preview potresti usare un array che contenga il percorso delle immagini grandi, per la navigazione impossibile dire cosa fare senza capire il progetto e comunque realizzarlo non sarebbe semplice

[Trumanshow]

Rinuncerò all'idea di jQuery allora.. Ora provo con l'array per le preview! se ho altri dubbi vi scrivo!

[Trumanshow]

Sono riuscito a fare la preview dell'immagine, in modo che si apra a centro schermo, facendo vedere la versione HD dell'immagine.
In JS ho usato il seguente codice:

function gallery(li){

	var galleryDIV = document.getElementById("galleryDetail");
	galleryDIV.className = "showGallery";

	var galleryIMG = document.getElementById("inGallery");
	var selectedIMG  = li.childNodes[1];

	var pathSplitted = selectedIMG.src.split("/");
	var fileName = pathSplitted[pathSplitted.length-1].split(".")[0];

	var newImageSrc = "photo/new/"+ fileName + "_new.jpg";

	galleryIMG.src = newImageSrc;
}

Ora vorrei, con una function nextGallery(){}, poter passare all'immagine successiva nella lista. Vorrei inoltre che insieme all'immagine venga anche visualizzata la descrizione dell'immagine.

Il div nascosto (in cui viene mostrata la preview) ed ogni elemento della lista ul sono fatti così

<div id  = "gallery_Detail" class = "hiddenGallery">
	[img][/img]
	<a onclick="previousGallery()" id="prevG"> Previous </a>
	<a onclick="nextGallery()" id="nextG"> Next </a>

	<div id"description">
		<h3> Descrizione </h3>
		

</p>		 /* titolo effettivo della foto, ovvero "Photo #"
	</div>

<li class="item_photo"  onclick="gallery(this)">
	[img]photo/IMG_#.jpeg[/img] 
	<div class="caption">Photo #</div>

Come posso fare a far comparire la descrizione "Photo #" in base alla foto visualizzata?

Soprattutto, come faccio a far funzionare i due tasti Previous e Next?