Targeting main window from an iframe

Sushifiend3000 · November 25th, 2004, 03:14 AM

First post. Hello, everyone.

I'd like to have users click on links in an inline frame that will change an image in the main window. Here's a preview of what I'm working on: http://pennington.cc/dcp/01_01.html.

I am trying to incorporate a "Javascript Image Gallery" as described on the A List Apart web site (http://www.alistapart.com/articles/imagegallery/) to do this, but I can't figure out how to modify it so that it passes the parameter from the iframe to the main window. Also, if someone has a better solution for doing this than that presented in the A List Apart article I'd be happy to take a look. Thanks.

joefawcett · November 25th, 2004, 05:17 AM

With client side script, assuming you just have one page with an inline frame, you first get a reference to the main window which is "top". You then get the image, the easiest way is if it has an id, "imgMain" for example, although you could use the document.images collection. You then pass the href of the full image. So in your iframe have an onclick on the small image:

Code:

<img src="myThumbImage1.jpg" onclick="showFullImage('myFullImage1.jpg');">

or if your fullimage is just the same image but with different height and width:

Code:

<img src="myThumbImage1.jpg" onclick="showFullImage(this.src);">

Then in you iframe script block:

Code:

function showFullImage(href)
{
  var imgFull = window.top.document.getElementById("imgMain");
  imgFull.src = href;
}

--

Joe (Microsoft MVP - XML)

ChrisScott · November 25th, 2004, 05:18 AM

Hi,

To reference the parent window, you can use window.parent. To use this, replace the line

Code:

document.getElementByID('placeholder').src = whichpic.href;

with

Code:

window.parent.document.getElementById('placeholder').src = whichpic.href;

n.b. document.getElementById not document.getElementByID

HTH,

Chris

vinod_yadav1919 · November 25th, 2004, 05:28 AM

Hi Sushified3000

Here is the solution for your question.

let say this code is ** mainpage.html***

<script>
function parentFunction(imagename)
{

parobj1=document.getElementById("divid");
newimg=document.getElementById("myimg");
newimg.src=imagename
newimg.height="440"
newimg.width="440"

}
</script>
<img src="images1.jpg" id="myimg" height=400 width=400 >

<iframe name="myiframe" src="iframe.html" width=500 height=50></iframe>

Then your Innner Frame "iframe.html" will be like this
<script>
function callParent(img_name)
{
window.parent.parentFunction(img_name)
}
</script>
<table><tr><td>
<a href="javascript:callParent('images1.jpg')">Image1 </a></td><td>
<a href="javascript:callParent('images2.jpg')">Image1 1</a></td><td>
<a href="javascript:callParent('images3.jpg')">Image1 11</a></td><td>
<a href="javascript:callParent('images4.jpg')">Image1 111</a></td><td>
<a href="javascript:callParent('images5.jpg')">Image1 11111</a></td><td>
</tr></table>

Another method is use to store Images in the Array then use JavaScript Function to call and show on your given Area
Hope This wiill help You.
Cheers :)

vinod

Sushifiend3000 · November 25th, 2004, 11:30 AM

Quote:

quote:Originally posted by vinod_yadav1919
Hi Sushified3000

Here is the solution for your question.

Thank you.

Sushifiend3000 · November 25th, 2004, 11:38 AM

Actually, one question: what is the purpose of the following line:

Quote:

quote:parobj1=document.getElementById("divid");

This variable is not referenced anywhere else in the script... ?

joefawcett · November 25th, 2004, 11:51 AM

I was going to ask but it seemed a bit churlish after he gave such a thorough answer :)

--

Joe (Microsoft MVP - XML)

Sushifiend3000 · November 25th, 2004, 11:58 AM

[quote]Originally posted by joefawcett
I was going to ask but it seemed a bit churlish after he gave such a thorough answer /quote]

Well, being somewhat of a newb I just want to make sure I'm not missing anything. :) For all I know that could've been the linchpin holding the entire script together!

joefawcett · November 25th, 2004, 02:38 PM

You're right, it's not needed. Possibly a remnant from when the function did extra stuff.

--

Joe (Microsoft MVP - XML)

vinod_yadav1919 · November 26th, 2004, 11:55 AM

Hi Sushifiend3000
I am really sorry when i was writing code for this demo.
Actually it's just extra stuff ,that is used for displaying in my JavaScript Game.
parobj1=document.getElementById("divid");
Offcourse u should remove that line
Cheers :)

vinod