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>
Comments
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
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
I want to read your blog, but becausw of the choosen colors I am unable to do this on my PDA !
Nice blog thanks! For those people who dont want to see the pnlPopup panel to flash at page loadtime use:
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.
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.
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.
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.