AspdotnetCodes.com
Search
Articles
Books
Resources
Asp.Net News
Downloads
Free Tech Magazines
Asp.Net Web Hosting
Archives
Softwares
Newsletter
Suggest Us
Link to Us
Feeds Subscription
Articles
Questions & Answers
Tips & Tricks
 View Thumbnail Images using Asp.Net AJAX ModalPopup Extender
Posted by Moderator1 on 1/22/2010 9:36:11 PM Category: AJAX
Total Views : 58536
Add to my favorites
Email to friend
  
Introduction
In most of the web application, the product images are shown in thumbnail sizes, we provide an option to view these thumbnail images in its original size. This can be done in many ways. I have shown another easy step to implement this in your web application. I have used the ModalPopup Extender control to display the original image and the user can view all the images from the ModalPopup itself by clicking on the previous and next button. The images are stored physically and its path is stored in a database table. Repeater control is used to display the thumbnail images. So, there is no restriction in the number of images to be displayed in the ModalPopup control. Besides that, I have created the sample application within a Master Page. Surely, these will help the readers to use this functionality at extreme.
Demonstration:

For demonstration purpose, I have created a table in my database called “ImageGallery” and store the image id [ImgId], image name [ImgName] and images path [ImgUrl] in it. The original images have been placed in a physical folder named as “Images”. This folder has to be located within the application. Note that the image path field [ImgUrl] in the table must be exactly match the physical location of the images. The ImageGallery table structure and its content is shown in the below screen shot.

View Thumbnail Images using ModalPopup Extender in Original Size

In your project, add a Master Page and a Web Form as “Default.aspx” by selecting its Master page as “MasterPage.master”. In the aspx page, you need to add a ScriptManager, Repeater control, Panel control and ModalPopup Extender. The Repeater control is to display the thumbnail images. It needs to be bind with the ImageGallery table. So inside its ItemTemplate section, add an Image control and change its ID as “ImgThumbnail”. Bind the ImageUrl property as “ImgUrl” field. The html source of the Repeater control is below,

<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
  <ItemTemplate>
    <asp:Image ID="ImgThumbnail" runat="server" ImageUrl='<%# Bind("ImgUrl") %>' Height="150" Width="150" />
  </ItemTemplate>
</asp:Repeater>
Note: If the thumbnail image path and the original image paths are different, you need to add a HiddenField control and set its Value property to bind the Original Image Url. This is included in the sample application.

Inside the Panel control, add an Image control and set its height and width as you desired. Then add two Html buttons and change the name as “btnPrev” and “btnNext”. Change the value of btnPrev as “Previous” and set its onclick event as “fnShowPreviousImage()”. Then change the value property of btnNext as “Next” and set its onclick event as “fnShowNextImage()”. Finally, add an Asp.Net Button control, change its ID as “btnClose” and Text as “Close”. The html source of the Panel control will be as below,


<asp:Panel ID="Panel1" runat="server" Height="426px" Width="577px">
  <asp:Image ID="Image1" runat="server" Height="400" Width="400" />
  <input id="btnPrevious" type="button" value="Previous" onclick="fnShowPreviousImage();" />
  <input id="btnNext" type="button" value="Next" onclick="fnShowNextImage();" />
  <asp:Button ID="btnClose" runat="server" Text="Close" />
</asp:Panel>

In the ModalPopup Extender control, set its TargetControlID and PopupControlID as “Panel1”, CancelControlID as “btnClose” and OnCancelScript as “fnHidePopup()”. The html source of the ModalPopup Extender is below

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel1" TargetControlID="Panel1"
BackgroundCssClass="modalBackground" CancelControlID="btnClose" OnCancelScript="fnHidePopup()">
</cc1:ModalPopupExtender>

In the code-behind of this aspx, we need to work a bit to display images in the Repeater control.

Step 1: Adding reference to System.Data.SqlClient

Step 2: Add a private method “FetchImage” to retrieve data from database table as follows,


