Multiple slideshows with popup windows

I'm putting together an online shop for a friend and am trying to implement 'slideshows' of a couple of images for each product, triggered by previous/next buttons, with each image capable of triggering a popup window containing a larger version of the image when clicked on.

I've spent days trawling through scripts and can't find anything that fits the bill. I found what looks to be a good but huge script at www.barelyfitz.com but it's way over the top for my needs and too complex for my basic knowledge to work out what I need to add and take away. I found another nice short script that does exactly what I want except that I can't have more than one instance of it on a page. I managed to adapt scripts so that I've got a whole series of slideshows that trip through their images fine and trigger empty(!) popup windows. I've tried all sorts of things, but I can't work out what to add to the script to get the popup window to display the larger image.

The script below is pared back to its basic building blocks minus any of my attempts to create the link to the larger image. Can anyone tell me what to add to get the larger images into the popup windows, or point me in the direction of a better script?

HTML:
<div>
<a href="javascript:popupWindow();"><img src="../images/img1_sm.jpg" alt="Click image to enlarge" name="products1" /></a>
</div>

<br />

<div>
<a onmouseover="changeimage('button1',selector2)" onclick="changeimage('products1',img1)" onmouseout="changeimage('button1',selector1)"><img src="../images/prev_off.gif" width="10" height="14" alt="image selector button" name="button1" border="0" /></a>
<a onmouseover="changeimage('button2',selector4)" onclick="changeimage('products1',img2)" onmouseout="changeimage('button2',selector3)"><img src="../images/next_off.gif" width="10" height="14" alt="image selector button" name="button2" border="0" style="padding-left:10px" /></a>
</div>


Javascript (in separate .js file):
selector1 = new Image(10,14);
selector1.src = "../images/prev_off.gif";
selector2 = new Image(10,14);
selector2.src = "../images/prev_on.gif";
selector3 = new Image(10,14);
selector3.src = "../images/next_off.gif";
selector4 = new Image(10,14);
selector4.src = "../images/next_on.gif";

img1 = new Image(180,249);
img1.src = "../images/img1_sm.jpg";
img2 = new Image(150,280);
img2.src = "../images/img2_sm.jpg";
[etc]

function changeimage (imgTagName,imgObj)
{
if (document.images)
{
document.images[imgTagName].src = imgObj.src
}
}

function popupWindow(url) {
window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars =no,resizable=yes,copyhistory=no,width=450,height=600,screenX=150,screenY=150,top=150,left=150')
}

Use this script (http://www.codingforums.com/showthread.php?t=9836) (post #2) and then change the links to:
<div>
<a href="../images/img1_big.jpg" onclick="popImg(this.href); return false;"><img src="../images/img1_sm.jpg" alt="Products 1 image" title="Click image to enlarge" name="products1" /></a>
</a>
</div>Change the large image src accordingly.

Thanks for your help Glenn.

Would I be right in thinking though that this will produce a popup window of the larger version of img1, but NOT img2 when that's swapped for img1? (I can't see any reference to a call to the url for img2's larger version.)

What I was trying to do with the code above was find some way of specifying the url for the big version of the image and associating it with the imgTagName, eg. by adding a line like

img2.url = "../images/img2_lg.jpg";

after the img2.src statement, and another statement to the changeimage function to create the association, which could then somehow find its way into the popup window code, but my knowledge of Javascript syntax is way inadequate. I don't know if that's possible? But what I need is some code that's going to produce a popup window for whichever img of each product pair has been selected to view.

Since you have a naming pattern for small and large images, then you can just replace "sm" with "lg" in the filename.
<div>
<a href="#" onclick="popImg(this.getElementsByTagName('img')[0].src.replace('_sm.jpg', '_lg.jpg')); return false;"><img src="../images/img1_sm.jpg" alt="Products 1 image" title="Click image to enlarge" name="products1" /></a>
</div>

Aha!! Superb. Works a treat. Thank you so much Glenn! :D You're a real star.

One more question, Glenn.

Is it possible to add a line or two of code to pick up a title for the popup window from somewhere? Ideally it would be the product name.

Try this. Not tested though.
function popImg(imageURL, imgTitle) {
var imgWin = window.open('about:blank','imgWin','width=200, height=200, left=100, top=100');

with (imgWin.document) {
writeln('<html><head><title>Loading...</title>');
writeln('<style type="text/css"><!-- body { margin: 0px; } --></style></head>');
writeln('<body onload="self.focus();"><img id="pic" style="display:none" /></body></html>');
close();
}
var img = new Image();
img.onload = function() { sizeImgWin(imgWin, img, imgTitle) };
img.src = imageURL;
}

function sizeImgWin(win, img, imgTitle) {
var new_w = img.width;
var new_h = img.height;
var old_w = win.innerWidth || win.document.body.offsetWidth;
var old_h = win.innerHeight || win.document.body.offsetHeight;
if (!new_w) { new_w = old_w; }
if (!new_h) { new_h = old_h; }
new_w -= old_w; new_h -= old_h;
win.resizeBy(new_w,new_h);
win.document.title = (imgTitle) ? imgTitle : img.src.substring(img.src.lastIndexOf("/")+1); //title defaults to image filename if title is not specified
var pic = win.document.getElementById('pic');
pic.src = img.src;
pic.style.display = 'block';
}

var imgs = [];
imgs['products1'] = new Array();
imgs['products1'][0] = {small:"../images/img1_sm.jpg", big:"../images/img1_lg.jpg", desc:"This is image 1."};
imgs['products1'][1] = {small:"../images/img2_sm.jpg", big:"../images/img2_lg.jpg", desc:"This is image 2."};
//...and so on

function changeimage (imgTagName,imgIndex)
{
if (document.images)
{
var img = document.images[imgTagName];
var imgObj = imgs[imgTagName][imgIndex];
img.src = imgObj.small;
//set onclick handler of the link
img.parentNode.onclick = new Function('popImg("' + imgObj.big + '","' + imgObj.desc.replace(/\"/g, \\\") + '"); return false;');
}
}

<div>
<a href="../images/img1_lg.jpg" onclick="popImg(imgs['products1'][0].big, imgs['products1'][0].desc); return false;"><img src="../images/img1_sm.jpg" alt="This is image 1." title="Click image to enlarge" name="products1" /></a>
</div>

<div>
<a onmouseover="changeimage('button1',selector2)" onclick="changeimage('products1', 0)" onmouseout="changeimage('button1',selector1)"><img src="../images/prev_off.gif" width="10" height="14" alt="image selector button" name="button1" border="0" /></a>
<a onmouseover="changeimage('button2',selector4)" onclick="changeimage('products1', 1)" onmouseout="changeimage('button2',selector3)"><img src="../images/next_off.gif" width="10" height="14" alt="image selector button" name="button2" border="0" style="padding-left:10px" /></a>
</div>

Thanks Glenn. I had a go with this but the popup windows stopped being popup windows. They opened as full windows. I guess I wasn't doing something quite right. However I found an earlier adjustment of this script you posted here (http://www.codingforums.com/showthread.php?t=43073) which worked fine. Except in Safari, which resolutely insists the window is untitled.

Is it possible to stop IE and Firefox from inserting the site URL before the title? It's frustrating because the URL takes up pretty much all the available space, pushing most of the title out of view.

I'm putting together an online shop for a friend and am trying to implement 'slideshows' of a couple of images for each product, triggered by previous/next buttons, with each image capable of triggering a popup window containing a larger version of the image when clicked on.
Does this come anywhere close to your specification? Link (http://www.hotspot.freeserve.co.uk/scripterlative?popslide)