sridaran Posted August 14, 2009 Report Share Posted August 14, 2009 Hi By clicking an image, it should open seperately like window in bigger size with close button on corner.Is it possible in javascript?I tried but its opening in pop-up window.I want image alone in seperate screen.Can anyone help to get this?R.Sridaran Link to comment Share on other sites More sharing options...
dsonesuk Posted August 14, 2009 Report Share Posted August 14, 2009 surely using:<a href="fullsizeimage.jpg" target="_blank"><img src="ThumbSizeImageOrResizedImage.jpg"></a>would produce the required result. Link to comment Share on other sites More sharing options...
sridaran Posted August 14, 2009 Author Report Share Posted August 14, 2009 Thanks for replying. This opens the image in a seperate pop-up window again. I need the image to be opened in bigger size with close button alone.R.Sridaran Link to comment Share on other sites More sharing options...
dsonesuk Posted August 14, 2009 Report Share Posted August 14, 2009 (edited) the only code, which might work for you is this one:Note: you have to get an image for the close button 20x20px.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">#dwindow{ position:absolute; left: 50px; top:50px; }#cframe {width: 100%; height: 100%; position:relative; z-index: 9000;}#toolbar { background-color:#0000FF; position:relative; z-index: 1000; text-align:right;}#toolbar img {margin: 2px;}#saver { width: 100%; }</style><script type="text/javascript">minuswidth=5;</script><!--[if IE]><script type="text/javascript">minuswidth=0;</script><![endif]--><script type="text/javascript">/*<![CDATA[*//*---->*/function loadwindow(url, width, height) { var popup=document.getElementById("dwindow"); popup.style.display=''; popup.style.width=width+"px"; popup.style.height=height+"px"; document.getElementById("cframe").src=url; document.getElementById("cframe").style.width=(width-minuswidth)+"px"; document.getElementById("cframe").style.backgroundColor="#ffffff";; }function closeit() { document.getElementById("dwindow").style.display="none"; }/*--*//*]]>*/</script> </head><body><!--<a href="java script:loadwindow('http://google.co.uk/',screen.width-30,screen.availHeight-30)">geocitices</a>--><a href="java script:loadwindow('myimage.gif',600,400)">Show PopImage</a><div id="dwindow" style="display:none;"> <div id="toolbar"><a href="java script: closeit()"><img src="close.gif" alt="Close" title="Close" /></a></div> <iframe id="cframe" src=""></iframe> <div id="saver"></div></div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> </body></html> Edited August 14, 2009 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now