|
Total Views :
16482 |
|
Adding to your Favorites....
|
|
|
 |
|
|
|
|
|
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.
|
|
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.
|
|
|
|
|
|
|
|
|