Welcome to WebmasterWorld Guest from 54.224.13.210

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)

Inactive Member
Account Expired

 
 


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 27, 2003
posts:664
votes: 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]

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

Junior Member

10+ Year Member

joined:Dec 27, 2002
posts:125
votes: 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";

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 27, 2003
posts:664
votes: 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!>

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members