...

View Full Version : Multiple slideshows with popup windows



xanti
06-05-2007, 02:31 PM
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')
}

glenngv
06-05-2007, 07:28 PM
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.

xanti
06-05-2007, 08:58 PM
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.

glenngv
06-05-2007, 09:42 PM
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>

xanti
06-05-2007, 10:05 PM
Aha!! Superb. Works a treat. Thank you so much Glenn! :D You're a real star.

xanti
06-05-2007, 10:12 PM
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.

glenngv
06-06-2007, 08:32 PM
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>

xanti
06-08-2007, 10:23 PM
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.

Arty Effem
06-11-2007, 02:46 AM
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)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum