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:
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.
Table Of Contents