private DataTable FetchImage()
{
  string sql = "select * from ImageGallery"; 
  SqlDataAdapter da = new SqlDataAdapter(sql, “YourConnectionString”); 
  DataTable dt = new DataTable(); 
  da.Fill(dt); 
  return dt;
}

Step 3: Call the above method in the Page Load event to bind the Repeater control to display the thumbnail images.

protected void Page_Load(object sender, EventArgs e)
{
  if (!IsPostBack) 
  { 
    Repeater1.DataSource = FetchImage(); 
    Repeater1.DataBind(); 
  }
}
Step 4: Add click event to the Image control “ImgThumbnail” inside Repeater control and the click event should call a JavaScript function named “fnShowPopup” by passing two parameter values such as item index and the Image control’s src value as follows

protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
  if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) 
  { 
    Image ImgThumbNail = (Image)e.Item.FindControl("ImgThumbnail"); 
    ImgThumbNail.Attributes.Add("onclick", "fnShowPopup(" + e.Item.ItemIndex + ", this.src);"); 
  }
}


In the JavaScript section, we write code to show and hide the ModalPopup extender, to navigate between previous and next image. To do this, we have to declare 2 JavaScript variables between the <script></script> block as follows.

<script>
//Local variable Declaration
var imageList=new Array();
var imageIndex;

//All the JavaScript functions come below

</script>

The first variable imageList is an array to maintain the original image path at the client-side, to display the images when the Next and Previous button in ModalPopup is clicked. The second variable imageIndex, is the index of the image to be shown in the Image control inside the ModalPopup. Next we write the necessary JavaScript functions below.

