Estoy intentando crear un galería que tiene siempre 3 imágenes en miniatura y una de ellas a su tamaño real, al principio la imagen grande sería la primera de esas 3 miniaturas. El problema que tengo es que no se como pasar el valor de la variable que capturo en Javascript al código de Php. Otra cosa que también quiero hacer es usar los enlaces de siguiente y anterior para que al pulsar en ellos las 3 imágenes iniciales (i1.jpg, i2.jpg e i3.jpg) por las siguientes de otro array (i4.jpg, i5.jpg e i6.jpg). Supongo que tal vez debería de usar una variable de sesión para cargar la misma página pero con distintas imágenes en miniatura pero todavía no estoy muy familirizado con las variables de sesión de php.
Dejo el link y el código por si alguien me puede ayudar o dar cualquier consejo.
http://haga041.leadhoster.com/prueba3.php
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prueba galeria</title>
<script language="JavaScript">
<!--
var viewPix = new Array("http://haga041.leadhoster.com/i1.jpg","http://haga041.leadhoster.com/i2.jpg",
"http://haga041.leadhoster.com/i3.jpg")
var viewPix2 = new Array("http://haga041.leadhoster.com/i4.jpg","http://haga041.leadhoster.com/i5.jpg",
"http://haga041.leadhoster.com/i6.jpg")
function aumentar(imagen)
{
alert(imagen);
var imagen = imagen;
}
//-->
</script>
</head>
<body>
<?php
$enlaceactual = imagen;
$enlace1 ='http://www.webng.com/haga041/i1.jpg';
$enlace2 ='http://www.webng.com/haga041/i2.jpg';
$enlace3 ='http://www.webng.com/haga041/i3.jpg';
?>
<div align="center">
<?
echo '<img name="myShow" id="id" src="http://www.webng.com/haga041/i'.$enlaceactual.'.jpg">';
echo '<width="162" height="240"></a>';
?>
</div>
<div style="float: left;padding:0px;margin-left:40%;margin-right:40%;width:300px">
<ul style="list-style-type:none;margin:0;padding:0">
<li style="float:left;padding:2px"><a href="javascript:aumentar(1)">
<?
echo '<img id="1" src="'.$enlace1.'" width="56" height="83"></a>';
?>
</li>
<li style="float:left;padding:2px"><a href="javascript:aumentar(2)">
<?
echo '<img id="2" src="'.$enlace2.'" width="56" height="83"></a>';
?>
</li>
<li style="float:left;padding:2px"><a href="javascript:aumentar(3)">
<?
echo '<img id="3" src="'.$enlace3.'" width="56" height="83"></a>';
?>
</li>
</ul>
<br/>
<br/>
<div style="margin-left:20%;margin-right:20%">
<a href="#">Anterior</a>
<a href="#)">Siguiente</a></div>
</body>
</html> 
