Image Scrolling using jQuery in ASP.NET

Hello Everyone, Today I am going to share a project about scrolling Images in your application. I am using jQuery to do this.  Sometimes we required portfolio on our webapplication’s page. The portfolio like a collection of Images on the webpage. You will get some interesting information to scroll Images using jQuery in this article.


Free Download

jQuery Image Scrolling : Demo Project


Controls and Properties:

1. Web Form: name=”Scrolling.aspx”.

2. DataGrid: id=”DataGrid1″.

Script class:

Download Script


Source code:

<form id="form1" runat="server">
<asp:DataGrid ID="DataGrid1" runat="server" DataKeyField="EmployeeId"
 AutoGenerateColumns="False"ShowHeader="true" CellPadding="5">
<asp:TemplateColumn HeaderText="Photo">
 <li><a href=
<img width="225" height="175" border="0" 
src='<%#GetDetail(DataBinder.Eval(Container.DataItem,"EmployeeId"))%>' />

JavaScript Code to use jQuery LightBox:

<link type=”text/css” rel=”stylesheet” href=”css/home-style.css” />

<script type=”text/javascript” src=”Script/jquery-1.2.6.min.js”></script>

    <script type="text/javascript" src="Script/home-common.js"></script>


Scrolling.aspx.cs Page Code:

protected void Page_Load(object sender, EventArgs e)

    private void ShowFavoriteArticles()
        SqlConnection con = new SqlConnection();
        SqlCommand cmd = new SqlCommand();

        con = new SqlConnection("Data Source=.\\SQLEXPRESS;AttachDbFilename=|DataDirectory|\\Employee.mdf;
 Integrated Security=True;User Instance=True");
        cmd.Connection = con;
        cmd.CommandText = "Select * from EmployeeMaster";
        DataGrid1.DataSource = cmd.ExecuteReader();
    public string GetDetail(object objEmployeeId)
        int EmployeeId = int.Parse(objEmployeeId.ToString());
        string path = "images/" + EmployeeId + ".jpg";
        return path;

    public string title(object objEmployeeName)
        string employeename = objEmployeeName.ToString();
        return employeename;

admin (158 Posts)

Comments ( 3 )

  1. RockySeptember 21, 2011 19 // Reply

    Hi Sourabh, briliant piece just to let you know I tried it in VS 2010 but had to use jquery 1.4.1 a 1.2.6 did not work for me. One question I have tried to make the scrolling speed slower but to no avail where exactly do you set that. Thanks again Rocky

  2. huynhtienlinhJuly 28, 2012 14 // Reply

    thanks so much!

Leave a reply

Your email address will not be published.

Comment moderation is enabled. Your comment may take some time to appear.