homepage Welcome to WebmasterWorld Guest from 54.204.64.152
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Using javascript variable to load enlargement when thumbnail is clicked
can't get this script to work
bigduffey




msg:1489953
 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




msg:1489954
 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




msg:1489955
 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




msg:1489956
 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!>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved