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!
|
Join this webcast, to learn how the Rational Process Library can help with compliance issues, drive process improvement, and assist in service-oriented architecture (SOA) or Agile development. We will take a peek into the Rational Process Library with content around software and systems engineering (including RUP), operations and systems management, program and portfolio management, and asset and SOA governance.
FREE! Go There Now!
| | | |
You probably have thousands of lines of COBOL code loaded with business intelligence and being used to run your business, along with an army of developers maintaining these applications. Learn how to prepare your applications and developers so you can keep that competitive edge and move to a service-oriented architecture with the IBM Rational Enterprise Modernization solutions. Replay is available for 9 months.
FREE! Go There Now!
| | | |
WebSphere Process Server delivers a unique integration framework that simplifies existing IT resources. Often, as IT assets grow to support business demand, so too does their complexity and manageability. In this webcast, we’ll discuss how WebSphere Process Server helps deliver an SOA infrastructure that provides a common model to orchestrate, mediate, connect, map, and execute the underlying IT functions. Discover how WebSphere Process Server simplifies integration of business processes by leveraging existing IT assets as reusable services without the complexities of traditional integration methodologies.
FREE! Go There Now!
| | | |
Discover how IBM Rational AppScan Standard Edition can help you detext vulnerabilities in your web applications in the Web Application Security eKit. IBM Rational AppScan is a leading suite of automated web application security solutions that scan and test for common Web application vulnerabilities. The new Web Application Security eKit provides you with valuable resources, including white papers, demos, and additional information on the benefits of testing your Web applications.
FREE! Go There Now!
| | | |
Download a free trial version of IBM Rational Developer for System i V7.1, which provides a complete development environment for traditional i5/OS application development. IBM Rational Developer for System i is a new eclipse-based workstation offering for i5/OS application development that provides a comprehensive Integrated Development Environment for edit/compile/debug of traditional RPG/COBOL/C/C++ i5/OS applications.
FREE! Go There Now!
| | | |
As systems increase in complexity, communication between systems and software teams becomes more and more difficult. Now, there’s a way to improve product quality and communication.<br />Read the “Model Driven Systems Development” white paper to see how. Also included in this kit are more educational white papers, customer examples, tutorials, informative Webcasts, and best practices for designing, building and managing systems.<br />
FREE! Go There Now!
| | | |
Rational Modeling Extension for Microsoft .NET enhances usability for code generation supporting a more intelligent refactoring. The latest enhancements enable organizations with Java and .NET systems and software development maintain architectural integrity across heterogeneous platforms.
FREE! Go There Now!
| | | |
Join this Rational Talks to You teleconference on December 4 at 1:00 pm ET to discuss how Rational Method Composer can help meet your compliance objectives. Get your questions answered!
FREE! Go There Now!
| | | |
Learn the basics of the IBM Customer Information Control System (CICS). With a hands-on exercise, learn how to get your first CICS application up and running on your desktop using TXSeries V6.1 for Windows. The tutorial shows you how to download and install a free trial version of TXSeries V6.1.
FREE! Go There Now!
| | | |
The unprecedented scope of a service-oriented architecture (SOA) initiative brings to the forefront a number of management and governance issues that were sidestepped in the past. The key to a successful SOA implementation is managing and governing activities throughout the entire SOA delivery lifecycle by ensuring that services conform to the needs of all of the business’s stakeholders. Learn how service lifecycle management allows the business to ensure that the process by which services are defined, created, tested, deployed, optimized and retired is manageable, repeatable and auditable.
FREE! Go There Now!
| | | |
All FREE IBM® developerWorks Tools!
|
|
