Member Avatar for 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?

Edited by happygeek because: fixed formatting
  • 3 Contributors
  • 14 Replies
  • 311 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by Inny

Recommended Answers

All 14 Replies

Member Avatar for 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.

Member Avatar for 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

Member Avatar for 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

Member Avatar for 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. .....

Member Avatar for 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;}
Member Avatar for Inny

ok but where does

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

go? Where in the code please?

Member Avatar for 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?

Member Avatar for 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.

commented: One Of the Most Helpful Members I have Met on Daniweb! Well done Nagoon! This member is patient and kind and very skillfull! +3
Member Avatar for Inny

THankyou Nagoon !!!!! It works!

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

:D

Member Avatar for 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.

Member Avatar for Inny

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

Member Avatar for Inny

Solved it myself!

Member Avatar for peter_budo

Please share your solution

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.