AS Computerz

Description: Featured Content Slider makes a slideshow out of arbitrary content on your page, so users can manually select a content to see or have them rotated automatically. Each content is defined simply inline on the page as regular HTML, or altogether inside a single external file and fetched via Ajax instead. Where this script shines is the versatile pagination links interface, which can be customized in a variety of ways. You may have such a script on the frontpage of sites

Directions:

Step 1: Insert the following code in the HEAD section of your page

The code above references two external files plus an Ajax image, which you need to download below (right click/ select "Save As"):

By default, upload these files into the same directory as where your webpage resides.

Step 2: Insert the below sample code into the BODY section of your page:

Select All

<h2>Example
 1</h2>

<!--Inner content DIVs should always carry "contentdiv" CSS 
class-->
<!--Pagination DIV should always carry "paginate-SLIDERID" CSS 
class-->

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

<div class="contentdiv">
Content 1 Here. <br />
<p></p><a 
href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 
3rd slide</a></p>
</div>

<div class="contentdiv">
Content 2 Here.
</div>

<div class="contentdiv">
Content 3 Here.
</div>

</div>

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

</div>

<script type="text/javascript">

featuredcontentslider.init({
	id: "slider1",  //id of main slider DIV
	contentsource: ["inline", ""],  //Valid values: ["inline", ""] or 
["ajax", "path_to_file"]
	toc: "#increment",  //Valid values: "#increment", "markup", ["label1", 
"label2", etc]
	nextprev: ["Previous", "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.2],  //[true/false, fadedegree]
	autorotate: [true, 3000],  //[true/false, pausetime]
	onChange: function(previndex, curindex){  //event handler fired 
whenever script changes slide
		//previndex holds index of last slide viewed b4 current (1=1st slide, 
2nd=2nd etc)
		//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd 
etc)
	}
})

</script>




<br />
<h2>Example 2, Pagination links from markup</h2>

<!--Inner content DIVs should always carry "contentdiv" CSS 
class-->
<!--Pagination DIV should always carry "paginate-SLIDERID" CSS 
class-->

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

<div class="contentdiv">
Content 1 Here.
</div>

<div class="contentdiv">
Content 2 Here. <br />
<p></p><a 
href="javascript:featuredcontentslider.jumpTo('slider2', 1)">Go back 
to 1st slide</a></p>
</div>

<div class="contentdiv">
Content 3 Here.
</div>

</div>

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

<a href="#" class="toc">First Page</a> <a href="#" 
class="toc anotherclass">Second Page</a> <a href="#" 
class="toc">Third Page</a> <a href="#" class="prev" 
style="margin-left: 10px"><</a> <a href="#" 
class="next">></a>

</div>

<script type="text/javascript">

featuredcontentslider.init({
	id: "slider2",  //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: ["Previous", "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.2],  //[true/false, fadedegree]
	autorotate: [false, 3000],  //[true/false, pausetime]
	onChange: function(previndex, curindex){  //event handler fired 
whenever script changes slide
		//previndex holds index of last slide viewed b4 current (1=1st slide, 
2nd=2nd etc)
		//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd 
etc)
	}
})

</script>

That's it! Continue reading for some helpful information.

Pages

Friday, September 16, 2011

Featured Content Slider v2.4

No comments:

Followers

Joins US

Share It