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

Scrolling.aspx

Source code:

<form id="form1" runat="server">
<asp:DataGrid ID="DataGrid1" runat="server" DataKeyField="EmployeeId"

 AutoGenerateColumns="False"ShowHeader="true" CellPadding="5">
<Columns>
<asp:TemplateColumn HeaderText="Photo">
 <ItemTemplate>
 <li><a href=

 '<%#GetDetail(DataBinder.Eval(Container.DataItem,"EmployeeId"))%>'
  title='<%#title(DataBinder.Eval(Container.DataItem,"EmployeeName"))%>'>
<img width="225" height="175" border="0" 

src='<%#GetDetail(DataBinder.Eval(Container.DataItem,"EmployeeId"))%>' />
</a></li>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>

</form>

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)

    {
        ShowFavoriteArticles();
    }
    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";
        con.Open();
        DataGrid1.DataSource = cmd.ExecuteReader();
        DataGrid1.DataBind();
        con.Close();
    }
    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;
    }