JavaScript Image Popup's Done Right

Contributed by Andrew_Putnam
Rating:

/ 42
November 30, 2002

Rate this Article:
MEH MEH++

SEARCH ASP FREE

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>