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!
|
Building a software-as-a-service solution requires addressing a few key technical challenges. In this webcast, we'll focus on the role of IBM Tivoli Directory Server and WebSphere Portlet Factory in creating a Software as a Service solution. We will demonstrate how to use Tivoli Directory Server to prevent the user population of one tenant from accessing the virtual portal and portlet components of another tenant. We will also use the dynamic profile capability of WebSphere Portlet Factory to create multiple highly customized applications from one code base.
FREE! Go There Now!
| | | |
This whitepaper presents the benefits of successfully introducing static analysis into your organization using IBM Rational Software Analyzer. Additionally, it identifies some common pitfalls that can hinder the effective use of static analysis tooling as well as presents 10 simple strategies designed to help you quickly realize the value of static analysis using Rational Software Analyzer.
FREE! Go There Now!
| | | |
Visit IBM developerWorks to download IBM DB2 Express-C 9.5, a no-charge version of DB2 Express 9 database server. DB2 Express-C offers the same core data server base features as other DB2 Express editions and provides a solid base to build and deploy applications developed using C/C++, Java, .NET, PHP, and other programming languages.
FREE! Go There Now!
| | | |
Download a free trial version of IBM Rational Developer for System z, software that can help you deliver core development capabilities; the power of Java Platform, Enterprise Edition (Java EE); and rapid application development support to diverse enterprise application development teams. With comprehensive development tools to help create, deploy and maintain traditional enterprise and composite applications, Rational Developer for System z enables developers with different technical backgrounds to easily participate in important technology projects.
FREE! Go There Now!
| | | |
Secure your Web applications with IBM Rational AppScan Standard Edition V7.7, previously known as Watchfire AppScan. This Web application security testing tool automates vulnerability assessments and scans and tests for common Web application vulnerabilities. Visit IBM developerWorks to download a free trial of IBM Rational AppScan Standard Edition V7.7.
FREE! Go There Now!
| | | |
Learn from the best! Find out how developers use Rational ClearCase to be more flexible, innovative and deliver higher quality code in the Rational ClearCase Power Users eKit. This complimentary eKit provides a collection of materials, like articles, whitepapers, and demos that can help you become a power user of Rational ClearCase.
FREE! Go There Now!
| | | |
Learn how Rational Build Forge can extend a simple compile and package build process by adding customization and deployment capability. Go from a manual method to automating: checking for code changes; getting the latest source; compiling and packaging; customizing; copying to and restarting a deployment server; and sending e-mail notification that a new version is available.
FREE! Go There Now!
| | | |
Listen to this webcast to get an overview of Info 2.0 and a technical demo of how to quickly build an enterprise mashup. IBM's Info 2.0 technology leverages emerging Web 2.0 technologies such as mashups, feeds, AJAX, and JSON in order to simplify assembly of information using feeds and services. Come learn about the technical elements of Info 2.0 including the Feed Generation framework, Mashup Engine, and mashup assembly components. Learn how to pull information from databases, departmental information, and the Web to create mashups critical to your company’s success. We will also discuss best practices to help you get started.
FREE! Go There Now!
| | | |
Join this webcast to discover the key requirements for successful change and release management. Learn how to extend your .NET environment to improve productivity and collaboration, and address core problems afflicting team development. In this webcast, we’ll review typical challenges faced by customers and how to resolve them with the IBM Rational Change and Release Management solution, including Rational ClearCase, Rational ClearQuest and Rational Build Forge. Replay is available for 9 months.
FREE! Go There Now!
| | | |
The Eclipse community is constantly working to extend Eclipse's functionality. In this webcast, learn about some of the most important and feature-rich projects under development. From multi-language support to plug-in development, tune in to see what Eclipse is capable of now.
FREE! Go There Now!
| | | |
All FREE IBM® developerWorks Tools!
|
|
