Getting Started

Include necessary files in your HTML document

First of all include all necessary files in the head part of your HTML document.

Include the CSS file:

<link href="css/jquery.fancyNews.css" rel="stylesheet" type="text/css" />
<link href="" rel="stylesheet" type="text/css" />
Include the Javascript files:
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery.fancyNews.min.js" type="text/javascript"></script>

If you already include jquery in your page, you do not need the include. Please use jQuery 1.7 or higher!. You get the latest version of jquery here. The plugin needs also some libraries from jQuery UI, my jQuery UI has the core, widget, mouse, draggable and effect included.

Move also the images/fancyNews folder in your directory!

Setting up the content

First create a div element with an unique id anywhere in your body part of your HTML document.

<div id="fancy-news"></div>
Now decide if you would like to run the news slider with a RSS feed or with custom articles in your HTML document.

Using RSS feed

If you run it with a RSS feed, just pass the URL of your RSS feed in the options:

Using self-written articles

You already created the div, where you need to add your articles. This is how an article look like:

<div id="fancy-news">
  <div title="{DATE}">
    <img src="{URL_OF_THUMBNAIL}" /><div title="{TITLE}">{DESCRIPTION}</div>
  <!-- Add here more articles-->
If you would like to use links on the preview elements, you need to add an additional data-link attribute:
<div id="fancy-news">
  <div title="{DATE}" data-link="{URL_OF_WEBSITE}">
    <img src="{URL_OF_THUMBNAIL}" /><div title="{TITLE}">{DESCRIPTION}</div>
  <!-- Add here more articles-->

Call the plugin

To create the slider from these articles, just call it with the selector #fancy-news:

Using Options

You can use a lot of options to customize your slider by your needs.

Available Options

Option Explanation Default Value
width The width for the slider in px. 500
height The height for the slider in px. 420
offset The offset between the previews in px 2
previewsPerPage The number of previews per page. 3
numOfEntries The number of blog entries to load (only for RSS feed). 10
slideTime The slide time in ms. 0
feed An URL to a RSS feed. ''
backgroundColor The background color for all elements. '#1A1A1A'
backgroundOverColor The background color when you move your mouse over a preview element. '#0C0C0C'
useLinks Set it to true to enable the links on preview elements. false
targetWindow The target for the links, choice between '_self' or '_blank'. '_blank'
Since V2.0:
Set it to true to enable the infinite loop when scrolling. When enabling this option, it will also hide the post count element. false
Since V2.0:
Show(true) or hide(false) the navigation arrows. true
Since V2.0:
Enable(true) the vertical scrolling. false
Since V2.0:
A callback function that will be called when the preview list created. function() {}
Since V2.0.2:
The text that should be added at the end of the excerpt. '[....]'
Since V2.0.2:
The text color. '#333333'
Since V2.0.2:
The primary color for headlines, image border and icons. '#7F8C8D'
Since V2.0.2:
Center the slider to his parent element. false
Since V2.0.4:
You need to get an API key to load rss feeds from here ''

$('#fancy-news').fancyNews({width: 700, height: 300, useLinks: true, slideTime: 3000})


To V2.0.4

Replace jquery.fancyNews.js. If you are loading RSS feeds with the plugin, you have to get an API key from here and set it in the rssApiKey option.

To V2.0.2

Replace the necessary css and js files.

Updates files

  • jquery.fancyNews.css
  • jquery.fancyNews.js
  • jquery.fancyNews.min.js

To 2.0

Replace the fancyNews files (CSS and JS) with yours. You also need to replace the images/fancyNews folder with yours. Check also at the top of the bottom, which files you do not need to include anymore.

© 2013 |