Welcome to WebmasterWorld Guest from 23.23.53.177

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

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

10+ Year Member



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;

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

WebmasterWorld Senior Member 10+ Year Member



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]

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

10+ Year Member



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";

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

WebmasterWorld Senior Member 10+ Year Member



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!>