ASP.NET Code
  Home arrow ASP.NET Code arrow JavaScript Image Popup's Done Right
ASP Free Forums 
.NET  
ASP  
ASP Code  
ASP.NET  
ASP.NET Code  
BrainDump  
C#  
Code Examples  
Database  
Database Code  
IIS  
Microsoft Access  
MS SQL Server  
Silverlight  
Visual Basic.NET  
Windows Scripting  
Windows Security  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
ASP Web Hosting  
ASP.NET Web Hosting 
Windows Web Hosting
 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
ASP.NET CODE

JavaScript Image Popup's Done Right
By: Andrew_Putnam
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 3 stars3 stars3 stars3 stars3 stars / 22
    2002-11-30

    Table of Contents:

    Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    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>

    I Hope you found this helpful. Comments can be sent to Andrew@dotNetBB.com.
    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

     

    IBM® developerWorks developerWorks - FREE Tools!


    NEW! Addressing software-as-a-service challenges using Tivoli security and WebSphere solutions

    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!


    NEW! Best practices for software analysis: An introduction to the IBM Rational Software Analyzer application

    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!


    NEW! Download DB2 Express-C 9.5

    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!


    NEW! Download IBM Rational Developer for System z

    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!


    NEW! IBM Rational AppScan Standard Edition V7.7

    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!


    NEW! IBM Rational ClearCase Innovator's Series

    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!


    NEW! Improve your build process with IBM Rational Build Forge, Part 2: Automate builds for a real-world Tomcat project

    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!


    NEW! Info 2.0: Harnessing the power of Web 2.0 and Enterprise Mashups

    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!


    NEW! Successful Change and Release Management for .NET

    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!


    NEW! Webcast: Eclipse: Empowering the universal platform

    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!

    ASP.NET CODE ARTICLES

    - How to Use the ListBox Control in ASP.NET 2.0
    - How to Load XML Documents in ASP.NET 2.0
    - DataGrid Code
    - ASP.NET Guestbook
    - User Controls and Client Side Scripting
    - ASP.NET Programming with Microsoft's AS...
    - ASP.NET Basics (part 3): Hard Choices
    - ASP.NET Basics (part 2): Not My Type
    - ASP.NET Basics (part 1): Nothing But .Net
    - Directory Tree Browser
    - How to get the confirmation of Yes/No from a...
    - Complete example using custom errors and wri...
    - Paging Certain # records per page .NET style
    - General Methods of formatting and Subtractin...
    - .NET LinkButton web control





    © 2003-2009 by Developer Shed. All rights reserved. DS Cluster 3 Hosted by Hostway
    Stay green...Green IT