Three ways to output the pagination interface- in detail

As explained on the main page, the pagination interface can be output in 3 different ways depending on how much control you need to have over the look/format of the pagination links. The parameter "toc" within the initialization code accepts 3 different values for this purpose. Lets take a look at all 3 in detail.

toc: "#increment"

This setting causes the pagination links to be automatically generated by the script inside the Pagination DIV (with ID "paginate-SliderID"), with "#increment" itself being replaced each time by an integer (1=1st slide, 2=2nd slide etc). Additional text can surround the "#increment" keyword to be added to the output of each generated link. The following three example values are all valid:

  • toc: "#increment"
  • toc: "Page #increment"
  • toc: "<img src='images/#increment.gif' />"

The 3rd example displays images as the pagination links with the assumption that each image is named sequentially. When "toc" is set to "#increment", the "Previous" and "Next" links are also auto generated per the "nextprev" parameter:

nextprev: ["Previous", "Next"],

HTML can be entered in place of plain text. If you wish to  hide one of these controls, enter "" instead, for example:

nextprev: ["", "Next"], //hide "Previous" control

toc: "markup"

The most liberal of the 3 possible settings, by setting "toc" to "markup", the script will not automatically generate the pagination links, but instead look for any links inside the Pagination DIV (with ID "paginate-SliderID") that hold special meaning. This means you can customize the format/look of the links in any way you wish. Inside the Pagination DIV, simply give links that you wish to act as controls one of the below 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.

Here's an example:

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

<a href="http://google.com">Google</a> <a href="#" class="toc">My Dog</a> <a href="#" class="toc anotherclass">My Cat</a> <a href="#" class="toc">Bob and Sue</a> <a href="#" class="prev">&lt;</a> <a href="#" class="next">&gt;</a>

</div>

Links that don't carry one of these class names will simply act as normal links (ie: Google). Nothing above is mandatory- if you leave everything out, then there simply will be no pagination links for the user to utilize!

You may not always know in advanced how many contents are within your  Slider, and hence not know how many class="toc" links to define. This is why you can in fact define more class="toc" links than there are contents, and the script will automatically hide the excess ones come initiliazation. So define 10 class="toc" links just to be sure for example, even though you don't anticipate having more than 4 or 5 contents within your Slider most of the time.

The advantage of the "markup" setting is the total control you have over the pagination links when you need it. Lets see an example of using arbitrary thumbnail images as the pagination links, defined manually on the page:

<style type="text/css">

#slider4{
border-color: darkred;
margin-left: 15px;
height: 280px
}

#paginate-slider4{
background-color: darkred;
border-color: darkred;
margin-left: 15px;
}

#paginate-slider4 a img{
width: 80px;
height: 60px;
border: 2px solid gray;
margin-top: 5px;
}

#paginate-slider4 a img:hover, #paginate-slider4 a.selected img{
border: 2px solid red;
}

</style>
<body>

<div id="slider4" class="sliderwrapper">

<div class="contentdiv" style="background: url(horses.jpg) center left no-repeat">
</div>

<div class="contentdiv" style="background: url(pine.jpg) center left no-repeat">
</div>

<div class="contentdiv" style="background: url(ocean.jpg) center left no-repeat">
</div>

<div class="contentdiv" style="background: url(sushi2.jpg) center left no-repeat">
</div>

</div>

<div id="paginate-slider4" style="background:white">

<a href="#" class="toc" style="margin-left: 35px"><img src="horses_thumb.jpg" /></a> <a href="#" class="toc someclass"><img src="pine_thumb.jpg" /></a> <a href="#" class="toc someotheclass"><img src="ocean_thumb.jpg" /></a> <a href="#" class="toc someotheclass"><img src="sushi2_thumb.jpg" /></a>

</div>

<script type="text/javascript">

featuredcontentslider.init({
id: "slider4", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.1], //[true/false, fadedegree]
autorotate: [false, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex, contentdivs){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (0=1st slide, 1=2nd etc)
//curindex holds index of currently shown slide (0=1st slide, 1=2nd etc)
}
})

</script>

toc: ["label1", "label2", etc]

This setting behaves similarly to "#increment" in that the pagination links are auto generated inside the Pagination DIV as well, though you get to specify the label for each link unfettered. It accepts an array of labels that correspond to each slide within your Slider, for example:

  • toc: ["Kittens", "Puppies", "Chicks"]

It's often not necessary to use the "markup" setting when the [label] setting will do just fine. For example, the below outputs thumbnails as the pagination links just like in the former example, but without manually defining them:

toc: ['<img src="horses_thumb.jpg" /></a>', '<img src="pine_thumb.jpg" />', '<img src="sushi2_thumb.jpg" />']

The "markup" setting, however, does give you full access to all the HTML within the pagination DIV of course.

Styling the "selected" pagination link

Regardless of how your pagination links are output, one thing is consistent- the script will always apply an extra ".selected" CSS class to the pagination link currently selected. This allows you to easily style the selected link by targeting the class ".selected" in your CSS.

If your pagination links are simply text links, styling the selected link via CSS would look something like:

#paginate-slider2 a:hover, #paginate-slider2 a.selected{
background-color: yellow;
}

This causes the selected pagination link inside the Pagination DIV "#paginate-slider2" to be yellow, while also styling the link the mouse is currently over the same way as well.

If your pagination links are image links, you can style the selected link by giving it a border, such as:

#paginate-slider2 a img:hover, #paginate-slider2 a.selected img{
border: 2px solid red;
}

This causes the selected pagination image link to have a red border, while also styling the link the mouse is currently over the same way.

Table Of Contents

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

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post