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:
- Jquery-1.2.6.min.js and
- 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.
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:
Figure 2:
Note: You can see a demo of this article (image scrolling) by downloading this application.
Lokesh TanwarPosted Sep 1, 2017, 6:07 AM
In my web application, i used it.... image scrolling work fine but other carousel used in webpage stop working
Ajit MorePosted Jun 9, 2014, 2:35 AM
Hi Tell Me the Database table field
Dung Nguy?n ChíPosted May 15, 2014, 1:50 AM
very good
gargprabhatPosted Nov 9, 2013, 10:59 AM
this.find('li').live('mouseenter' FUCTION HAVING PROBLEM LIVE DOES NOT SUPPORT IN INTERNET EXPLORER
gargprabhatPosted Nov 9, 2013, 10:56 AM
IT WORKING FINE BUT HAVING PROBLEM IN LIVE MOUSEENTER FUNCTION
Brane OdicPosted Mar 20, 2012, 7:45 AM
Code stop works on line: not con.Open(); Next information is: A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible. Verify that the instance name is correct and that SQL Server is configured to allow remote connections. (provider: Named Pipes Provider, error: 40 - Could not open a connection to SQL Server)
Wesley LinPosted Mar 9, 2012, 1:21 AM
Can I use two scrolling tools on the same page? It seems to me that I can use only one on a page. $('#example1').ready(function() { $('#example1').bxCarousel({ display_num: 5, move: 1, auto: true, //true prev_image: 'images/arrow-lt.gif', next_image: 'images/arrow-rt.gif', margin: 15, // 0 border:0, auto_hover: true }); }); // the second one does not work $('#store').ready(function () { $('#store').bxCarousel({ display_num: 5, move: 1, auto: true, //true prev_image: 'images/arrow-lt.gif', next_image: 'images/arrow-rt.gif', margin: 15, // 0 border: 0, auto_hover: true }); });
Spyros PonarisPosted Sep 3, 2011, 6:06 AM
Very Nice
piyush sardharaPosted Apr 9, 2011, 6:14 AM
thanks good for scrolling in jquery
Mayur GujrathiPosted Apr 8, 2011, 8:52 AM
Thanks purushottam for sharing valuable information
Mahesh ChandPosted Apr 7, 2011, 8:57 AM
Good work!