#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
Basically mimics Yahoo's (http://www.yahoo.com) content slider.
// 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
});
Each story that you want in the slider must have contain at a minimum:
-
an image wrapped in a link to the story page.
-
a container for the title
-
a container for the description
-
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, 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 can be found here.
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.
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