#Yahoo style news slider for jQuery

All credit for this plugin goes to:

Brian Reindel (http://blog.reindel.com) Andrea Ferracani (http://www.micc.unifi.it/ferracani)

You can read more about the plugin at Andrea's blog:

http://www.micc.unifi.it/ferracani/blog/web-applications/yahoo-style-news-slider-jquery-plugin

About

Basically mimics Yahoo's (http://www.yahoo.com) content slider.

Configuration

// title for the display
title: "TODAY NEWS:",
// subtitle for the display
subtitle: "November 27 2010",
// number of slides to advance when paginating
slideBy: 4,
// the speed for the pagination
speed: "normal",
// slideshow interval
slideShowInterval: 5000,
// delay before slide show begins
slideShowDelay: 5000,
// theme
theme: "default",
// allow the pagination to wrap continuously instead of stopping when the beginning or end is reached 
continuousPaging : true,
// selector for the story title
contentTitle: "h3",
// selector for the story subtitle
contentSubTitle: "abbr",
// selector for the story description
contentDescription: "p",
// function to call when the slider first initializes
onLoad: null,
// function to call when the slider is done being created
onComplete: null

##Installation

Load the desired theme, jquery and plugin within your page's head section:

<!-- base theme css files -->
<link type="text/css" rel="stylesheet" href="themes/base.css"/>
<!-- desired theme -->
<link type="text/css" rel="stylesheet" href="themes/default/theme.css"/>
<!-- jquery itself -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<!-- plugin -->
<script type="text/javascript" src="jquery.accessible-news-slider.js"></script>

##Usage

// use default
jQuery('#newsslider').accessNews();

// passing in options
jQuery('#newsslider2').accessNews({
	title : "BREAKING NEWS:",
	subtitle:"stories from the internet",
	speed : "slow",
	slideBy : 4,
	slideShowInterval: 10000,
	slideShowDelay: 10000
});

Requirements

Each story that you want in the slider must have contain at a minimum:

1. an image wrapped in a link to the story page.

2. a container for the title

3. a container for the description

   • 

     Luca Farulli interview

     Luca Farulli, professor of Aesthetics at the Academy of Fine Arts of Venice, is the owner of the course of aesthetics of digital art and coordinator of the workshop for the Master of Arts and Multimedia
     » read more

   • 

     Diego Mencarelli interview

     Diego Mencarelli, new media consultant at Unicoop Tirreno, co-teaches a course on human-machine interface design, in particular the module dedicated to accessibility and web W3C standards
     » read more

Demos

Demos can be found here.

Themes

This plugin was built with themes in mind to make it easy for you to customize it for the look and feel of your site. Because of this, there are several classes that the plugin utilizes. Below is a list of those classes and a description of what each is for.

Classes

jqans-wrapper

this is the main div that will encapsulate the plugin.

jqans-container

main container for encapsulating the headline and and story content

jqans-headline

container for the headline and subtitle of the story

jqans-content

container for the story content (image and blurb)

jqans-stories

wraps around the ul containing the stories that you want the slider to showcase

jqans-stories-selector

used to indicate which story is selected to shown in the slider

jqans-pagination

container for page count and previous and next links

jqans-pagination-count

wrapper for the parts that make up the pagination counter

jqans-pagination-count-start

story position for the start of page

jqans-pagination-count-end

story position for the end of the page

jqans-pagination-count-total

total number of stories in the slider

jqans-pagination-controls

wrapper for the previous and next controls

jqans-pagination-controls-back

wrapper containing the anchor that controls moving to back a page

jqans-pagination-controls-next

wrapper containing the anchor that controls moving to the next page