topical media & game development
lib-jquery-plugin-news-slider.htm / htm
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Accessible News Slider: A jQuery Plugin</title>
<link rel="stylesheet" href="lib-jquery-plugin-news-jquery.accessible-news-slider.css" type="text/css" media="screen" />
<script language="javascript" type="text/javascript" src="lib-jquery-plugin-news-jquery-1.2.6.pack.js"></script>
<script language="javascript" type="text/javascript" src="lib-jquery-plugin-news-jquery.accessible-news-slider.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$( "#example_1" ).accessNews({
headline : "Candy Coated",
speed : "normal",
slideBy : 2
});
$( "#example_2" ).accessNews({
headline : "Business as Usual",
speed : "slow",
slideBy : 3
});
});
</script>
</head>
<body>
<div class="accessible_news_slider candy_coated" id="example_1">
<p class="javascript_css">
<strong>Please Note:</strong> You may have disabled JavaScript and/or CSS. Although this news content will be accessible, certain functionality is unavailable.
</p>
<p class="skip_to_news"><a href="#skip_to_news">Skip to News</a></p>
<p class="back"><a href="#" title="Back">« back</a></p>
<p class="next"><a href="#" title="Next">next »</a></p>
<a name="skip_to_news"></a>
<ul>
<li>
<a href="/"><img src="lib-jquery-plugin-news-images-themes-candy-coated-photo.jpg" width="75" height="75" alt="Delicious Candy Photo" /></a>
<p>
<a href="/">Sed imperdiet faucibus dui. Etiam malesuada.</a><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet felis. Etiam malesuada.
</p>
</li>
<li>
<a href="/"><img src="lib-jquery-plugin-news-images-themes-candy-coated-photo.jpg" width="75" height="75" alt="Delicious Candy Photo" /></a>
<p>
<a href="/">Sed imperdiet faucibus dui. Etiam malesuada.</a><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet felis. Etiam malesuada.
</p>
</li>
<li>
<a href="/"><img src="lib-jquery-plugin-news-images-themes-candy-coated-photo.jpg" width="75" height="75" alt="Delicious Candy Photo" /></a>
<p>
<a href="/">Sed imperdiet faucibus dui. Etiam malesuada.</a><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet felis. Etiam malesuada.
</p>
</li>
<li>
<a href="/"><img src="lib-jquery-plugin-news-images-themes-candy-coated-photo.jpg" width="75" height="75" alt="Delicious Candy Photo" /></a>
<p>
<a href="/">Sed imperdiet faucibus dui. Etiam malesuada.</a><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet felis. Etiam malesuada.
</p>
</li>
<li>
<a href="/"><img src="lib-jquery-plugin-news-images-themes-candy-coated-photo.jpg" width="75" height="75" alt="Delicious Candy Photo" /></a>
<p>
<a href="/">Sed imperdiet faucibus dui. Etiam malesuada.</a><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet felis. Etiam malesuada.
</p>
</li>
<li>
<a href="/"><img src="lib-jquery-plugin-news-images-themes-candy-coated-photo.jpg" width="75" height="75" alt="Delicious Candy Photo" /></a>
<p>
<a href="/">Sed imperdiet faucibus dui. Etiam malesuada.</a><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet felis. Etiam malesuada.
</p>
</li>
<li>
<a href="/"><img src="lib-jquery-plugin-news-images-themes-candy-coated-photo.jpg" width="75" height="75" alt="Delicious Candy Photo" /></a>
<p>
<a href="/">Sed imperdiet faucibus dui. Etiam malesuada.</a><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet felis. Etiam malesuada.
</p>
</li>
</ul>
</div>
<div class="accessible_news_slider business_as_usual" id="example_2">
<p class="javascript_css">
<strong>Please Note:</strong> You may have disabled JavaScript and/or CSS. Although this news content will be accessible, certain functionality is unavailable.
</p>
<p class="skip_to_news"><a href="#skip_to_news">Skip to News</a></p>
<p class="back"><a href="#" title="Back">« back</a></p>
<p class="next"><a href="#" title="Next">next »</a></p>
<a name="skip_to_news"></a>
<ul>
<li>
<a href="/"><img src="lib-jquery-plugin-news-images-themes-business-as-usual-photo.jpg" width="75" height="75" alt="Business Photo" /></a>
<p>
<a href="/">Sed imperdiet faucibus dui. Etiam malesuada.</a><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet felis.
</p>
</li>
<li>
<a href="/"><img src="lib-jquery-plugin-news-images-themes-business-as-usual-photo.jpg" width="75" height="75" alt="Business Photo" /></a>
<p>
<a href="/">Sed imperdiet faucibus dui. Etiam malesuada.</a><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet felis.
</p>
</li>
<li>
<a href="/"><img src="lib-jquery-plugin-news-images-themes-business-as-usual-photo.jpg" width="75" height="75" alt="Business Photo" /></a>
<p>
<a href="/">Sed imperdiet faucibus dui. Etiam malesuada.</a><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet felis.
</p>
</li>
<li>
<a href="/"><img src="lib-jquery-plugin-news-images-themes-business-as-usual-photo.jpg" width="75" height="75" alt="Business Photo" /></a>
<p>
<a href="/">Sed imperdiet faucibus dui. Etiam malesuada.</a><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet felis.
</p>
</li>
<li>
<a href="/"><img src="lib-jquery-plugin-news-images-themes-business-as-usual-photo.jpg" width="75" height="75" alt="Business Photo" /></a>
<p>
<a href="/">Sed imperdiet faucibus dui. Etiam malesuada.</a><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet felis.
</p>
</li>
<li>
<a href="/"><img src="lib-jquery-plugin-news-images-themes-business-as-usual-photo.jpg" width="75" height="75" alt="Business Photo" /></a>
<p>
<a href="/">Sed imperdiet faucibus dui. Etiam malesuada.</a><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet felis.
</p>
</li>
<li>
<a href="/"><img src="lib-jquery-plugin-news-images-themes-business-as-usual-photo.jpg" width="75" height="75" alt="Business Photo" /></a>
<p>
<a href="/">Sed imperdiet faucibus dui. Etiam malesuada.</a><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet felis.
</p>
</li>
<li>
<a href="/"><img src="lib-jquery-plugin-news-images-themes-business-as-usual-photo.jpg" width="75" height="75" alt="Business Photo" /></a>
<p>
<a href="/">Sed imperdiet faucibus dui. Etiam malesuada.</a><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet felis.
</p>
</li>
</ul>
</div>
</body>
</html>
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
