Featured Content Slider 2.4

[elgin]

1) Script Title: Featured Content Slider 2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentslider.htm

3) Describe problem: Is it possible to place captions or descriptive text below or beside each image using #increment pagination?

Thanks for any suggestions in advance.

elgin

[ddadmin]

The script does support an "onChange" event handler that lets you run code whenever the slider changes (including when it first loads). This is documented on the script page. So you may use this event for example to populate an empty DIV with the desired description depending on which slide is currently shown, for example:

<!--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>

<div id="descdiv"></div>

<script type="text/javascript">

var descriptions=[
"My name's George",
"My name's Bob",
"My name's Earl"
]

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
		document.getElementById("descdiv").innerHTML=descriptions[curindex-1]
	}
})

</script>