Image Scrolling using jQuery

Through this article you will learn how to scroll images using JQuery.

The following are the easy steps:

Step 1: Create a simple application in Visual Studio.

Step 2: Add the following JQuery:

  1. Jquery-1.2.6.min.js and
  2. Home-common.js

These are included in the uploaded file.

Step 3: Add the following style sheet.

Home-style.css:

html, body
{
height:100%;
}

body
{
margin:0;
color:#525252;
background:#fff; font-size:13px; font-family: Arial, Helvetica, sans-serif;
padding:0px; color:#363636;
}

#main-container
{
width:1024px;
margin:0 auto;
}
 
#container
{
margin:0;
padding:24px 0 0 0;
}

#container
.workfield-lt
{
margin:0;
padding:0;
float:left;
width:700px;
line-height:19px;
}
 

/*Start stylesheet for scroller */
#example1_wrap

{
position: relative;
clear: both;
margin:0;
padding:25px 0 60px 0;
}

#example1_wrap
.bx_wrap
{
margin-left: 0px; margin:0;
padding:0;
}

img
{
border:0;
}

#example1_wrap
.prev
{
position:absolute;
top: 95px;
outline: 0;
left: -5%;
border:none;
cursor:pointer;
}

#example1_wrap
.next
{
position: absolute;
top: 95px;
outline: 0;
right:3%;    border:none;
cursor:pointer;
}

.bx_container
{ 
margin:0;
padding:0px 0 0px 0;
}


.bx_container
ul
{
list-style:none; margin:0;
padding:0 0 0 3px;
}

#example1
li
{
margin-left:0px; float:left; list-style:none;
padding:0 14px 0 0;
}

/*End stylesheet for scroller */


Step 4:
Now start work on the default .aspx page

First, link these Jquery files and styles on the page as follows:

Default .aspx:

 
<
head runat="server">
<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>
<title></title>
</
head
>

Step 5: Drag a DataGrid from the toolbar and drop on the page and use the style as follows:
 

<body>
<
form id="form1" runat="server">
<
div id="main-container">
<
div id="container">
<
div id="myspan">
<
div id="example1_wrap" >
<
ul id="example1">
<
asp:DataGrid ID="DataGrid1" runat="server" DataKeyField="EmplayeeId" AutoGenerateColumns="False"
ShowHeader="true" CellPadding="5">
<
Columns>
<
asp:TemplateColumn HeaderText="Photo">
<
ItemTemplate>
<
li><a href='<%#GetDetail(DataBinder.Eval(Container.DataItem,"EmplayeeId"))%>' rel=Stylesheet
title='<%#title(DataBinder.Eval(Container.DataItem,"EmployeeName"))%>'>
<
img width="225" height="175" border="0" src=
'<%#GetDetail(DataBinder.Eval(Container.DataItem,"EmplayeeId"))%>' />

</
a></li>
</
ItemTemplate>
</
asp:TemplateColumn>
</
Columns>
</
asp:DataGrid>
</
ul>
</
div>
</
div>
</
div>
</
div>
</
form>
</
body>

 

Now fetch the record from the database such as in the following:

Default .aspx.cs:


using
System;
using
System.Collections.Generic;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Data;
using
System.Data.SqlClient;

public
partial class DatalistSlider : System.Web.UI.Page
{

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=server;Initial Catalog=TestData; uid=sa;pwd=wintellect");
cmd.Connection = con;
cmd.CommandText = "Select * from Puru_test_Employee";
con.Open();
DataGrid1.DataSource = cmd.ExecuteReader();
DataGrid1.DataBind();
con.Close();
}
public string GetDetail(object objEmplayeeId)
{
int EmplayeeId = int.Parse(objEmplayeeId.ToString());
string path = "images/" + EmplayeeId + ".jpg";
return path;
}
public string title(object objEmployeeName)
{
string employeename = objEmployeeName.ToString();
return employeename;
}
}

Output:
Press F5 and see the result.

scroll1.gif

Figure:1 Images scroll automatically.

If you click on next and previous image (blue image in left and right) images will scroll faster as follows:

scroll3.gif

Figure 2:

Note: You can see a demo of this article (image scrolling) by downloading this application.

Up Next
    Ebook Download
    View all
    Learn
    View all