Image Scrolling using jQuery

Through this article you will learn how to scroll images 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.