Blog

The Infragistics ASP.NET Image Viewer

Arun Banik / Wednesday, March 4, 2015

Often we use an Image viewer for displaying multiple images in a single container. Today, these tools are widely used in online retail stores for displaying images of various products. Amazon is a good example, as it relies heavily on Sliding Image Viewers to display a range of products. Image viewers come in many styles and orientations.

Infragistics Asp.Net Image viewer, also known as WebImageViewer, has everything that a web developer needs, which will allow them to add an easy to use sliding image viewer on their web page. Depending upon your requirement, you can adjust your tool either horizontally or vertically, extract the images from either a folder directly or hook it with a data source, look for the images in a database table and display it.

Let’s find out how we can populate the “WebImageViewer” control with images, which we will extract from a folder in the server and display it. There are interesting features in this control that we will explore in this article.

Extract Images from a Folder

Storing and extracting files, particularly images, from a folder, is a simple process also considered a quicker option than doing the same with a database table. This method is popular among web developers, and we will an example using a similar method.

First, you will have to add the image viewer control on the web page. You can do this by dragging the control from the tool bar to your page.

The Markup

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" 
Inherits="SiteMaster" %>
<%@ Register assembly="Infragistics4.Web.v14.2, Version=14.2.20142.2146, 
Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" 
namespace="Infragistics.Web.UI.ListControls" tagprefix="ig" %>

<!DOCTYPE html>
<html>
<head>
    <title>Infragistics Image Viewer Control for Asp.Net</title>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>

</head>
<body>
    <form runat="server">
    <div class="page">
        <div class="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

            <ig:WebImageViewer ID="WebImageViewer1" runat="server" 
                Height="150px" 
                Width="500px">

            </ig:WebImageViewer>
            
        </div>
    </div>
    </form>
</body>
</html>

Code Behind C#


using System;
using System.IO;
using Infragistics.Web.UI.ListControls;

public partial class SiteMaster : System.Web.UI.MasterPage
{
    protected void Page_Load(object sender, EventArgs e)
    {
        PopulateImageViewer();
    }

    private void PopulateImageViewer()
    {
        int iCounter = 0;

        System.IO.DirectoryInfo dirInfo = 
new System.IO.DirectoryInfo(Server.MapPath("~/my-images/"));
        FileInfo[] files = dirInfo.GetFiles("*.*");

        if (files.Length > 0)
        {

            foreach (FileInfo file in files)
            {
                // FILE TYPE.
                if ((files[iCounter].Extension == ".jpg" ||
                    files[iCounter].Extension == ".jpeg" ||
                        files[iCounter].Extension == ".png" ||
                            files[iCounter].Extension == ".bmp" ||
                                files[iCounter].Extension == ".gif"))
                {
                    ImageItem image = new ImageItem("~my-images/" +
 files[iCounter].Name, "", "");
                    this.WebImageViewer1.Items.Add(image);

                }

                iCounter = iCounter + 1;
            }
        }

    }
}


Vb.Net


Imports System
Imports System.IO
Imports Infragistics.Web.UI.ListControls

Partial Class Site
    Inherits System.Web.UI.MasterPage

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) 
Handles Me.Load
        PopulateImageViewer()
    End Sub

    Private Sub PopulateImageViewer()
        Dim iCounter As Integer = 0

        Dim dirInfo As New System.IO.DirectoryInfo(Server.MapPath("~/my-images/"))
        Dim files As FileInfo() = dirInfo.GetFiles("*.*")

        If files.Length > 0 Then
            For Each file As FileInfo In files

                ' FILE TYPE. 
If Trim(files(iCounter).Extension) = ".jpg" Or _ 
Trim(files(iCounter).Extension) = ".jpeg" Or _ 
Trim(files(iCounter).Extension) = ".png" Or _ 
Trim(files(iCounter).Extension) = ".bmp" Or _ 
Trim(files(iCounter).Extension) = ".gif" 
Then Dim image As New ImageItem("~/my-images/" & files(iCounter).Name, "", "") 
Me.WebImageViewer1.Items.Add(image) 
End If 
iCounter = iCounter + 1 
Next 
End If 
End Sub 
End Class


In the markup section, we have added the image viewer and it has assigned the container a default Height and Width. You can always adjust the control by editing its attributes and values. In addition, it also assigned a default orientation to the control, not explicitly declared, however it is the default behavior. Its default orientation is “Horizontal”. You will see this when you run the application on the browser.

If you want to display the viewer “Vertically”, then you have to assign (or change) the orientation value this way.

<ig:WebImageViewer ID="WebImageViewer1" runat="server" 
    Orientation="Vertical"
    Height="500px" Width="150px">
ig:WebImageViewer>

Don’t forget to adjust the Height and Width of the Image viewer, once you have changed its orientation. Simply, reverse the values of the height and width, or whichever you feel is good.

To populate the image viewer with images, we have written a small code behind procedure. The procedure will extract the files from a folder and fill the image viewer with the images. Methods “DirectoryInfo” and “FileInfo” from “System.IO” namespace will allow us to get the images from a folder. To add the extracted images to the image viewer, we will use “ImageItem()” method in our procedure.

The “ImageItem()” method from Infragistics “ListControls” namespace takes three parameters.

  1. ImageURL – The url (with folder name) of the image that we will add to the viewer. The “file” object of class “FileInfo”, provides the name of each image in the folder. A condition in the procedure checks the type of file in the folder, before adding it to the viewer.
  2. alt – The “alt” attribute is used to specify a text for the image. This is required, if the image is not loaded properly in the viewer. It is alternative for an image, as it will help avoid any confusion among users, about the image.
  3. ToolTip – The 3rd and final parameter, will allow developers to add a “tooltip” to the images. It is equivalent to the “Title” attribute of the *img* control. You can pass either the image name or any other information with this parameter.

 

In-build Lazy Load feature

What I like most about this control, is its in-build lazy load feature. This feature actually delays the loading of images until every image is first loaded in the viewer and then displayed. The page loads faster. You do have to write an extra code to incorporate this feature.

In-fact this control actually makes the web developers life very easy. Preferably, a web developer would choose a DIV or Panel control to display the images. The DIV is no doubt, a lightweight option for a container for various purposes. However, imagine how much code you have to write at server and client side to make the elements and features to in work sync, and to make a good impression among your users.

Thumbnail Images

It automatically adjusts the width and height of the images. Its a perfect solution for displaying thumbnails on a web page. Simply reduce or increase the “Height” and “Width” of the Image Viewer, and it will re-size each image in the container, using the “Image Aspect Ratio” algorithm. If you are planning to design a “Responsive” web page for displaying images, I think this is the ultimate control.

In the below markup, I have reduced the height of the viewer from “150px” to “50px”, that's it.

<ig:WebImageViewer ID="WebImageViewer1" runat="server" 
    Height="50px" Width="500px">

ig:WebImageViewer>

ScrollAnimations Property

The “ScrollAnimations” property provides some cool animation to the Image Viewer. Weather displaying the images with a bounce effect or add some grace to images by smoothly displaying it. This property will take care of it easily.

<ScrollAnimations Type="NextItem" NextItem-Alignment="Center">
    <NextItem EquationType="Bounce" />
ScrollAnimations>

Add Header and (or) Footer

Finally, you can add a little text on the top and bottom of the viewer. All you need to do it add the elements *Header* and *Footer* to the “WebImageView” control. Add a text of your choice to the elements, and don’t forget to set the “Visible” property as “true”, and you're all set!

<Header Text="Our Best Collections" Visible="true">Header>
<Footer Text="High Definition WallPapers" Visible="true">Footer>