I've added two things to my detailed images popup.
1. Alt text displaying at the top of the image
2. Pagination or (1 or 4) displaying at the bottom of the image.
You can see an example at
http://www.aerostich.com/product.php?productid=16818
Here is my product_images.tpl
Code:
{***
# Detailed Images Popup
# Version 2.1
# http://www.cart-lab.com
#
info@cart-lab.com
# (C)opyright 2003-2004 CartLab, all rights reserved.
# Full license at: http://www.cart-lab.com/license.php
***}
{if $images ne ""}
{ config_load file="$skin_config" }
<html>
<head>
<title>Detailed Image(s) - {$lng.txt_site_title}</title>
{include file="meta.tpl"}
<link rel="stylesheet" href="{$SkinDir}/{#CSSFile#}">
<SCRIPT language=JavaScript1.2>
<!--
// Initial Resize
var h = {$images[0].image_y}+{if $images[1].imageid ne ""}100{else}50{/if};
var w = {$images[0].image_x}+50;
// make sure size isn't bigger than users screen
{literal}
if(h>=screen.height) {
h=screen.height-30;
}
if(w>=screen.width) {
w=screen.width;
}
{/literal}
window.resizeTo(w,h);
// Vars
var photos=new Array()
var photos_width=new Array()
var photos_height=new Array()
var photos_alt=new Array()
var which=0
// Images
{section name=image loop=$images}
photos[{%image.index%}]="{$xcart_web_dir}/product_image.php?imageid={$images[image].imageid}"
photos_width[{%image.index%}]="{$images[image].image_x}"
photos_height[{%image.index%}]="{$images[image].image_y}"
photos_alt[{%image.index%}]="{$images[image].alt}"
{/section}
{literal}
var preloadedimages=new Array()
for (i=0;i<photos.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=photos[i]
}
function applyeffect(){
if (document.all && photoslider.filters){
photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
photoslider.filters.revealTrans.stop()
photoslider.filters.revealTrans.apply()
}
}
function playeffect(){
if (document.all && photoslider.filters)
photoslider.filters.revealTrans.play()
}
function backward(){
if (which>0){
which--
} else {
which=photos.length-1;
}
applyeffect()
pagenumber = which + 1;
document.images.photoslider.src=photos[which];
document.all.photosalt.innerHTML=photos_alt[which];
document.all.page.innerHTML=pagenumber+" of "+photos.length;
newWidth=parseInt(photos_width[which])+50;
newHeight=parseInt(photos_height[which])+100;
if(newHeight>=screen.height) {
newHeight=screen.height-30;
}
if(newWidth>=screen.width) {
newWidth=screen.width;
}
window.resizeTo(newWidth,newHeight)
playeffect()
}
function forward(){
if (which<photos.length-1){
which++;
} else {
which=0;
}
applyeffect()
pagenumber = which + 1;
document.images.photoslider.src=photos[which];
document.all.photosalt.innerHTML=photos_alt[which];
document.all.page.innerHTML=pagenumber+" of "+photos.length;
newWidth=parseInt(photos_width[which])+50;
newHeight=parseInt(photos_height[which])+100;
if(newHeight>=screen.height) {
newHeight=screen.height-30;
}
if(newWidth>=screen.width) {
newWidth=screen.width;
}
window.resizeTo(newWidth,newHeight)
playeffect()
}
function print_index(){
alert(which);
}
//-->
</script>
{/literal}
</head>
<body LEFTMARGIN=0 TOPMARGIN=0 RIGHTMARGIN=0 BOTTOMMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<TABLE WIDTH="100%" HEIGHT="100%" CELLPADDING=0 CELLSPACING=0 BORDER=0><TR><TD align="center">
<table border="0" cellspacing="0" cellpadding="0">
{if $images[1].imageid ne ""}
<tr>
<td width="20%" height="21" onClick="javascript:backward();return false;" style="cursor:pointer;cursor:hand;" onMouseOver="'"><p align="left">[img]{$ImagesDir}/larrow.gif[/img] Previous</td>
<td align="center"><div id="photosalt"><script>document.write(photos_alt[0])</script></div></td>
<td width="20%" height="21" onClick="javascript:forward();return false;" style="cursor:pointer;cursor:hand;"><p align="right">Next [img]{$ImagesDir}/rarrow.gif[/img]</td>
</tr>
{/if}
<tr>
<td width="100%" colspan="3" height="22" align="center"><center><A HREF="javascript:window.close();">
{literal}
<script>
document.write('[img]'+photos[0]+'[/img]')
</script>
{/literal}
</center></a></td>
</tr>
{if $images[1].imageid ne ""}
<tr>
<td width="20%" height="21" onClick="javascript:backward();return false;" style="cursor:pointer;cursor:hand;" onMouseOver=""><p align="left">[img]{$ImagesDir}/larrow.gif[/img] Previous</td>
<td><div id="page" style="text-align: center;"><script>document.write('1 of '+photos.length);</script></div></td>
<td width="20%" height="21" onClick="javascript:forward();return false;" style="cursor:pointer;cursor:hand;"><p align="right">Next [img]{$ImagesDir}/rarrow.gif[/img]</td>
</tr>
{/if}
</table>
</TD></TR></TABLE>
</body>
</html>
{else}
No Image(s) Found!
{/if}