sridaran Posted August 14, 2009 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 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 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 Share Posted August 14, 2009 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> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.