Dynamic Drive DHTML Scripts- Featured Content Glider

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:

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

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

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:

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:

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:

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:

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

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:

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
)
}
}

Featured Content Glider

Set up Information

Setting up the pagination links

Notice about doctype and IE

The `onChange` event handler

Table Of Contents

Featured Content Glider

Set up Information

Setting up the pagination links

Notice about doctype and IE

The onChange event handler

Table Of Contents

The `onChange` event handler