ModalPopupExtender Example: Creating an image thumbnail viewer

Yesterday I was fiddling around with my MovableType blog looking for a plug-in for MovableType 3.2 that could render my category tags as a tag cloud  (by the way, I am still looking).  Along the way I came across the following site that had a nifty way of displaying screenshots of their product by clicking on the corresponding thumbnails.  Instead of having the browser take you to a page with the full image displayed by itself, the site displayed the image on top of the page in an ajax modal style window.  Besides just the image, the modal window also contained a few buttons as well as some additional information that was specific to the image.  Very nice. 

I was curious of what this would take to implement using ASP.NET AJAX, so I created a sample web site (screen shot is above-right) that allows uses to browse thumbnail images.  When a thumbnail is clicked, the modal window is displayed showing the user the full image.  My sample application is similar to the above sites, it has a cancel button and displays some context information, but it also allows the user to navigate to the next/previous image in the sequence.  The code for the page is straight forward.  I created the asp:Panel that is rendered as the popup (this stays hidden until a thumbnail is clicked).  Within this Panel I put the HTML img element that displays the full image as well as a place holder span that contains the context information that is specific to each image as well as the paging and cancel buttons.  Then I added my 5 images to the page and added a ModelPopupExtender for each of the images, pointing the extender to both the image it is extending and the Panel that will be displayed.  Finally, I added an onclick event to each of the images that calls a javascript function which toggles the image that is displayed within the model window.  The following is the completed markup for the page and there is no codebehind.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Image Thumbnail Borwser</title>
    <style>
        .modalBackground {
            background-color:Gray;
            filter:alpha(opacity=70);
            opacity:0.7;
        }
        .thumbnail{
            height: 100px;
            width: 130px;
            cursor: hand;
        } 
        .imgpopup{
            height: 576px;
            width: 768px;
        }            
    </style>
    <script type="text/javascript">
        var currentImgId = 'img01';
    
        function onNextImageClick(){
        
            switch(currentImgId){
                case 'img01':
                    currentImgId = 'img02';
                    break;
                case 'img02':
                    currentImgId = 'img03';                
                    break;
                case 'img03':
                    currentImgId = 'img04';                
                    break;
                case 'img04':
                    currentImgId = 'img05';               
                    break;
                case 'img05':
                    currentImgId = 'img01';                
                    break;     
                default: 
                    alert("Unknown image!");                                                                               
            }
            
            togglePopupImage($get(currentImgId));
        }
        
        function onPreviousImageClick(){
        
            switch(currentImgId){
                case 'img01':
                    currentImgId = 'img05';
                    break;
                case 'img02':
                    currentImgId = 'img01';                
                    break;
                case 'img03':
                    currentImgId = 'img02';                
                    break;
                case 'img04':
                    currentImgId = 'img03';               
                    break;
                case 'img05':
                    currentImgId = 'img04';                
                    break;     
                default: 
                    alert("Unknown image!");                                                                               
            }
            
            togglePopupImage($get(currentImgId));        
        }
    
        function togglePopupImage(thumbnail){
            $get('spnImageText').innerHTML = thumbnail.alt;
            $get('imgPopup').src = thumbnail.src;             
        }
    </script>
</head>
<body>
    <form id="form" runat="server">
        <asp:ScriptManager ID="scriptManager" runat="server" />
        <div>
        
            <p style="background-color:AliceBlue; width:95%">
            Example of how the ModelPopupExtender can be used to provide a nice way to browse image thumbnails.<br />
            Try clicking on a thumbnail to bring up the larger version of the image.<br />
            </p>        
            
            <img 
                id="img01" runat="server" class="thumbnail" 
                src="Img/01.jpg" alt="Big gold ball hovering on water" onclick="togglePopupImage(this);" />
            <ajaxToolkit:ModalPopupExtender 
                runat="server" TargetControlID="img01" PopupControlID="pnlPopup" 
                BackgroundCssClass="modalBackground" DropShadow="false" CancelControlID="btnCancel" />
            <img 
                id="img02" runat="server" class="thumbnail" 
                src="Img/02.jpg" alt="Upclose facial of a tiger" onclick="togglePopupImage(this);" />
            <ajaxToolkit:ModalPopupExtender 
                runat="server" TargetControlID="img02" PopupControlID="pnlPopup" 
                BackgroundCssClass="modalBackground" DropShadow="false" CancelControlID="btnCancel" />
            <img 
                id="img03" runat="server" class="thumbnail" 
                src="Img/03.jpg" alt="King-Kong" onclick="togglePopupImage(this);" />
            <ajaxToolkit:ModalPopupExtender 
                runat="server" TargetControlID="img03" PopupControlID="pnlPopup" 
                BackgroundCssClass="modalBackground" DropShadow="false" CancelControlID="btnCancel" />
            <img 
                id="img04" runat="server" class="thumbnail" 
                src="Img/04.jpg" alt="The Hoya's mascot" onclick="togglePopupImage(this);" />
            <ajaxToolkit:ModalPopupExtender 
                runat="server" TargetControlID="img04" PopupControlID="pnlPopup" 
                BackgroundCssClass="modalBackground" DropShadow="false" CancelControlID="btnCancel" />
            <img 
                id="img05" runat="server" class="thumbnail" 
                src="Img/05.jpg" alt="My future home" onclick="togglePopupImage(this);" />
            <ajaxToolkit:ModalPopupExtender 
                runat="server" TargetControlID="img05" PopupControlID="pnlPopup" 
                BackgroundCssClass="modalBackground" DropShadow="false" CancelControlID="btnCancel" />                                    
                                    
            <asp:Panel ID="pnlPopup" runat="server">
                <table>
                    <tr>
                        <td colspan="2">
                            <img id="imgPopup" class="imgpopup" runat="server" />        
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span id="spnImageText" />
                        </td>
                        <td align="right">
                            <asp:Button runat="server" Text="Previous" OnClientClick="onPreviousImageClick(); return false;" />
                            <asp:Button runat="server" Text="Next" OnClientClick="onNextImageClick(); return false;" />
                            <asp:Button ID="btnCancel" runat="server" Text="Close" />
                        </td>
                    </tr>
                </table>
            </asp:Panel> 
        
        </div>
    </form>    
