Using javascript variable to load enlargement when thumbnail is clicked

Forum Moderators: open

Message Too Old, No Replies

Using javascript variable to load enlargement when thumbnail is clicked

can't get this script to work

bigduffey

3:25 am on May 11, 2003 (gmt 0)

I am having a problem with this JS code. This code works when I put the actual name of the image file ex"randoMe_big", but I want to be able to open any of the images in that folder. Basicaly what ever link that they click on will load the specified image. I have a page with a group of images each thumbnail links to the same HTML page with this JS code.. Ex code on other page <a href="imageexpanded.html?name=randoMe_big" , Where the name=randoMe_big" would be any other link.. thanks--Bigduffey

this is the code for the imageexpanded.html
<img name="imagemain" src="">
</body>
</html>
<script language="JavaScript" type="text/javascript">
var test=new Image();
test.src="images_europe/" + "randoMe_big" + ".jpg";
document.images.imagemain.src=test.src;

ShawnR

8:43 am on May 11, 2003 (gmt 0)

Hi bigduffey & welcome to WebmasterWorld!

Note that setting the image src will not change the size of your image. Since you didn't specify it in your <img...> tag, and you didn't specify an image, perhaps it is 0x0, so when you change the src you still don't see it. If all you images are the same size, try set the height and width properties in the <img...> tag, or show one of the pictures as default. (If all your images are not the same size, then once you get this working, you will need to add more code to adjust the height or width, else you images will distort)

Note that you don't need the "new image", you can just do:

.....imagemain.src="images_europe/" + "randoMe_big" + ".jpg";

Shawn

<Added: Oops, scratch that. You don't need to set the size>

[edited by: ShawnR at 10:16 am (utc) on May 11, 2003]

HocusPocus

8:57 am on May 11, 2003 (gmt 0)

Is it something like this you require?

var img_name= "not-found-image";

var the_arg = window.location.search.substring(1,5);
// read the first 4 characters after the? of the URL

if (the_arg == "name")
{
img_name= window.location.search.substring(6);
// get the name of the image, ie the chars after the 'name='
}

document.images.imagemain.src="images_europe/" + img_name + ".jpg";

ShawnR

10:02 am on May 11, 2003 (gmt 0)

I assumed you meant something along the lines of:

<html>
<head>
<script language="JavaScript" type="text/javascript">
function show_me(pic_name) {
document.pic1.src = "filepath/" + pic_name +".jpg";
}
</script>
</head>
<body>
<a class="button" href="javascript:show_me(pic1');">Pic1</a>
<a class="button" href="javascript:show_me('pic2');">Pic2</a>
<a class="button" href="javascript:show_me('pic3');">Pic3</a>
<img name="pic1" src=""/>
</body>
</html>

<added: Oops. I think HocusPocus understood what you were after better!>