javascript - change image of child window from parent window

hello,

i have a parent page with a bunch of photos. clicking on the first photo will lead to a new child window with a close-up of that photo AND from there you can cycle through all of the other photos from the previous page. Ive got the parent page and the child window page and the photo viewer working fine. What I want to do is to be able to do is have the same photo viewer window open up and display the particular photo that was originally clicked on (right now it always shows the first photo). I figure I should be able to talk to the child window through an 'onclick' and tell the child window to display 'so and so' image first, but I don't know how to communicate to the child window in this fashion...

in short, how can i change the image of a child window from the parent window?

thanks!

newsteve

Newbie Poster

7 posts since Aug 2007

Reputation Points: 10

Solved Threads: 0

3 Years Ago

You could try adding a "anchor" to the URL, passing the ID (or whatever) of the image you want displayed.

So, try opening a window with the URL formated like http://example.com/childWindow.html#5 , where 5 is the index of the photo you want viewed.

Then you can use "document.location.hash" to read the index and display the appropriate image.

Atli

Posting Pro

540 posts since May 2007

Reputation Points: 93

Solved Threads: 70

3 Years Ago

hmmmm.... this might work... but the thing is, i have currently built a picture viewer, that allows you to cycle through the images (done with javascript and arrays...). would your solution still allow for that? i basically want to open up the same picture viewer every time, but the first image on the viewer would be the one that you clicked on...

thanks!

You could try adding a "anchor" to the URL, passing the ID (or whatever) of the image you want displayed.

So, try opening a window with the URL formated like http://example.com/childWindow.html#5 , where 5 is the index of the photo you want viewed.

Then you can use "document.location.hash" to read the index and display the appropriate image.

newsteve

Newbie Poster

7 posts since Aug 2007

Reputation Points: 10

Solved Threads: 0

3 Years Ago

Ok give me a moment!

essential

Posting Shark

974 posts since Aug 2008

Reputation Points: 114

Solved Threads: 138

3 Years Ago

You can check it out later coz i have to write a new code for this 1.

essential

Posting Shark

974 posts since Aug 2008

Reputation Points: 114

Solved Threads: 138

3 Years Ago

Here you go!
Note:
That you must stop the slideShow 1st, before viewing the image.
Enjoy coding...

<html>
<head>
<title><!-- Sample --></title>

<script type="text/javascript">
<!--
var interval = 1500; 
var random_display = 0; 
//You'll have to replace this  with your own image directory.
var imageDir = "images/";
imageArray = [];
var imageNum = 0;
//Replace this with your images that you wish to be loaded.

imageArray[imageNum++] = new imageItem (imageDir + "02.jpg"); 
imageArray[imageNum++] = new imageItem (imageDir + "03.jpg"); 
imageArray[imageNum++] = new imageItem (imageDir + "04.jpg"); 
imageArray[imageNum++] = new imageItem (imageDir + "05.jpg");

var totalImages = imageArray.length;

function imageItem(image_location) 
{ this.image_item = new Image(); 
this.image_item.src = image_location; } 

function get_ImageItemLocation(imageObj) 
{ return(imageObj.image_item.src) }

function randNum(x, y) 
{ var range = y - x + 1; return Math.floor(Math.random() * range) + x; }

function getNextImage() 
{ if (random_display) 
{ imageNum = randNum(0,totalImages-1); } 
else { imageNum =(imageNum+1) % totalImages; }

var new_image = get_ImageItemLocation(imageArray[imageNum]);
return(new_image); 
}

function getPrevImage() 
{ imageNum = (imageNum-1) % totalImages; 
var new_image = get_ImageItemLocation(imageArray[imageNum]); return(new_image); 
}

function prevImage(place) 
{ var new_image =getPrevImage(); 
document[place].src = new_image; 
}

function switchImage(place) { var new_image = getNextImage(); 
document[place].src = new_image; 
var recur_call = "switchImage('"+place+"')"; 
timerID = setTimeout(recur_call, interval);}
function showMe()
{ var img = document.getElementById('slideImg');
window.open(img.src, target="_blank", 'toolbar = no, scrollbars = yes, location = no, width = 1000, height = 1000');
}

//-->
</script>

</head>
<body onLoad="switchImage('slideImg')">
<!-- You May Change the width and height as desired -->
<img name="slideImg" src="mylife.jpg" width="100" height="100" border=0>
<a href="javascript:showMe();">View This Image</a>
<a href="javascript:switchImage('slideImg');">Play Slide Show &gt;</a>
<a href="javascript:clearTimeout(timerID);">Stop Slide Show &bull;</a>
<a href="javascript:prevImage('slideImg'); clearTimeout(timerID);">&laquo; previous</a>&nbsp;<a href="javascript:switchImage('slideImg'); clearTimeout(timerID);">next &raquo;</a>
</body>
</html>

essential

Posting Shark

974 posts since Aug 2008

Reputation Points: 114

Solved Threads: 138

3 Years Ago

wow, looks good...
ill try this out tonight...
thanks!

newsteve

Newbie Poster

7 posts since Aug 2007

Reputation Points: 10

Solved Threads: 0

This article has been dead for over three months

You