Home > ASP.Net, Jquery > News Ticker With JQuery

News Ticker With JQuery

Hi all,

try this example for News Ticker With JQuery

1) Open VS 2008 and create a new Web site

2) Add new Web Page and from ToolBox drag Repeater Control into your page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
 <script src="http://www.webdesignbooth.com/demo/news-ticker/jcarousellite_1.0.1c4.js"
 <script type="text/javascript">
 $(function() {
 visible: 3,
 btnNext: ".next",
 btnPrev: ".prev"
 .newsticker ul li
 display: block;
 list-style: none outside none;
 margin-bottom: 5px;
 border:solid 2px gray;
 padding-bottom: 1px;
 background-color: #EAF4F5;
 .newsticker .thumbnail
 float: left;
 width: 130px;
 .newsticker .info
 margin-left: 10px;
 float: right;
 width: 190px;
 .newsticker .info span.cat
 color: #808080;
 display: block;
 font-size: 10px;
 .newsticker .info a
 color: #3c7acf;
 text-decoration: none;
 clear: both;
 <form id="form1" runat="server">
 <div class="title">
 Latest News</div>
 <asp:Repeater ID="dlNews" runat="server">
 <div class="newsticker">
 <input value="Previous" class="prev" type="button" />
 <div class="thumbnail">
 <img src='<%#Eval("ThumbNail")%>'>
 <div class="info">
 <a href='<%#Eval("URL")%>'>
 <%#Eval("Title")%></a> <span class="cat">Category:
 <div class="clear">
 <input value="Next" class="next" type="button" />

and in code behind add the following code

protected void Page_Load(object sender, EventArgs e)
 var list = (new[] {
 new {
 ThumbNail ="http://www.gallery2c.com/admin/Upload/ThumbNail/roan12.jpg",
 Title="The Knight and the Lady",
 new {
 ThumbNail ="http://www.gallery2c.com/admin/Upload/ThumbNail/roan15.jpg",
 Title="Rainbow Butterfly",
 Category="Abstract art"
 new {
 ThumbNail ="http://www.gallery2c.com/admin/Upload/ThumbNail/roan16.jpg",
 Title="Teddy Bear and MacBook",
 new {
 ThumbNail ="http://www.gallery2c.com/admin/Upload/ThumbNail/roan17.jpg",
 Title="The Family of Colors",
 dlNews.DataSource = list;

Hope this helps

Good Luck.

Categories: ASP.Net, Jquery
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: