Today I needed to write a pop up form that would show any image without any extra IE (or Firefox, Chrome, Safari, etc.) toolbars, etc. To get a web form to display an arbitrary image, I have a simple page that takes the URL of the image in the query string. The web form takes that string and uses it to set ImageUrl of an asp.image control.
photoviewer.aspx:
<%@ Page Language="C#" EnableViewState="false" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> private void Page_Load() { string file = Request.QueryString["file"]; if (file != null) myImage.ImageUrl = Server.UrlDecode(file); } </script> <html> <head> <title>My Image Viewer</title> </head><body> <form id="Form1" method="post" runat="server"> <table style="border:0;"> <tr> <td> <asp:Image runat="server" ID="myImage" EnableViewState="false" /> </td> </tr> <tr> <td> <input type="button" onclick="javascript: window.close();" value="close" /> </td> </tr> </table> </form> </body> </html>
To get rid of extra browser features and to size the popup, I call window.open() I set the height and width to values that will ensure that I have enough room for the image (I can use to get the dimensions of an image and add some buffer around the image so the popup isn’t all picture). I suppress status, toolbar, menubar. Location and scrollbars by setting them all to “0”.
feature_win.js
// declared outside of the scope of the function so it will persist on the page: var newWindow; function featureWin(height, width, url) { var lHeight = height; var lWidth = width; if (newWindow && !newWindow.closed) { newWindow.close() } newWindow = window.open(url, null, 'height=' + height + ',width=' + width + ',status=0,toolbar=0,menubar=0,location=0,scrollbars=0'); }
Here we put it all together.
default.html
<html> <head> <title>Test My Image Viewer</title> <script type="text/javascript" src="feature_win.js"></script> </head> <body> <a href="javascript: featureWin(825, 1050, 'photoviewer.aspx?file=Garden.jpg');"> Garden</a> </body> </html>
No comments:
Post a Comment