jQuery Product and News Slider

Present your news/posts or products in a cool way!

You can fully customize this component, including:

• Thumbnails position (top/bottom/left/right) and size based on position.
• Captions visibility and positioning (top/middle/bottom).
• Links beaviour.
• Size (make it fit your column width/height).
• Auto sizing setup (let the component decide the better size for you).
• Timing/Intervals.
• Full CSS editable.

Fully tested on:

1. IE8+
2. FF4+
3. Chrome 10+
4. Safari 5+

Usage

The HCNS plugin is extremely simple to use.

1 Create a new HTML file.

2 Copy the 'css' and 'js' folders into the same directory where your HTML file is.

3 Create an 'img' folder and news.xml file in the same folder where your HTML file is and place some images in it. Modifiy news.xml as you need.

In this example we will assume that the large images are named pic1.jpg, pic2.jpg, pic3.jpg and so on. And that their corresponding thumbnails are named pic1_small.jpg, pic2_small.jpg, pic3_small.jpg, etc.

4 Import the default and HCNS style sheets:

<link type="text/css" rel="stylesheet" href="css/style.css"></link>
<link type="text/css" rel="stylesheet" href="css/hcns.css"></link>     

5 Import the latest version of jQuery and the HCNS plugin files:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script defer src="js/plugins.js"></script>
<script defer src="js/script.js"></script>

6 Add the following markup to the body of the HTML file:

<div id="hcns_main">
</div>

7 Modify /js/script.js to setup your options:

$('#hcns_main').HCNewsSlider({
    'xml': 'news.xml', //your XML file
    'showCaptionsInThumbs': 'true', //define if show captions over thumbnails
    'captionsVerticalAlign': 'top', //if captions on, define their position (top/middle/bottom).
    'openMainLinkInBlank': 'true', //determine if main link opens in new window or not.
    'thumbsPosition': 'top', //define thumbnails section position (top/bottom/left/right).
    'width': '600px', 
    'height': '300px',
    'autoSizeHeight': 'true', //auto adjusts height based on thumbnails count.
    'autoSizeWidth': 'true', //auto adjusts width based on thumbnails count.
    'timing': '5000' //define interval between main item changes.
});

You can now test the HTML file in a browser to see your slider working.