Member Avatar for newsteve

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!

  • 3 Contributors
  • 6 Replies
  • 224 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by newsteve
Member Avatar for Atli

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.

Member Avatar for newsteve

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.

Member Avatar for essential

Ok give me a moment!

Member Avatar for essential

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

Member Avatar for essential

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><br />
<a href="javascript:showMe();">View This Image</a><br />
<a href="javascript:switchImage('slideImg');">Play Slide Show &gt;</a><br />
<a href="javascript:clearTimeout(timerID);">Stop Slide Show &bull;</a><br />
<a href="javascript:prevImage('slideImg'); clearTimeout(timerID);">&laquo; previous</a>&nbsp;<a href="javascript:switchImage('slideImg'); clearTimeout(timerID);">next &raquo;</a>
</body>
</html>
Member Avatar for newsteve

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.