homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
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

10+ Year Member

Msg#: 400 posted 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="">
<script language="JavaScript" type="text/javascript">
var test=new Image();
test.src="images_europe/" + "randoMe_big" + ".jpg";



WebmasterWorld Senior Member 10+ Year Member

Msg#: 400 posted 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";


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

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


10+ Year Member

Msg#: 400 posted 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";


WebmasterWorld Senior Member 10+ Year Member

Msg#: 400 posted 10:02 am on May 11, 2003 (gmt 0)

I assumed you meant something along the lines of:

<script language="JavaScript" type="text/javascript">
function show_me(pic_name) {
document.pic1.src = "filepath/" + pic_name +".jpg";
<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=""/>

<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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved