Image Scrolling using jQuery in ASP.NET

Filed in ASP.NET, JQueryTags: , , , ,

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;
    }


Sourabh Sharma (150 Posts)


Feedback

Comments

2 Responses to “Image Scrolling using jQuery in ASP.NET”
  1. Rocky says:

    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

Trackbacks

  1. Elegant D » Image Scrolling using jQuery in ASP.NET

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>