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:
- 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.
|
|
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.
|
|
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:
<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:
<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: