Post
Ask Question

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.


Similar Articles