[Jean le Chauve]

En tous cas, on voit que tu t'amuses bien

On se demande ce que tu veux faire ? Ne pas utiliser de JS ? Et pourquoi recharger la page à chaque clic ?
Pourquoi ne pas plutôt utiliser du css pur, sans rechargement de page comme ici, par exemple : http://www.cssplay.co.uk/menu/gallery.html (je te laisse naviguer pour découvrir les autres démos de ce gourou du css).
Extrêmement simple à réaliser avec Gallery et CGSmartImage inclus : voir résultat ici : http://www.tutos-pour-cmsmadesimple.be/
Gabarit

Code :

<div class="gallery">
{if !empty($module_message)}<h4>{$module_message|escape}</h4>{/if}
{if !empty($gallerytitle)}<h3>{$gallerytitle}</h3>{/if}
{if !empty($gallerycomment)}<div class="gallerycomment">{$gallerycomment}</div>{/if}
<div id="container">
{foreach from=$images item=image}
<a class="pics" href="#nogo" tabindex="1">{cms_module module="CGSmartImage" class="thumb" src=$image->thumb|replace:'/thumb':'thumb' alt=$image->titlename alias=vignettesGal}
<span>{cms_module module="CGSmartImage" src=$image->file alt=$image->titlename title=$image->titlename alias=grande}<br />{$image->comment}</span></a>
{/foreach}
</div></div>

css :

Code :

a, a:visited, a:hover {}
#container {position:relative; width:600px; height:700px; background:#aaa; border:1px solid #000; margin:10px auto; font-family:verdana, arial, sans-serif; font-size:12px;}
#container a.pics {float:left; padding:7px 21px; display:inline; color:#000; text-decoration:none; width:75px; height:75px; cursor:default;}
#container a.pics img.thumb {display:block; border:1px solid #000;}
#container a.pics span {display:none; border:0; width:580px; background:#bbb; border:1px solid #fff; text-align:center;font-size:0.875em;}
#container a.pics span img {margin:10px auto; border:1px solid #000;}
#container a.pics:hover {white-space:normal;}
#container a.pics:hover img.thumb {border:1px solid #fff;}
#container a.pics:hover span {display:block; position:absolute; left:9px; top:192px; z-index:10; height:500px;}
#container a.pics:active img.thumb {border:1px solid #fc0;}
#container a.pics:active span {display:block; position:absolute; left:9px; top:192px; z-index:5; height:500px;}
#container a.pics:focus {outline:0;}
#container a.pics:focus img.thumb {border:1px solid #fc0}
#container a.pics:focus span {display:block; position:absolute; left:9px; top:192px; z-index:5; outline:0; height:500px;}
#container span.info {clear:left; display:block; text-align:center; line-height:20px; margin:0; padding:200px 0 0 0; width:600px; text-align:center; color:#eee; z-index:1;}
#container span.info a {color:#000;}
#container span.info a:hover {text-decoration:none;}

Le src=$image->thumb|replace:'/thumb':'thumb' provient d'un léger bug (autrement affiche deux slashes dans le chemin du thumb).