New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE6+ Opera 9+

Featured Content Glider

Author: Dynamic Drive

Jan 23rd, 13: Updated to v2.6, which adds new onChange event handler, plus section on embedding YouTube videos inside the glider

Description: This script lets you painlessly showcase new or featured contents on your page, by turning ordinary pieces of HTML content into an interactive, "glide in" slideshow. For the ultimate in the ability to customize its look, the pagination links are also ordinary links that you define on the page, but with special CSS class names inserted when it should perform a certain task (ie: "toc" class if it's a pagination link). This means the pagination links can be styled and arranged any way you like. TLets see a rundown of the script's features now:

  • Both the contents to show as part of the glider plus the pagination links used to toggle them are created from ordinary HTML content on the page. The pagination links can be styled, arranged, even selectively removed anyway you like.
  • The gliding contents can be retrieved from an external file on your server via Ajax, instead of defining them inline on the page.
  • Pagination interface is gently faded into view.
  • Supports two different display modes- "manual" and "slideshow." In slideshow mode, the glider automatically rotates the contents until the user explicitly clicks on one of the pagination links to view a particular content.
  • With slideshow mode, specify optional number of cycles glider should go through in slideshow mode before it stops.
  • Supports keyboard navigation, whereby the left and right arrow keys when pressed moves the glider one panel back and forth. new in v2.5
  • Ability to configure the "glide in" duration (in milliseconds), plus glide direction..
  • Optional persistence feature to remember and recall the last content viewed by the user when they return to the page within the same browser session (session only cookies).
  • Support for an onChange event handler that fires whenever the Glider changes slides, to implement custom code that responds to this action. new in v2.6
  • Multiple Featured Content Sliders per page supported.

Demos (responds to left/right arrow keys):

Default example:

British Columbia is the westernmost of Canada's provinces and is famed for its natural beauty. It's capital is Victoria, located at the southeastern tip of Vancouver Island. BC's most populous city is Vancouver, located in southwest corner of the BC mainland called the Lower Mainland.
Ontario is a province located in the central part of Canada, the largest by population and second largest, after Quebec in total area. Toronto, the capital of Ontario, is the centre of Canada's financial services and banking industry.
Yukon, still commonly referred to as "The Yukon Territory", is the westernmost of Canada's three northern territories. The Yukon's major appeal is its nearly pristine nature. Tourism relies heavily on this and there are many organised outfitters and guides available to hunters and anglers and nature lovers of all sorts.

 
  • "Slideshow" mode enabled.
  • 3 seconds between content change, stops after 2 cycles.
  • Last content persistence off.
  • Glide animation duration: 500 milliseconds (0.5 seconds).
  • Glide direction: "downup"
Alternate example:

British Columbia is the westernmost of Canada's provinces and is famed for its natural beauty. It's capital is Victoria, located at the southeastern tip of Vancouver Island. BC's most populous city is Vancouver, located in southwest corner of the BC mainland called the Lower Mainland.
Ontario is a province located in the central part of Canada, the largest by population and second largest, after Quebec in total area. Toronto, the capital of Ontario, is the centre of Canada's financial services and banking industry.
Yukon, still commonly referred to as "The Yukon Territory", is the westernmost of Canada's three northern territories. The Yukon's major appeal is its nearly pristine nature. Tourism relies heavily on this and there are many organised outfitters and guides available to hunters and anglers and nature lovers of all sorts.
New Brunswick is one of Canada's three Maritime provinces, and is the only constitutionally bilingual province (French and English) in the federation. The New Brunswick Department of Finance estimates that the provincial population in 2006 was 729,997, of which a majority is English-speaking.
  • "Manual" mode enabled.
  • Last content persistence on.
  • Default content selected: 2nd content.
  • Glide animation duration: 1000 milliseconds (1 second).
  • Glide direction: "rightleft"
  • Square CSS buttons used as the pagination links

Directions: Developer's View

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

Select All

The code above references one CSS file plus two external .js files, which you need to download below (right click/ select "Save As"):

  1. featuredcontentglider.css (read inline comments for tips on customizing the default CSS)
  2. featuredcontentglider.js

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

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

Select All

It contains the HTML for the first demo you see above. That's it for installation! Lets move on to understanding how everything works.

Set up Information

The code of Step 2 shows how to apply the script to ordinary content on your page:

<script type="text/javascript">

featuredcontentglider.init({
 gliderid: "canadaprovinces", //ID of main glider container
 contentclass: "glidecontent", //Shared CSS class name of each glider content
 togglerid: "p-select", //ID of toggler container
 remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
 selected: 0, //Default selected content index (0=1st)
 persiststate: false, //Remember last content shown within browser session (true/false)?
 speed: 500, //Glide animation duration (in milliseconds)
 direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
 autorotate: true, //Auto rotate contents (true/false)?
 autorotateconfig: [3000, 2], //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
 onChange: function(previndex, curindex, $allcontents){ // fires when Glider changes slides
  //custom code here
 }
})

</script>

<div id="canadaprovinces" class="glidecontentwrapper">

<div class="glidecontent">
Glide content 1 here
</div>

<div class="glidecontent">
Glide content 2 here
</div>

<div class="glidecontent">
Glide content 3 here
</div>

</div>

<div id="p-select" class="glidecontenttoggler">
<a href="#" class="prev">Prev</a>
<a href="#" class="toc">Page 1</a> <a href="#" class="toc">Page 2</a> <a href="#" class="toc">Page 3</a>
<a href="#" class="next">Next</a>
</div>

A main DIV (ie: "canadaprovinces") should surround all of the individual contents to be glided, with each glided content also wrapped in a DIV of its own and tied together with its peers using a shared CSS class name (ie: "glidecontent"). The Toggler DIV isn't tied down to the Glider DIV structurally, and can be added anywhere on the page (give it a unique ID as well, ie: "p-select"). We'll discuss what you can add inside the Toggler DIV in the next section, but moving on for now, finally, call featuredcontentglider.init() and supply it with the IDs of the various contents you've just defined, among other things, to get things going:

<script type="text/javascript">

featuredcontentglider.init({
 gliderid: "canadaprovinces", //ID of main glider container
 contentclass: "glidecontent", //Shared CSS class name of each glider content
 togglerid: "p-select", //ID of toggler container
 remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
 selected: 0, //Default selected content index (0=1st)
 persiststate: true, //Remember last content shown within browser session (true/false)?
 speed: 500, //Glide animation duration (in milliseconds)
 direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
 autorotate: true, //Auto rotate contents (true/false)?
 autorotateconfig: [3000, 2], //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
 onChange: function(previndex, curindex, $allcontents){ // fires when Glider changes slides
  //custom code here
 }
})

</script>

There are 8 parameters in total you can customize. Note the 3 red values- these must match the corresponding IDs you assigned in the HTML portion of the script! Allow me to draw your attention to the last 2 parameters on the list:

autorotate: true, //Auto rotate contents (true/false)?
autorotateconfig: [3000, 2] <!-- No comma after the last parameter!

Notice how there's a comma following the 2nd to last parameter (and every other before it), but not after the final parameter. This convention is required! You will be starred at with simply a disappointed look if your problems with getting this script to run traces back to you having mistakenly added a comma to the last parameter as well. BTW, the last parameter:

"autorotateconfig: [3000, 2]" 

lets you control the pause between content rotations, plus how many cycles to rotate before stopping, respectively. For the later, a value of 0 would cause it to rotate perpetually (until a pagination link is clicked on).

Setting up the pagination links

The pagination links (aka The Toggler) are defined manually by you inside a DIV with a unique ID:

<div id="p-select" class="glidecontenttoggler">
<a href="#" class="prev">Prev</a>
<a href="#" class="toc">Page 1</a> <a href="#" class="toc">Page 2</a> <a href="#" class="toc">Page 3</a> <a href="#" class="next">Next</a>
</div>

You insert 3 different CSS class names as desired to give certain links special meaning. They are:

  • toc: A link with this CSS class will act as a pagination link. You should define as many such links as there are gliding contents to show. You do not necessarily need to know in advance how many gliding contents there are, however, as redundant "toc" links will automatically be hidden by the script.

  • prev: A link with this CSS class moves back the shown content by 1.

  • next: A link with this CSS class moves forward the shown content by 1.

With that in mind, which links to show, how they are arranged, and how they are styled are all up to you. Here's an example of showing just "previous" and "next", navigational links and using images:

<div id="p-select" class="glidecontenttoggler">
<a href="#" class="prev"><img src="back.gif" /></a> <a href="#" class="next"><img src="forward.gif" /></a>
</div>

The freedom is yours at the expense of a little manual work. On the following page, you can see the CSS and HTML used to render the gray CSS pagination buttons used in the 2nd demo above.

Notice about doctype and IE

Note that the CSS used to style this script assumes that your page contains a valid doctype at the very top in order to display properly in IE. This is due to IE's buggy support of CSS and the Box Model. Of course you're free to modify the CSS in any way to get the desired look.

This script consists of an index page plus two supplementary pages. On the next page, see how to replace the default pagination links in the 1st demo with more fancy, gray CSS pagination buttons used in the 2nd demo instead.

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 Glider changes slides. It is automatically fed 3 parameters, the index of the last slide viewed, the index of the current visible slide, and finally, an array-like jQuery object referencing all of the slides to let you access a particular one:

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

When the Glider first loads on the page, the first two parameters point to the same slide. The count starts at 0, meaning 0 indicates the 1st slide, 1 the second etc. The below logs the textual contents of the previous and current slide, respectively, in the browser console:

onChange: function(previndex, curindex, $allcontents){
 if (previndex != curindex){ // if this isn't the first slide shown when page loads
  console.log(
   $allcontents.eq(previndex).text(), // previous slide's textual contents
   $allcontents.eq(curindex).text() // current slide's textual contents
  )
 }
}

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

Table Of Contents

This script consists of an index page plus two supplementary pages: