• Calendars
• Date & Time
• Document Effects
• Dynamic Content
• Form Effects
• Games
• Image Effects
• Links & Tooltips
• Menus & Navigation
• Mouse and Cursor
• Scrollers
• Text Animations
• User/System Preference
• Window and Frames
• Other
• XML and RSS

• Script Forums
• Recommend Us
• Usage Terms
• Free JavaScripts

• IE5+: IE 5 and above
• FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
• Opr7+: Opera 7 and above.

Jan 23rd, 13: Updated to v2.5, which modifies onChange event handler behaviour for more robustness , plus added section on embedding YouTube videos inside the Slider.

Description: Featured Content Slider makes a slideshow out of arbitrary content on your page, so users can manually select a content to see or have them rotated automatically. Each content is defined simply inline on the page as regular HTML, or altogether inside a single external file and fetched via Ajax instead. Where this script shines is the versatile pagination links interface, which can be customized in a variety of ways. You may have such a script on the frontpage of sites such as Rottentomatoes and Gamespot, though the difference is that Featured Content Slider is Flash free!

And with the introduction out of the way, here's a listing of Featured Content Slider v2.0's features:

• Supports two ways of embedding the contents to feature- plain HTML contained inside DIV tags, or altogether in a single external file on your server, then fetched via Ajax.
• "Manual" or "auto" display mode- For the later, the slider automatically rotates the contents until the user explicitly selects a content to view (clicks anywhere inside Featured Content slider).
• Optional fade effect to be applied each time the content changes.
• Extremely customizable pagination links. You can either have the script automatically generate them, or manually define arbitrary links that with a specific CSS class name added, tells the script that this is a pagination link.
• Specify whether the contents should be revealed "click" or "mouseover" over the pagination links. Default is former. v2.3 feature
• Call the function featuredcontentslider.jumpTo() anywhere on your page to jump to a particular slide within a particular Content Slider instance. v2.3 feature
• Ability to select a particular slide when the page first loads using a URL parameter (ie: mypage.htm?myslider=4). v2.4 feature
• Cookies are used to remember and recall the last content viewed by the user when they return to the page.
• Supports a custom "onChange" event handler that is fired each time the script changes slides. Use it to run custom code based on the current and previous slides' indices relative to its peers.

Nifty!

Demos:

SuckerTree Menu (h) SuckerTree Horizontal Menu is a CSS and DOM hybrid menu that's list based and supports multiple levels of sub menus. Half moon tab menu We named this CSS tab menu "Half Moon" based on its look. The menu uses a transparent background image for each tab item to create a right round edge. Slanted Divider Menu This is an elegant CSS menu bar that uses a transparent "slanted" image to act as a divider and separate each menu item. Auto display mode (until you click on a pagination link). Contents defined inline on the page. Fade effect disabled. Pagination links automatically generated as sequential numbers.

Manual Mode Contents defined inline on the page. Pagination links automatically generated, with each label user defined. "Previous" button hidden. Fade transition slowed down. Reload page and have the 2nd slide loaded by default using a URL parameter

Home Slide 1 Slide 2 Slide 3 > Manual Mode Contents fetched via Ajax from an external file (fcs.htm). Pagination links created using HTML markup within pagination DIV.

Auto display mode (until you mouse over pagination links or click on the slider) Pagination links created using HTML markup within pagination DIV. Contents revealed "mouseover" instead of the default "click".

Directions:

Step 1: Insert the following code in the HEAD section of your page

The code above references two external files plus an Ajax image, which you need to download below (right click/ select "Save As"):

1. contentslider.css
2. contentslider.js
3. loading.gif

By default, upload these files into the same directory as where your webpage resides.

Step 2: Insert the below sample code into the BODY section of your page:

That's it! Continue reading for some helpful information.

HTML and CSS Structure

The code of Step 2 illustrates the basic setup of a Featured Content Slider:

You always start out with a master DIV that carries a unique yet arbitrary ID (ie: "slider1"). For inline definition of its contents, add each piece of content within this DIV, each wrapped around a DIV of its own with the special CSS class "contentdiv". For the pagination DIV, always define a an arbitrary DIV with the ID "paginate-SliderID", substituting "SliderID" with the ID of the master DIV.

Following the HTML is the initialization code for this particular Slider. Various options are supported, among them:

• contentsource: ["inline", ""],: Specifies where the contents are defined. Set to ["ajax", "fcs.htm"] if they are defined inside the external file "fcs.htm", with each content wrapped inside a DIV with CSS class "contentclass" just like if they were defined inline.

• toc: "#increment",: Sets how the "Table of Contents" links are generated. Valid values are "#increment", "markup", or "[label1, label2, etc]". See "Customizing the Pagination interface" for details.

• enablefade: [true/false, 0.2],: Enables or disables the fade transition. If the former, the value 0.2 (out of 1) controls by how much during each effect cycle. Reasonable values are 0.1 to 0.5.

