ModalPopupExtender Example: Creating an image thumbnail viewer(From Matt Berseth)
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>
