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"
 type="text/javascript"></script>
 <script type="text/javascript">
 $(function() {
 $(".newsticker").jCarouselLite({
 visible: 3,
 btnNext: ".next",
 btnPrev: ".prev"
 });
 });
 </script>
 <style>
 .newsticker ul li
 {
 display: block;
 list-style: none outside none;
 margin-bottom: 5px;
 margin-left:10px;
 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
 {
 clear: both;
 }
 </style>
</head>
<body>
 <form id="form1" runat="server">
 <div class="title">
 Latest News</div>
 <asp:Repeater ID="dlNews" runat="server">
 <HeaderTemplate>
 <div class="newsticker">
 <input value="Previous" class="prev" type="button" />
 <ul>
 </HeaderTemplate>
 <ItemTemplate>
 <li>
 <div class="thumbnail">
 <img src='<%#Eval("ThumbNail")%>'>
 </div>
 <div class="info">
 <a href='<%#Eval("URL")%>'>
 <%#Eval("Title")%></a> <span class="cat">Category:
 <%#Eval("Category")%></span>
 </div>
 <div class="clear">
 </div>
 </li>
 </ItemTemplate>
 <FooterTemplate>
 </ul>
 <input value="Next" class="next" type="button" />
 </div>
 </FooterTemplate>
 </asp:Repeater>
 </form>
</body>
</html>

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",
 URL="http://www.vladstudio.com/wallpaper/?knight_lady",
 Title="The Knight and the Lady",
 Category="Illustrations"
 },
 new {
 ThumbNail ="http://www.gallery2c.com/admin/Upload/ThumbNail/roan15.jpg",
 URL="http://www.vladstudio.com/wallpaper/?rainbow_butterfly",
 Title="Rainbow Butterfly",
 Category="Abstract art"
 },
 new {
 ThumbNail ="http://www.gallery2c.com/admin/Upload/ThumbNail/roan16.jpg",
 URL="http://www.vladstudio.com/wallpaper/?teddybear_mac",
 Title="Teddy Bear and MacBook",
 Category="Photos"
 },
 new {
 ThumbNail ="http://www.gallery2c.com/admin/Upload/ThumbNail/roan17.jpg",
 URL="http://www.vladstudio.com/wallpaper/?family_of_colors",
 Title="The Family of Colors",
 Category="Creatures"
 }
 }).ToList();
 dlNews.DataSource = list;
 dlNews.DataBind();
 }

Hope this helps

Good Luck.

Advertisements
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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: