jQuery Text Carousel

Download

As part of my research at the University of Southampton, I worked on a demonstrator that found trending images on Twitter from their content. As part of this demonstrator, we had a visualisation that showed the tweets which used the images. For this I wrote a jQuery plugin that displayed text as a slide carousel.

Here's an example showing a set of quotes.

The size of the wrapper above has been fixed to avoid the page bobbing up and down.

To use it, you first need to include a few other javascript libraries. In particular, you require jQuery and the jQuery widget factory, but the code also uses jquery.timers (for its animation).

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="/js/TextCarouselWidget-1.0.js"></script>

Create an element in the page and then apply the text carousel widget to it, just as you would with any jQuery widget:

<div id="tc"></div>
<script type="text/javascript">
	$('#tc').textCarousel();
</script>

To add text to the carousel, use the addText method. This takes three parameters: the text itself, a title and a date. Actually, the title and date are just strings so you can use them for any information. When I was using them for tweets, I used the title for the user identifier of the tweeter and the date for the date and time of the tweet.

$('#tc').textCarousel( 'addText', "text", "title", "date" );

You can call addText as many times as you like and the text will be appended to the list of items in the carousel. If you need to reset the list, there's a method emptyList which will empty the carousel.

The code is released under the MIT license, which basically means you can do whatever you like except pretend it's yours.

Comments