conver to PHP

lukeurtnowski

I am trying to replicate,
http://www.nikelantiquedolls.com/profiles.php?id=29
so the same effect can be achieved (click on the thumbnail to switch the larger image on the left) but I want to change what happens when the larger image is clicked (instead of it going directly to the image, it will open up a lightbox image thing to create a pop-up type look) I wasn't sure which forum to ask this, but my guess is PHP is involved to do this (so if its easier we can do away with the javascript that currently there)
I know how to use the lightbox thing, but I don't know how to make it so that all the extra large images can be used once the large image on the left is changed.
Thanks...

big_nerd

lukeurtnowsky,

I am unsure of which lightbox app you are using, however the effect you wish can be achieved.

I am NOT a Javascript developer so there are many people better than I to answer, but I've noticed that there were no replies so here we go.

From what I can tell, when you click on the main Image, it attempts to open in a new window.

I can see you're using prototype, which I am not overly familiar with, so.

Basically instead of opening a new window on click - link directly to the large image. Assign the lightbox's preferred RE tag ("lightbox"), as in:

1) Add: rel="lightbox" to the <a id="xlarge" .... link:

<a rel="lightbox" id="xlarge" href="./i/doll29/thumb4_xlarge.jpg"><img alt="thumb1_large.jpg" src="http://www.nikelantiquedolls.com/i/doll29/thumb4_large.jpg" id="placeholder"></a>

2) Change your showPic to only update the LINK/href, NOT including the blankWindow javascript.

function showPic (whichpic) {
	//alert(whichpic.title);
	var img=whichpic.title.split(".");

var large_img=img[0]+"_xlarge.jpg";
//alert(large_img);
if (document.getElementById) {
	document.getElementById('placeholder').src = whichpic.href;
	if (whichpic.title) {
		//document.getElementById('xlarge').href = "JavaScript:blankWindow('i/"+large_img+"')";
		document.getElementById('xlarge').href = "./i/"+large_img+";
	}
	return false;
} else {
	return true;
}
}

I commented out the existing line and made the amendments to the code.

Be sure to add the title attribute to the <a id="xlarge" as well, in this case "Rare Antique French Pagoda Parasol"

I hope this is what you wanted..

Weedpacket

No; PHP is not involved: PHP runs on the server and never sees any of these "clicks" of which you speak - only HTTP requests.

Moving to the clientside forum.

lukeurtnowski

made those changes, but only the first image seems to work (the others stall out)
http://www.nikelantiquedolls.com/testprofiles.php?id=6
Can you see the problem?

big_nerd

likeurtnowski,

I can see the the issue from a client side.

When you hover over the large image you expect to lightbox - you will notice it links to thumb1_xlarge.jpg.

As you click through the other ones, the main (small) image changes but the file it actually links to does not.

in the file testjs.js

//document.getElementById('xlarge').href = "./i/"+large_img+";

Uncomment that line.

so the result is:

// swap image script + xlarge image href
function showPic (whichpic) {
	//alert(whichpic.title);
	var img=whichpic.title.split(".");

var large_img=img[0]+"_xlarge.jpg";
//alert(large_img);
if (document.getElementById) {
	document.getElementById('placeholder').src = whichpic.href;
	if (whichpic.title) {
		//document.getElementById('xlarge').href = "javascript:blankWindow('i/"+large_img+"')";
		document.getElementById('xlarge').href = "./i/"+large_img+";
	}
	return false;
} else {
	return true;
}
}

The "lightbox" script looks at the image that the link you are clicking on points to, thus that link must point to the image you want to display.