Function 1: To open the ModalPopup with the original image, also to initialize the client-side array list “imageList” with the original images path in it.
function fnShowPopup(ImageIndex, ImageUrl)
{
  if (imageList.length==0) 
  { 
    //Use this below code, if Thumbnail image path and Original image path are SAME 
    for(var i=0;i<document.images.length;i++) 
    { 
      if (document.images.item(i).id.indexOf("<%=Repeater1.ClientID%>")!=-1) 
      { 
        imageList[i] = document.images.item(i).src; 
      } 
    } 

  //Use this below code, if Thumbnail image path and Original image path are DIFFERENT 
  /*
    var thisForm = document.forms(0); 
    var imgcnt=0; 
    for(var i=0;i<thisForm.elements.length;i++) 
    { 
      if (thisForm.elements[i].type=="hidden" && thisForm.elements[i].name.indexOf("hidImgUrl")!=-1) 
      { 
          imageList[imgcnt] = thisForm.elements[i].value; imgcnt++; 
      } 
    }
*/



  imageIndex = ImageIndex; 
  fnEnableNextPrevButtons(); 

  var modal = $find('<%=ModalPopupExtender1.ClientID%>'); 
  document.getElementById("<%=Image1.ClientID%>").src = imageList[imageIndex]
  modal.show();

}
The above JavaScript function “fnShowPopup” takes two parameters such as ImageIndex and ImageUrl. The ImageIndex is the index of the image to be displayed in the Image control inside the ModalPopup control and ImageUrl is the path of the original. This function is called once when the user clicks on any thumbnail image. This function initializes the imageList array by looping through the images inside the Repeater control and retrieves the image path and keeps in the array variable. This loop also will run once when this function is called for the first time. Then there are two blocks of code to retrieve the original image paths, the first block can be used if the thumbnail and original image path are same. The second block, which is commented, can be used if the thumbnail and original image path is different. Next the local variable imageIndex is initialized with the parameter ImageIndex. The imageIndex is used to identify image that the user has clicked for display in the ModalPopup. The next line calls a JavaScript function “fnEnableNextPrevButtons”, this function is responsible for enable or disable the Next and Previous button clicks based on the position of the image that is shown in the ModalPopup. Since we are using Master page, we need to write an inline code to find the ModalPopup and Image controls as follows,


var modal = $find('<%=ModalPopupExtender1.ClientID%>');
document.getElementById("<%=Image1.ClientID%>").src = imageList[imageIndex];


Then the Image control’s src property is set with the original image path available in the imageList array using the imageIndex. Then the ModalPopup is shown by calling the show() method.

Function 2: To enable or disable Next and Previous Button on the ModalPopup
function fnEnableNextPrevButtons()
{
  if (imageIndex==0 && imageList.length>1) 
  { 
    document.getElementById("btnPrevious").disabled=true; 
    document.getElementById("btnNext").disabled=false; 
  } 
  else if (imageIndex==imageList.length-1 && imageList.length>1) 
  { 
    document.getElementById("btnPrevious").disabled=false; 
    document.getElementById("btnNext").disabled=true; 
  } 
  else if (imageList.length==1) 
  { 
    document.getElementById("btnPrevious").disabled=true; 
    document.getElementById("btnNext").disabled=true; 
  } 
  else 
  { 
    document.getElementById("btnPrevious").disabled=false; 
    document.getElementById("btnNext").disabled=false; 
  }
}


This function enables and disables the Next and Previous buttons on the ModalPopup, based on the index of images it shown.

Function 3: To show the next image, when “Next” button is clicked. The imageIndex is incremented to move to next image. Then it is used to get the original image path from the imageList array.

function fnShowNextImage()
{
  if (imageIndex < (imageList.length-1)) 
  { 
    imageIndex++; 
    document.getElementById("<%=Image1.ClientID%>").src = imageList[imageIndex]; 
  } 
  fnEnableNextPrevButtons();
}


Function 4: To show the previous image, when “Previous” button is clicked. The imageIndex is decremented to move to the previous image. Then it is used to get the original image path from the imageList array.

function fnShowPreviousImage()
{
  if (imageIndex > 0) 
  { 
    imageIndex--; 
    document.getElementById("<%=Image1.ClientID%>").src = imageList[imageIndex]; 
  } 
  fnEnableNextPrevButtons();
}


Function 5: To close the ModalPopup. The hide() method of the ModalPopup extender control used to close the ModalPopup.

function fnHidePopup()
{
  var modal = $find('<%=ModalPopupExtender1.ClientID%>');
  modal.hide();
}

So, it’s done. Don’t forget to insert some records in the ImageGallery table along with the image path [ImgUrl] field and also place all the images in the exact location as you specified in the ImgUrl field. Save all your codes and run this page in your browser. You can see the Repeater control renders all the images in thumbnail size, and click on any image, this will open the ModalPopup which shows the original image in its own size. By specifying the Height and Wdith of the Image control, you can customize the size of the Image. To view next and previous images from the ModalPopup, click on the “Next” or “Previous” buttons. This will change the images displayed in the ModalPopup.
You need to Login or Register to download Source Code.
 
Viewer's Comments
Posted by Aidan Kelly on 2/5/2010 3:28:22 PM
Great piece of code , I was wondering how you would go to show an image caption with the image in the popup Regards Aidan
 
Posted by swapna on 3/18/2010 6:13:07 AM
its very nice but i want to implement paging how?
 
Posted by samar ali on 10/12/2010 7:12:29 AM
thanks very much
 
Posted by Vijay Goswami on 7/25/2011 1:37:21 AM
hi it is my email id
 
Posted by Andy on 8/10/2011 1:14:24 PM
Hi I get 2 errors The name 'Repeater1' does not exist in the current context Any ideas why?
 
Posted by Kratika Agarwal on 8/13/2015 2:33:00 AM
thank you so much... this code is a great help
 
 Rating & Comments
A word 'Excellent' means lot to the author of this article. You can give comments about this article but not the author.
Rate this Article:
Name:
Email Id:  
We never display your email id anywhere.
Comment/Question: Max. 500 letters
FortyThree plus ThirtyNine Equals To
 
Sponsored by
Integrating Silverlight 4 with SharePoint 2010 - Free 42 Page Sample Chapter
Windows 8: 50 Questions and Answers You Need to Make a Decision (Normally $9.95)
The Art & Science of JavaScript - Free 100 Page Preview!