How do you properly pop up a thumnail image on its own?

forsakenpurity

03-11-2005, 01:27 AM

I'm extremely new to Javascript and managed to get the coding to do *almost* what I wanted it to do, which is have an image thumbnailed, be able to click on it and have it open as just the image, instead of in a seperate browser window.

What I seem to have gotten wrong is where it's pointing to for the pop-up image. Instead of popping up a larger version of the small image, it's popping up a smaller version of the website itself.

URL: www.enchantedcattery.com

In the head:

<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="index/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Popup Window Image Preview</title>
<script language="javascript">

</script>

In the body:

<p><a href="javascript:selectWin('index.html?image=coopers_small.jpg&height=276&width=500',276,500)"><img

border="0" src="coopers_big.jpg" alt="coopers_small.jpg" " width="100" height="55"></a></p>

If there's something missing that I should be posting along with the question, please let me know. I've never worked within a forum environment before.

Thank you for your time,

-forsaken.

_Aerospace_Eng_

03-11-2005, 02:42 AM

hmm you may interested in this thread http://www.codingforums.com/showthread.php?t=53902

hemebond

03-11-2005, 05:19 AM

It's not pretty, but I'm getting better.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>54187</title>
<style type="text/css">
#photoBox
{
position:absolute;
top:10em;
left:10em;

padding:1em;
border:1px solid #000;
background-color:#eee;
}
#photoBox img
{
border:1px solid #000;
}
</style>
</head>
<body>
<ul id="thumbnails">
<li><a href="/images/1.jpeg"><img src="/images/1.jpg" alt=""></a></li>
<li><a href="/images/2.jpeg"><img src="/images/2.jpg" alt=""></a></li>
<li><a href="/images/3.jpeg"><img src="/images/3.jpg" alt=""></a></li>
</ul>

<script type="text/javascript">
var photoBox = new PhotoBox();

var images = document.getElementById('thumbnails').getElementsByTagName('img');
for(var i = 0, len = images.length; i < len; i++)
{
images[i].parentNode.onclick = function(){photoBox.open(this.getAttribute('href'));return false};
}

function PhotoBox(url)
{
var self = this;
var image = null;
var element = null;

this.open = function (url)
{
if(url == null)
{
return;
}

if(self.element == null)
{
self.element = createWindow(url);
}

self.setImage(url);
}

this.close = function ()
{
self.element.parentNode.removeChild(self.element);
self.element = null;
}

this.setImage = function (url)
{
self.image.src = url;
}

function createImageElement(url)
{
var img = document.createElement('img');
img.setAttribute('src',url);
return img;
}

function createWindow(url)
{
self.image = createImageElement(url);

var div = document.createElement('div');
div.setAttribute('id','photoBox');
div.onclick = self.close;

div.appendChild(self.image);

document.body.appendChild(div);

return div;
}
}
</script>
</body>
</html>

forsakenpurity

03-11-2005, 12:31 PM

Now I'm horribly confused. Was my original script not the right script to be using?

Even with the script you've posted, I know I'm still doing something wrong, because it's still popping up with a smaller version of the website, rather than enlarging the thumnail in it's own window.

-forsaken

_Aerospace_Eng_

03-11-2005, 12:47 PM

not neccessarily wrong just maybe better ones, but if u still wanna use ur script, try this, add the stuff in red
<a href="javascript:selectWin('index.html?image=coopers_small.jpg&height=276&width=500','276','500')">

forsakenpurity

03-11-2005, 01:26 PM

I really appreciate your help.

I still seem to be having the trouble, though. Am I pointing to the site instead of the picture at all?

-forsaken

_Aerospace_Eng_

03-11-2005, 07:17 PM

this is the reason why we referred you to other scripts because linking to an image directly can cause problems because linking directly to an image without resizing anything which is what those other scripts do, you will just get the image and a lot of white space, but this is what i get when i go to the location that i think should be your image http://www.enchantedcattery.com/index.html?image=coopers_small.jpg&height=276&width=500