Customizing a Featured Content Glider's toggler links- Gray CSS buttons
On the main script page, you saw two Featured Content Glider demos, one with a simple toggler links style, the other, a more fancy, square buttons interface. The former is what's included in the code you cut and paste as well, to give you a plain starting point to customizing its look the way you want. However, since undoubtedly many of you will be interested in using the square buttons interface, here's the changes you should make from the default code to do so:
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.
Changes instructions
Step 1:
In the HEAD section of your page, add to the default codes a new CSS StyleSheet reference:
<link rel="stylesheet" type="text/css" href="cssbuttonstoggler.css" />
It references 3 files, which by default you should all upload to the same directory as where your page resides:
- cssbuttonstoggler.css
- 2 Images: square-gray-left.gif and square-gray-right.gif.
Step 2: Then, just replace the HTML for the default Toggler 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>
With the below instead:
<div id="p-select" class="cssbuttonstoggler">
<a href="#" class="toc"><span>1</span></a> <a href="#"
class="toc"><span>2</span></a> <a href="#" class="toc"><span>3</span>
<a href="#" class="prev"><span>Back</span></a> <a href="#"
class="next"><span>Foward</span></a>
</div>
And that's it! The only differences between the two codes are the CSS class
names, plus the addition of <span> tags around each link in the
later to create the button interface. FYI the buttons interface was basically
lifted from these
Square CSS buttons, illustrating how you're able to customize the Toggler
links in virtually any manner.
The next section looks at how to specify an external file as the source of the gliding content DIVs, via the Ajax capabilities of this script.
Table Of Contents