•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 361,617 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,152 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 2623 | Replies: 14 | Solved
 |
•
•
Join Date: Oct 2005
Posts: 236
Reputation: 
Rep Power: 3
Solved Threads: 4
Posting Whiz in Training
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
so far I cannot find a way to make it possible. Any ideas?
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?
Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields
W. C. Fields
•
•
Join Date: Mar 2008
Posts: 8
Reputation:
Rep Power: 0
Solved Threads: 2
Newbie Poster
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.
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.
•
•
Join Date: Oct 2005
Posts: 236
Reputation:
Rep Power: 3
Solved Threads: 4
Posting Whiz in Training
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?ac...e=post&id=1342
Note: This page should still open in a new browser rather than redirect the parent.
cheers
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?ac...e=post&id=1342
Note: This page should still open in a new browser rather than redirect the parent.
cheers
Last edited by Inny : Mar 12th, 2008 at 12:18 pm.
Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields
W. C. Fields
•
•
Join Date: Mar 2008
Posts: 8
Reputation:
Rep Power: 0
Solved Threads: 2
Newbie Poster
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
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
•
•
Join Date: Oct 2005
Posts: 236
Reputation:
Rep Power: 3
Solved Threads: 4
Posting Whiz in Training
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. .....
Last edited by Inny : Mar 12th, 2008 at 12:36 pm.
Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields
W. C. Fields
•
•
Join Date: Mar 2008
Posts: 8
Reputation:
Rep Power: 0
Solved Threads: 2
Newbie Poster
Simply insert the following code to the HTML area of page (A) to add the hidden field.
And before popping the new window, you have to
And then, in page (B) place any image to be used as a place-holder.
And then, add
<input type="hidden" id="imgurl">
document.getElementById("imgurl").value = [the image object].src;<img src="someimage.jpg" id="palce_holder">
window.onload = function(){document.getElementById("place_holder").src = window.opener.document.getElementById("imgurl").value;} Last edited by nagoon97 : Mar 13th, 2008 at 12:30 am.
•
•
Join Date: Oct 2005
Posts: 236
Reputation:
Rep Power: 3
Solved Threads: 4
Posting Whiz in Training
ok but where does
go? Where in the code please?
document.getElementById("imgurl").value = [the image object].src;go? Where in the code please?
Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields
W. C. Fields
•
•
Join Date: Oct 2005
Posts: 236
Reputation:
Rep Power: 3
Solved Threads: 4
Posting Whiz in Training
In page A i have
and in page b I have
and
But what about the other bits?
<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?
Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields
W. C. Fields
•
•
Join Date: Mar 2008
Posts: 8
Reputation:
Rep Power: 0
Solved Threads: 2
Newbie Poster
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.
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.
•
•
Join Date: Oct 2005
Posts: 236
Reputation:
Rep Power: 3
Solved Threads: 4
Posting Whiz in Training
THankyou Nagoon !!!!! It works!
Thankyou for being so patient and Helpful,
Your kindness is appreciated Friend!!
Thankyou for being so patient and Helpful,
Your kindness is appreciated Friend!!
Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields
W. C. Fields
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
Linear Mode
•
•
•
•
.net age amd asp blue gene chips custom database dell development dos drivers economy enterprise firefox graphics hardware ibm ibm. news intel intel ibm internet it linux memory microsoft mozilla news open open source open-source opengl openoffice pc ps3 recession red hat russia skin software source sun supercomputer supercomputing technology theme ubuntu vista windows x86
- Unresponsive script (DaniWeb Community Feedback)
- How to install slackware (Not as easy as MEPIS) (Getting Started and Choosing a Distro)
- I lack focus... (Java)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: if else statement using onclick
- Next Thread: Writing To div. Why wont this work?
