Load custom window with open.window function?

[Inny]

Im using the following script to resize and Automate thumbnails of user posted images on my forum. However I dont like the white background of the new window. Im wondering if its possible to launch the full size image in a customized window with a background image, such as

http://h1.ripway.com/Inny/ImageViewer.html

<script>
function ResizeThem() {
maxheight=250;
maxwidth= 250;
imgs=document.getElementsByTagName("img");
for (p=0; p<imgs.length; p++) {
if (imgs[p].getAttribute("alt")=="user posted image") {
w=parseInt(imgs[p].width);
h=parseInt(imgs[p].height);
if (parseInt(imgs[p].width)>maxwidth) {
imgs[p].style.cursor="pointer";
imgs[p].setAttribute('alt','Reduced Image - Click to see full size');
imgs[p].onclick=new Function("iw=window.open(this.src,'ImageViewer','resizable=1  ,scrollbars=1');iw.focus()");
imgs[p].height=(maxwidth/imgs[p].width)*imgs[p].height;
imgs[p].width=maxwidth;
}
if (parseInt(imgs[p].height)>maxheight) {
imgs[p].style.cursor="pointer";
imgs[p].onclick=new
Function("iw=window.open(this.src,'ImageViewer','resizable=1  ,scrollbars=1');iw.focus()");
imgs[p].width=(maxheight/imgs[p].height)*imgs[p].width;
imgs[p].height=maxheight;
}
}
}
}
ResizeThem();
</script>

so far I cannot find a way to make it possible. Any ideas?

[nagoon97]

Instead of opening the new image, open a HTML page and let that HTML page load the image.
There are a many ways to do this and if you can create the HTML page within the same domain, you may want to make use of the "opener" property to grab the image URL.
And if you cann't create the page within the same domain, pass the image URL as the query string as you will not have the permission to access the "opener" property due to the cross domain issues.

[Inny]

Thanks for your Reply, I can create the veiwing page on the same Domain, no problem, But I have no idea how to acheive what you have suggested. I have ver limited know how of javascript, I did not write the code above and took me hours just to figure out how to add scrollbars to the new window! lol

Perhaps you could create the idea for me, with commenting so I can understand How you do it?

Much appreciated!

url of veiwer page on same domanin

http://inny.ipbfree.com/index.php?act=Attach&type=post&id=1342

Note: This page should still open in a new browser rather than redirect the parent.
cheers

[nagoon97]

OK, so you have two HTML pages.
One(A), which you have the thumbnails and another(B), which should pop up when you click on the thumbnail.
In page (A), create a hidden field with ID "imgurl".
And when the user clicks on a thumbnail image, store the image's URL in there before opening (B).
In page (B), create an image object and then set the src property = window.opener.document.getElementById("imgurl").value

[Inny]

I understand That but not how to write it.....How do I create this Hidden feild and how do I do the rest with the code above? Its the code above the creates thumbnails. .....

[nagoon97]

Simply insert the following code to the HTML area of page (A) to add the hidden field.

<input type="hidden" id="imgurl">

And before popping the new window, you have to

document.getElementById("imgurl").value = [the image object].src;

And then, in page (B) place any image to be used as a place-holder.

<img src="someimage.jpg" id="palce_holder">

And then, add

window.onload = function(){document.getElementById("place_holder").src = window.opener.document.getElementById("imgurl").value;}

[Inny]

ok but where does

document.getElementById("imgurl").value = [the image object].src;

go? Where in the code please?

[Inny]

In page A i have

<input type="hidden" id="imgurl">

and in page b I have

<img src="someimage.jpg" id="place_holder">

and

<script>window.onload = function(){document.getElementById("place_holder").src = window.opener.document.getElementById("img url").value;}window.onload = function(){document.getElementById("place_holder").src = window.opener.document.getElementById("img url").value;}
</script>

But what about the other bits?

[nagoon97]

Hi Inny,

So, in page (A)
You will have

<input type="hidden" id="imgurl">
in the HTML area

imgs[p].onclick=new Function("document.getElementById('imgurl').value = this.src; iw=window.open('your html file name', blahblah...(rest of your code)
inside the script tag.

I noticed that you have two lines that go like
"imgs[p].onclick=new Function(..." in your source code.
You need to change both.

In page (B),
<img src="someimage.jpg" id="place_holder">
in the HTML area

window.onload = function(){document.getElementById("place_holder").src = window.opener.document.getElementById("imgurl").value;}
inside the script tag.

[Inny]

THankyou Nagoon !!!!! It works!

Thankyou for being so patient and Helpful,
Your kindness is appreciated Friend!!

:D

[Inny]

Could somebody Kindly Explain how To use this suggestion

And if you cann't create the page within the same domain, pass the image URL as the query string as you will not have the permission to access the "opener" property due to the cross domain issues.

[Inny]

Hello Anyone? I need to know how to do this please?
Either this or use a hidden floating div instead of a window.

[Inny]

Solved it myself!

[peter_budo]

Please share your solution

[Inny]

see reply this thread

http://www.daniweb.com/forums/newpostinthread119207.html