Content Slider 2.4 Help

[dicegame]

1) Script Title:
Featured Content Slider 2.4

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

3) Describe problem:
Basically i have been customising the script (color/theme) wise, however i can't get something to work, and i've been going at it for about 3 days now.

Anyway, basically i want the pagination thing to look something like this:



I want that image to be the bases for all contents...when not selected. And the image below is for content that is selected. Can someone somehow give me the code to do this?



I'd really appreciate it.

Best Regards,
Tom

[ddadmin]

I'm not sure I understand. Are you merely trying to have the pagination links' background a solid color of black, unless the link in question is selected? How are you applying this background to the links (ie: via CSS? Please post a link to the page on your site that contains the problematic script so we can check it out.

[dicegame]

I'll show you a picture of what i want.



That is what i want my content slider to look like....Now that image is used when the current piece of content is selected...while is used when the current piece of content is not selected.

the current html i've got is:

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


<a href="#" class="toc"><img border="0" src="minisite/images/bar_no.gif"></a>
<a href="#" class="toc"><img border="0" src="minisite/images/bar_no.gif"></a>
<a href="#" class="toc"><img border="0" src="minisite/images/bar_no.gif"></a>
</div>

and my css is:

.pagination{
height: 40px;
width: 600px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
text-align: left;
padding: 0px 10px;
}

.pagination a{
height: 40px;
width: 33px;
padding: 0 5px;
border: 0px;

}

#pagination a:hover, #pagination a.selected {
border: 0px;
}

I have tried inserting the background-image property for the pagination classes but that doesn't work....

[ddadmin]

Since your pagination links are actual images, you can't use CSS to style the "selected" image by changing its src to a different image. What you need in this case is to make use of the script's onChange event handler. Assuming your pagination links look something like:

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

<a href="#" class="toc" style="margin-left: 35px"><img src="default.png" /></a> <a href="#" class="toc someclass"><img src="default.png" /></a> <a href="#" class="toc someotheclass"><img src="default.png" /></a> <a href="#" class="toc someotheclass"><img src="default.png" /></a>

</div>

By using the "markup" mode to manually specify the pagination HTML. Your initialization code then to get the selected pagination link's image to change to "selected.png" would look like:

<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
		var toclinks=featuredcontentslider.settingcaches["slider2"].toclinks //reference all "toc" links within pagination DIV (array)
		toclinks[previndex-1].firstChild.src="default.png"
		toclinks[curindex-1].firstChild.src="selected.png"
	}
})

</script>

[dicegame]

Thank you so much!

You are awesome!

[Gringo]

Hello guys !

This script is really wonderfull !!!

Just would like to know if it is possible to have an other transition effect ?

Thank you

P.S.
And maybe an other effect for the text like on websites you mentionned on the script's page ? (gamepost...)

Thanks