|
| ||
|
|
|
Directions: 
Step 1: Insert the following code in the HEAD section of your page
The code above references one CSS file plus two external .js files, which you need to download below (right click/ select "Save As"):
- featuredcontentglider.css (read inline comments for tips on customizing the default CSS)
- 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:
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:
Glide content 1 here
Glide content 2 here
Glide content 3 here
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:
"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:
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:
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.
