Additional Customization for Featured Content Slider v2.4

[mcreative]

1) Script Title: Featured Content Slider v2.4

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

3) Describe problem: I'll start by telling you what I'm trying to achieve. I installed the script, customized and everything works as it should. I have 3 active slides, on rollover, each link displays the corresponding slide. Is it possible for a 4th slide to appear by default (a 4th div class="contentdiv") when the mouse is not rolling over any particular link (onMouseOut)?

Here is the URL:
http://pd.mirandacreative.net/index.shtml

Here is the code:

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



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

<div id="paginate-slider2" class="pagination">
<ul>
	<li><a href="#" class="toc"><img src="images/rentIcon.gif" alt="Rental Properties" width="33" height="27" />Rental Properties<br />
	  <span class="description">View available rentals »</span></a></li>
	<li><a href="#" class="toc"><img src="images/saleIcon.gif" alt="Properties for Sale" width="33" height="27" />Properties for Sale<br />
	  <span class="description">View available home for sale »</span></a></li>
	<li><a href="#" class="toc" style="border:none"><img src="images/managementIcon.gif" alt="Management Services" width="33" height="27" />Management Services<br />
	  <span class="description">View  management services »</span></a></li>
</ul>    
    </div>

<div class="contentdiv"><img src="images/rental.jpg" alt="Rental" /></div>

<div class="contentdiv"><img src="images/condo.jpg" alt="Condominium" /></div>

<div class="contentdiv"><img src="images/PD_292.JPG" alt="Apartment Building" /></div>

<div class="contentdiv"><img src="images/kitchen.JPG" alt="Kitchen" /></div>

</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: "mouseover", //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>

Here is the CSS:

.sliderwrapper{
	position: relative; /*leave as is*/
	overflow: hidden;
	width: 850px; /*width of featured content slider*/
	height: 200px;
	clear: left;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #C9BD99;
}
.sliderwrapper .contentdiv{
	visibility: hidden; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
	height: 200px;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
	width: 604px;
	float: right;
	border-left-width: 3px;
	border-left-style: solid;
	border-left-color: #C9BD99;
}

.pagination{
	width: 243px;
	background-color: #EBE8D5;
	float: left;
}
#paginate-slider2 ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	height: 200px;
}
#paginate-slider2 li {
	font-size: 120%;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
}
#paginate-slider2 li .description {
	font-size: 75%;
	color: #DA511A;
	font-weight: normal;
}

.pagination a{
	text-decoration: none;
	color: #574218;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #574218;
	display: block;
	height: 46px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 20px;
}
#paginate-slider2 img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin-left: 8px;
	margin-right: 8px;
	float: left;
}

.pagination a:hover, .pagination a.selected{
	color: #574218;
	background-color: #C9BD99;
}

Any tips or advise would be great.
Thanks

[ddadmin]

Hmm at the top of my head one way to do this is to define the 4 content DIVs, with the first DIV being the 4th one you want shown only when the page loads:

<div class="contentdiv"><img src="images/kitchen.JPG" alt="Kitchen" /></div>

<div class="contentdiv"><img src="images/rental.jpg" alt="Rental" /></div>

<div class="contentdiv"><img src="images/condo.jpg" alt="Condominium" /></div>

<div class="contentdiv"><img src="images/PD_292.JPG" alt="Apartment Building" /></div>

Then for your pagination links, manually define them not to carry the special class="toc" attribute, but explicitly call the function:

featuredcontentslider.jumpTo()

to associate the link with a specific slide, in this case, the 2nd, 3rd, and 4th, bypassing the 1st. Something like:

<li><a href="javascript:featuredcontentslider.jumpTo('slider2', 2)"><img src="images/rentIcon.gif" alt="Rental Properties" width="33" height="27" />Rental Properties<br />
	  <span class="description">View available rentals »</span></a></li>

and so on.

[vidmunki]

I'm trying to get the div with the id="paginate-slider2" which is the nav for this thing to lay ontop of the other divs. but the the divs with the contents are continuesly replacing the paginate-slider div. Help please?

[ddadmin]

vidmunki, please start a new thread when asking your own question. Also, include a link to the problem page.

Thanks,