Showing images on an image viewer is gaining popularity among online retail shops, in particular, as they have many images for various products and categories. There is another thing that I have noticed, is that they add a text, explaining about the image, at the bottom of every image.
There are many tools available on the web today, such as a Pure JavaScript image viewer for viewing sliding images. What they do not (often) provide is a way to add the text with the images. Therefore, here I’ll show you how to add a text below every image, which we’ll extract or get from the folder using Asp.Net.
Be advised, we are not adding text with image, but displaying the text below the image and spread it horizontally on the browser.
On the web page, we will add a DIV element that will serve as a container. Later from code behind using C# or Vb.Net, we will add images and text dynamically. All our images are stored in a folder, we don’t know how many. Therefore, we need to get the list of files from the folder, set condition to check if it is an image file. Once confirmed it is an image file, we will create an object of HtmlImage class to display the extracted images.
To add a text below each image, we will use HtmlGenericControl class. It provides us with necessary methods to add style and other attributes to the elements, dynamically. Finally, we will add the images with the text to the parent container.
<body>
<div id="divGallary" style="position:relative;top:0;width:700px;" runat="server"></div>
</body>
using System;
using System.IO;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
int iFileCnt = 0;
System.IO.DirectoryInfo dirInfo = new System.IO.DirectoryInfo(Server.MapPath("~/images/theme/"));
FileInfo[] listfiles = dirInfo.GetFiles("*.*");
if (listfiles.Length > 0)
{
foreach (FileInfo file in listfiles)
{
// CHECK THE TYPE OF FILE.
if ((listfiles[iFileCnt].Extension == ".jpg" ||
listfiles[iFileCnt].Extension == ".jpeg" ||
listfiles[iFileCnt].Extension == ".png" ||
listfiles[iFileCnt].Extension == ".bmp" ||
listfiles[iFileCnt].Extension == ".gif"))
{
HtmlImage img = new HtmlImage();
HtmlGenericControl newDiv = new HtmlGenericControl("div");
HtmlGenericControl textDiv = new HtmlGenericControl("div");
// ADD IMAGE.
img.Src = "~/images/theme/" + listfiles[iFileCnt].Name;
img.Width = 130;
img.Height = 130;
newDiv.Attributes.Add("style", "float:left;padding:5px 3px;
margin:20px 3px;height:auto;overflow:hidden;");
newDiv.Controls.Add(img);
// ADD A TEXT.
textDiv.Attributes.Add("style", "display:block;font:13px Arial;padding:10px 0;width:" +
img.Width + "px;color:#666;text-align:center;cursor:pointer;");
textDiv.InnerText = "Various Catgories - Binding, Product Specification, Author (Price Tag)";
newDiv.Controls.Add(textDiv);
divGallary.Controls.Add(newDiv);
}
iFileCnt = iFileCnt + 1;
}
}
}
}
Imports System.IO
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
Dim iFileCnt As Integer = 0
Dim dirInfo As New System.IO.DirectoryInfo(Server.MapPath("~/images/theme/"))
Dim listfiles As FileInfo() = dirInfo.GetFiles("*.*")
If listfiles.Length > 0 Then
For Each file As FileInfo In listfiles
' CHECK THE TYPE OF FILE.
If Trim(listfiles(iFileCnt).Extension) = ".jpg" Or _
Trim(listfiles(iFileCnt).Extension) = ".jpeg" Or _
Trim(listfiles(iFileCnt).Extension) = ".png" Or _
Trim(listfiles(iFileCnt).Extension) = ".bmp" Or _
Trim(listfiles(iFileCnt).Extension) = ".gif" Then
Dim img As New HtmlImage
Dim newDiv As New HtmlGenericControl("div")
Dim textDiv As New HtmlGenericControl("div")
' ADD IMAGE.
img.Src = "~/images/theme/" & listfiles(iFileCnt).Name
img.Width = "130"
img.Height = "130"
newDiv.Attributes.Add("style", "float:left;padding:5px 3px;
margin:20px 3px;height:auto;overflow:hidden;")
newDiv.Controls.Add(img)
' ADD A TEXT.
textDiv.Attributes.Add("style", "display:block;font:13px Arial;padding:10px 0;width:" & _
img.Width & "px;color:#666;text-align:center;cursor:pointer;")
textDiv.InnerText = "Various Catgories - Binding, Product Specification, Author (Price Tag)"
newDiv.Controls.Add(textDiv)
divGallary.Controls.Add(newDiv)
End If
iFileCnt = iFileCnt + 1
Next
End If
End Sub
End ClassIt is simple and yet a very useful piece of code, particularly for beginners. If you look carefully inside the code, you will see we have set the attributes of each element, dynamically, such as setting a fixed width and height for the images, aligning the text etc.