Specifying an external file source for the gliding contents

Home Dynamic Content Featured Content Glider Supplementary Page

Specifying an external file source for the gliding contents

The default configuration assumes that your glided contents are DIVs with a shared CSS class name (ie: "glidecontent") and added directly inline within your page:

<div id="canadaprovinces" class="glidecontentwrapper">

<div class="glidecontent">
<img src="http://i11.tinypic.com/8efzmmf.jpg" style="float: left; padding: 5px" />
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.
</div>

<div class="glidecontent">
<img src="http://i15.tinypic.com/72vilba.jpg" style="float: right; padding: 5px"/>
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.
</div>

<div class="glidecontent">
<img src="http://i17.tinypic.com/8bg0lkx.jpg" style="float: left; padding: 5px"/>
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.
</div>

</div>

The 3 DIVs in bold above are what we're referring to. You can, if you wish, move these DIVs (the gliding contents) to an external file on your server, and tell the script to retreive that file to populate the glider using. Simply create a blank file with the DIVs above added inside it- the same syntax conventions exist here, that is, each content must be wrapped around its own DIV with a shared CSS class name (in this case, "glidecontent"). What you end up with is for example: "glidecontent.htm" Then, to tell the script to get its content from this file instead, define the configuration variable "remotecontent" when initializing the script:

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: "glidecontent.htm", //Get gliding contents from external file on server? "filename" or "" to disable
"
"

And that's it! Note that "glidecontent.htm" must be on the same domain as where your Featured Content Glider, due to Ajax security limitations. A live example here:

Prev Page 1 Page 2 Page 3 Next

The pagination links still need to be defined manually, but you can always define more than what's needed, as the script will dynamically hide redundant pagination links based on how many gliding contents there actually are.