• onChange: function(previndex, curindex){}: Event handler that fires whenever the Slider changes slides, including when the page first loads. Each time the "previndex" and "curindex" parameters is updated with the index of the last slide and current slide, respectively. Add your own code inside this event handler if desired.

The initial look of your Featured Content Slider is dictated by the CSS file "contentslider.css". While editing it, pay close attention to the comments on values that should be treated with care.

Specifying an external content source using Ajax

You can define all of the "contentdiv" contents inside an external file on the server and have the script retrieve it via Ajax. This is done by setting the "contentsource" parameter as follows:

contentsource: ["ajax", "path_to_file"],

When you do this, the master slider DIV on your page can be empty:

<div id="slider1" class="sliderwrapper">
//Empty
</div>

<div id="paginate-slider1" class="pagination">

</div>

as the content DIVs are declared inside the external file in question following the same convention of wrapping each content inside a DIV with the  CSS class "contentdiv" (ie: "fcs.htm").

Customizing the Pagination interface

The pagination interface of your Featured Content Slider can be fine tuned in 3 ways depending on how much control you want over the final output. The parameter "toc" supports 3 possible settings, which are:

toc: "#increment" OR "markup" OR ["label1", "label2", "label3", etc],

With "#increment", the script will automatically output each pagination link, replacing "#increment" with the numbers 1, 2, 3, and so on. You can add additional text to be repeated alongside #increment each time, such as "page#increment" or even "<img src='#increment.gif' />".

With "markup", the script doesn't automatically output the pagination links, but instead looks inside the pagination DIV (with ID "paginate-SliderID") for any user defined links that carry the following 3 CSS class names:

1. class="toc": Tells the script that this link is a Table of Contents link.
2. class="next": Tells the script that this link is a "Next" pagination link.
3. class="prev": Tells the script that this link is a "Previous" pagination link.

The links can be set up however you like, whether it's a text link, an image link etc- to give it special meaning, just assign one of the CSS class names above to it. Since you may not know in advanced how many contents are within the Slider (and hence not know how many class="toc" links to define), you can in fact define more class="toc" links than there are contents, and the script will auto hide the excess ones come initiliazation.

With ["label1, "label2", etc], it behaves similar to "#increment" in that the script outputs the pagination links dynamically, except you get to customize the label for each link fully, for example ["page1", "page2"] or ["<img src='1.gif' />", "<img src='2.gif' />"].

For more details, see the supplementary page "Three ways to output the pagination interface- in detail".

Jumping to a particular slide manually by calling  featuredcontentslider.jumpTo()

Apart from changing slides via the automatically generated pagination links, you can also manually jump to a particular slide within a particular Featured Content Slider instance by calling the function:

featuredcontentslider.jumpTo("sliderID", pagenumber)

where the 1st parameter is the ID of your main Featured Content Slider DIV id, and the 2nd is the page (aka slide) to jump to (1st page=1, 2nd=2 etc). Here's an example using a link:

<a href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 3rd slide within FCS with ID="slider1"</a>

Select a particular slide automatically when the page first loads using a URL parameter

When a Featured Content Slider first loads, it either defaults to loading the first slide, or if persistence is enabled, the last viewed slide. You can override both of these settings, and use a URL parameter to force a particular slide to be shown initially. This is useful for creating links elsewhere on the site that when clicked on loads different slides by default on the target page. To do this, add to the target page's (containing Featured Content Slider) URL the parameter:

targetpage.htm?sliderid=pagenumber

where "sliderid" is the ID of the Featured Content instance on the page, and "pagenumber" is an integer for the slide you wish to be shown (1=1st page, 2=2nd etc). For example, here's a link that reloads the current page and causes the 4th slide of the 2nd demo above (upper right) to be selected by default:

<a href="featuredcontentslider.htm?slider2=4">Have 4th slide within "slider2" shown by default</a> (the link)

The onChange event handler

The final option within the initialization code is a custom event handler "onChange", where you can insert custom code to execute whenever the Slider changes slides. It is automatically fed 3 parameters, the index of the last slide viewed, and the index of the current visible slide, and an array containing all of the slides (DIV containers) to let you access a specific one:

onChange: function(previndex, curindex, contentdivs){
//custom code here
}

When the Slider first loads on the page, the two parameters point to the same slide. The count starts at 0, meaning 0 indicates the 1st slide, 1 the second etc. One sample usage is to stop a video playing on the previous slide when a new slide is brought up:

onChange: function(previndex, curindex){
if (previndex==curindex) //if two indices point to the same slide (page first loads)
 return //do nothing
else if (previndex==0) // if first slide
 videoplayer.stop("cats")
else if (previndex==1) // if second slide
 videoplayer.stop("dogs")
else if (previndex==2)
 videoplayer.stop("myvacation")
}

This assumes videoplayer.stop() is some function that stops the playing of a video inside your slides.

See the onChange event handler/ Embedding YouTube videos section for more info.

Table Of Contents

This script consists of an index page plus one supplementary page:

• Script Index Page
• Three ways to output the pagination interface- in detail
• The onChange event handler/ Embedding YouTube videos