Advanced Search

Results 1 to 4 of 4

Thread: Additional Customization for Featured Content Slider v2.4

  1. #1
    Join Date
    Jan 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Additional Customization for Featured Content Slider v2.4

    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:
    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:
    Code:
    .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

  2. #2
    Join Date
    Aug 2004
    Posts
    9,864
    Thanks
    3
    Thanked 960 Times in 949 Posts
    Blog Entries
    15

    Default

    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:

    Code:
    <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:

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

    Code:
    <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.
    DD Admin

  3. #3
    Join Date
    Oct 2009
    Location
    Chicago
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default trying to get the id="paginate-slider2" to lay on top

    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?

  4. #4
    Join Date
    Aug 2004
    Posts
    9,864
    Thanks
    3
    Thanked 960 Times in 949 Posts
    Blog Entries
    15

    Default

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

    Thanks,
    DD Admin

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •