We have all seen the standard JavaScipt image popups where you click on a thumbnail image to view a larger version. The problem typically with this is the window size that is opened. Either the person creating the popup links has to manually define every height and width of the popup window, or (as usually seen) it ends up opening in a window with incorect sizing. Not only can this be annoying, but with ASP.NET it is VERY EASY to avoid. Before I go any further, if you would like to see a worki ...We have all seen the standard JavaScipt image popups where you click on a thumbnail image to view a larger version. The problem typically with this is the window size that is opened. Either the person creating the popup links has to manually define every height and width of the popup window, or (as usually seen) it ends up opening in a window with incorect sizing. Not only can this be annoying, but with ASP.NET it is VERY EASY to avoid. Before I go any further, if you would like to see a working demo of this, jump on over to the Screen Shot page at www.dotNetBB.com to view the end result in action.[bold]Getting Started[/bold]The first step creating your image popups is to build your thumnail page. There are many ways of automating this, but I'll leave that for another tutorial later. For now I will create a simple static page with just a single image.[bold]thumbs.htm[/bold]
<html>
<head>
<title>JavaScript Image Popup's Done Right</title>
<script language=javascript>
<!--
//------- popImg() ---------------------------------------
//-- Input : (iName) - the name of the large image to be shown in the popup
//-- Options : (pInfo) - These are for the base window settings when opened
//--------------------------------------------------------------
function popImg(iName) {
var pURL='pop.aspx?pi='+iName;
pInfo='toolbar=0,';
pInfo+='location=0,';
pInfo+='directories=0,';
pInfo+='status=0,';
pInfo+='menubar=0,';
pInfo+='scrollbars=0,';
pInfo+='resizable=1,';
pInfo+='width=200,';
pInfo+='height=200';
window.open(pURL, 'bigPop', pInfo);
}
//-->
</script>
</head>
<body>
Click the thumbnail for a larger image.
<a href="javascript:popImg('bigimg.gif');"><img src="smallimg.gif" border="0"></a>
</body>
</html>
[bold]The Dynamic Window[/bold]If you take a quick look back at the thumbs.htm code, looking at the JavaScript function, the variable pURL is pointing to 'pop.aspx' with a querystring on the end. This querystring being passed to the pop.aspx page is the name of the larger image you want to show in the popup. In pop.aspx the physical path to the image is defined in the variable "imagePath". The function getImagePop() creates the image tag and the JavaScript to resize the window. [bold]pop.aspx[/bold]
<%@ Page Language="vb" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Imaging" %>
<%@ Import Namespace="System.IO" %>
<script runat="server">
sub page_load
'-- The default text if no querystring is passed.
wPanel.Text = "Requested image does not exist"
'-- first check to see if a querysting is present
If Request.QueryString IS String.Empty Then
'- do nothing
Else
wPanel.Text = getImagePop(Request.QueryString("pi"))
End If
end sub
'-- This grabs the image size from the file information and resizes the window
Function getImagePop(ByVal imageName As String) As String
'-- The StringBuilder class for better string concatenation performance.
Dim iStr As New StringBuilder("")
'-- The image width
Dim iH As Integer = 0
'-- The image height
Dim iW As Integer = 0
'-- The path to your larger images
Dim imagePath As String = "/aspfree/images/"
'-- check to see if the image exists
If File.Exists(Server.MapPath(imagePath + imageName)) = True Then
Dim ti As System.Drawing.Image = ti.FromFile(Server.MapPath(imagePath + imageName))
'-- Get the height and width and add 40px of padding
iH = ti.Height + 40
iW = ti.Width + 40
'-- Create the image tag and the JavaScript resize code
iStr.Append("<div align=""center"">")
iStr.Append("<img src=" + Chr(34) + imagePath + imageName + Chr(34))
iStr.Append(" alt=""Big Popup Image"" title=""Big Popup Image"" border=""0""></div>")
iStr.Append("<script language=javascript>" + vbCrLf)
iStr.Append("<!--" + vbCrLf)
iStr.Append("window.resizeTo(" + iW.ToString + "," + iH.ToString + ");" + vbCrLf)
iStr.Append("-->" + vbCrLf)
iStr.Append(Chr(60) + "/script" + Chr(62) + vbCrLf)
Else
iStr.Append("Whoops... I don't quite know what you were expecting to see here.")
End If
'-- Convert the StringBuilder to a String and return the value.
Return iStr.ToString
End Function
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Image Popup</title>
</head>
<body topmargin="0" marginheight="0" leftmargin="0" marginwidth="0">
<asp:Literal ID="wPanel" Runat="server" />
</body>
</html>
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
More ASP.NET Code Articles
More By Andrew_Putnam  developerWorks - FREE Tools!
|
This demonstration gives you an overview of IBM® Rational® Build Forge Express Edition, a global offering that provides a framework to automate and execute software processes. Rational Build Forge provides a software assembly line that can support all of your tools, technologies, and platforms so you can achieve a repeatable, reliable, and traceable build and release process.
FREE! Go There Now!
| | | |
Achieving true agility is a never-ending effort. We will showcase how you can become agile incrementally, a few practices at the time.Which practices should any agile team strive to adopt? What additional practices should you consider based on your needs to scale? Adopting practices are however made much easier with the right tool support. What about if your tools adapt to your practices? We will take a look at how the Jazz technology can be leveraged to make your process change the behavior of your tools.
FREE! Go There Now!
| | | |
In this five-part "Building a grid system using WS-Resource Transfer" series, we look at the use of WS-Resource Transfer (WS-RT) in different areas of the grid environment -- from using it as a method for storing and recovering general information about grid-to-grid monitoring and management, and security. We also examine how WS-RT can be used for the distribution and division of work. In any grid, there is a huge amount of metadata about the grid that needs to be stored and distributed. Using WS-RT makes sharing the information, especially the precise information required by different systems in the grid, significantly easier. Here in Part 4, we look at both sides of the security session, both in terms of using WS-RT as an aid to the authorization process and at combining WS-Security with WS-RT for secure resource exchange.
FREE! Go There Now!
| | | |
CakePHP is a stable production-ready, rapid-development aid for building Web sites in PHP. This "Cook up Web sites fast with CakePHP" series shows you how to build an online product catalog using CakePHP.
FREE! Go There Now!
| | | |
Download the Rational Application Developer (RAD) v7.5 open beta code and start developing applications for the JEE5 standard which features EJB3.0, JPA, JSF 1.2, JSP 2.1 and Servlet 2.5 standards. When you use this beta you will see how you can increase developer productivity for already existing applications with improved support for refactoring, as well as adding new features to existing applications. In addition, the beta provides tooling for JD Edwards, Oracle, SAP, Siebel and PeopleSoft to improve the developer productivity with these enterprise systems.
FREE! Go There Now!
| | | |
JavaServer Faces (JSF) technology, a server-side framework that offers a component-based approach to Web user-interface development, has come a long way. JSF 1.2 (incorporated into Java Enterprise Edition 5) has fixed some JSF pain points and added some nice features. This tutorial series covers how to get started with JSF 1.2. It's heavy on examples and light on theory -- just what you need to get started quickly.
FREE! Go There Now!
| | | |
Join this Rational Talks to You teleconference on November 29 at 1:00 pm ET to participate in an interactive discusssion with Grady Booch around architecture and reuse. Get your questions answered!
FREE! Go There Now!
| | | |
Get a free trial download of the latest version of IBM Rational Method Composer V7.2 which helps you deliver customized yet consistent process guidance to your project teams and IT organization, and includes the latest version of IBM Rational Unified Process (RUP), which has provided process guidance to teams since 1996.
FREE! Go There Now!
| | | |
Learn how IBM Rational Tester for SOA Quality addresses IBM WebSphere MQ with Web services. You get hands-on experience in creating a test, handling the WebSphere MQ series protocol, configuring the test, and then replaying it.
FREE! Go There Now!
| | | |
Viper 2 brings a great value to developer communities including SQL, XML, PHP, Ruby, .NET and Java. You probably already know that DB2 Express-C is free for developers to develop, deploy and distribute. Viper 2 provides a variety of means that help move your application from the development stage to deployment more rapidly. This webcast shows how to best utilize the latest tools available for developing DB2 applications.
FREE! Go There Now!
| | | |
All FREE IBM® developerWorks Tools!
|
|
