PDA

View Full Version : Additional Customization for Featured Content Slider v2.4



mcreative
03-31-2009, 08:05 PM
1) Script Title: Featured Content Slider v2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.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
04-01-2009, 04:43 AM
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
10-27-2009, 09:50 PM
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? :eek:

ddadmin
10-28-2009, 03:58 AM
vidmunki, please start a new thread when asking your own question. Also, include a link to the problem page.

Thanks,