Newscoop 4.1 Cookbook
Ticker with jQuery
Do you want a BBC-style ticker like the one on http://wadr.org/ driven by Newscoop? Of course you do!
Everything important is in this code:
<div id="ticker-wrapper" class="no-js">
<ul id="js-news" class="js-hidden">
{{ list_articles length="5" order="bypublishdate desc" constraints="section is 5" }}
<li class="news-item">
<a href="{{ uri options="article" }}" >{{ $gimme->article->name }}</a>
</li>
{{ /list_articles }}
</ul>
</div>
This code selects the last five published articles from section number 5 and creates an unordered list of article names, also linking them to the full article page.
Add some jQuery magic:
$(document).ready(function(){
$('#js-news').ticker({
titleText: 'WADR Highlights'
});
});
The engine behind this is the jQuery News Ticker (http://www.jquerynewsticker.com/), so be sure to have all necessary includes in their place, in _html-head.tpl
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="http://{{ $gimme->publication->site }}/templates/js/jquery-1.5.1.min.js"%3E%3C/script%3E'))</script>
<script type="text/javascript" src="http://{{ $gimme->publication->site }}/templates/js/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript" src="http://{{ $gimme->publication->site }}/templates/js/jquery.ticker.js"></script>
and also the css file that belongs to it:
<link type="text/css" rel="stylesheet" href="http://{{ $gimme->publication->site }}/templates/css/highlights.css" />
This is of course just one of hundreds of different solutions that you can find on the Internet, so feel free (and encouraged) to explore and play with other toys!