</body>
</html>

TrackBack

TrackBack URL for this entry:
http://mattberseth.com/blog-mt/mt-tb.fcgi/41

Comments


Posted by: Bartek on August 3, 2007 12:00 AM

Hi Matt, I just came across your site today and your examples are fantastic! Quick question about this one, how can I edit it so that the image appears on mouse hover, and includes a progress indicator?

Cheers,
Bartek

Posted by: MixMan on August 3, 2007 12:00 AM

Great site! Can you think of a way to animate the modal popup similar to the way the the majordojo.com photos fade in and out?

thanks

Posted by: Bos, M on August 4, 2007 12:00 AM

I want to read your blog, but becausw of the choosen colors I am unable to do this on my PDA !

Posted by: Marco on January 2, 2008 12:00 AM

Nice blog thanks! For those people who dont want to see the pnlPopup panel to flash at page loadtime use:

Posted by: Brijesh Pandey on January 4, 2008 12:00 AM

hello,i need help,i want to display image full view on click of thumbnail image,i am doing same thing as here given but here
function togglePopupImage(thumbnail)
{
tblpopimg.
$get(Img1).src = thumbnail.src;
}
but thumbnail.src is not correctly refferenced so image not displayed so plz suggest me that $get(Img1) is correct method to access src in script

The good convenient site is made.

Posted by: John A. Davis on June 22, 2008 12:00 AM

I like what your idea does. But I dont want to download all the full-sized pictures when the page first loads. I was hoping to load the thumbnails from a code behind loop and then use Ajax to get the full-sized image from a file folder when its thumbnail is clicked on. Unless Im missing something. Dont know much about AJAX but I know that is what I need.

Posted by: Sarawut on June 26, 2008 12:00 AM

Hello If I retrieve image name from database to display in datalist view, how can i set TargetControlID ?


alt= onclick="togglePopupImage(this);" />

PopupControlID="pnlPopup" BackgroundCssClass="modalBackground" DropShadow="false"
CancelControlID="btnCancel" />
Thanks.

Posted by: Najam on July 11, 2008 12:00 AM

Hi,

It is a great example and works perfectly. But when I put it under an inherited page from the MasterPage. $get simply doesnt get the object and does not set the source of the image. Any idea, how to fix it?

I am novice in JavaScript.

Thanks.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Consulting Services

Yep - I also offer consulting services. And heck, I'll do just about anything. If you enjoy my blog just drop me an email describing the work you need done.

Recent Comments

  • Najam wrote: Hi, It is a great example and works perfectly. But when I put it under an inherited page from the M...
  • Sarawut wrote: Hello If I retrieve image name from database to display in datalist view, how can i set TargetContr...
  • John A. Davis wrote: I like what your idea does. But I dont want to download all the full-sized pictures when the page fi...
  • Irrasmago wrote: The good convenient site is made. ...
  • Brijesh Pandey wrote: hello,i need help,i want to display image full view on click of thumbnail image,i am doing same thin...
  • Marco wrote: Nice blog thanks! For those people who dont want to see the pnlPopup panel to flash at page loadtime...
  • Bos, M wrote: I want to read your blog, but becausw of the choosen colors I am unable to do this on my PDA ! ...
  • Bartek wrote: Hi Matt, I just came across your site today and your examples are fantastic! Quick question about t...