I got one problem during my project development. When I click on thumbnails to show image in pop up window, it does not appear in first click but on the second click it works. It only does work when the image exist is browser cache. And we had to show image on sigle click as per the client requirement. I got the solution and want to share with all of you. :)
Second requirement is that if image aspect ration is greater than 500 then reduce to 500.
<script type="text/javascript" language="javascript1.2">
var imgHeight;
var imgWidth;
function findHHandWW() {
imgHeight = this.width;imgWidth = this.width;return true;
}
function showImage(imgPath) {
var myImage = new Image();
myImage.name = imgPath;
myImage.onload = findHHandWW;
myImage.src = imgPath;
}
</script>
This is main code to get height and width of an image using javascript.
Now, I am giving complete code to how you will show pop up window after click on thumbnail image.
1. ThumbsNail.jsp
<html><head><title>Binod Java Solution</title></head>
<script type="text/javascript" language="javascript1.2">
var imgHeight;
var imgWidth;
var winHeight;
var winWidth;
function findHHandWW() {
imgHeight = this.width; imgWidth = this.width; return true;
}
function openWin(imgPath) {
var myImage = new Image();
myImage.name = imgPath;
myImage.onload = findHHandWW;
myImage.src = imgPath;
if(imgHeight>=500){imgHeight=500;}if(imgWidth>=500){imgWidth=500;}
winHeight = imgHeight + 60;winWidth = imgWidth + 30;
var url1="Image.jsp?myPath="+imgPath+"&hh="+imgHeight+"&ww="+imgWidth;
window.open(url1,"","width="+winWidth+",height="+winHeight+",status=yes,toolbar=no,
scrollbars=no,left=100,top=100");
}
</script>
<body>
<img src="c:\\Binod.JPG" height="85" width="85" onclick="openWin('c:\\Binod.JPG')" />
</body>
</html>
2. Image.jsp
<html><head><title>Binod Java Solution</title></head>
<script type="text/javascript">
function closeWin(){ window.close(); }
</script><body>
<%
String imagePath = request.getParameter("myPath");
String hh = request.getParameter("hh");
String ww = request.getParameter("ww");
%>
<img src="<%=imagePath%>" height="<%=hh%>" width="<%=ww%>" />
<center><input type="button" value="Close" onclick="closeWin()" /> </center>
</body>
</html>
Thursday, June 4, 2009
Subscribe to:
Post Comments (Atom)
Great coding, Sir!
ReplyDeletesometime this code doesnot work but any how good code to get image info without loading image in browser cache.
ReplyDeleteThis prakash here from visakhapatnam ur solutions are excellent man
ReplyDeleteHi Prakash, Thanks for your appreciation and hope you will keep watch on my blog and time to time give suggestion to enhance this blog.
ReplyDeleteThanks,
Binod Suman
http://binodsuman.blogspot.com
Hi Man really excellent job. Code is very useful. We can find the image height and widht using load the image in browser cache. Really great job. Keep it up. I am regulare visitor of your blog. Mike :)
ReplyDeleteGood solution thank you
ReplyDeleteAwesome solution Binod, works perfectly! This was a lifesaver, thanks so much.
ReplyDeleteAwesome solution Binod, works perfectly! This was a lifesaver, thanks so much.
ReplyDeleteGood solution thank you
ReplyDeletethis web-site so help ful for any modification coding any doubts send me
ReplyDeleteanil4ong@gmail.com
Thankfulness to my father who shared with me on the topic of this blog, this
ReplyDeleteweb site is genuinely awesome.
Feel free to visit my website: Green coffee info
I am trying to add image using asp.net upload control. Now before upload I want to make javascript validation of image size. i tried above solution but it did not worked. Also width and height are coming 0.
ReplyDeleteYou've got a typo in your title :P
ReplyDeleteThank you!!!
ReplyDelete