Results 1 to 2 of 2

Thread: Featured Content Slider 2.4

  1. #1
    Join Date
    Oct 2009
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Featured Content Slider 2.4

    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

  2. #2
    Join Date
    Aug 2004
    Posts
    9,890
    Thanks
    3
    Thanked 964 Times in 953 Posts
    Blog Entries
    15

    Default

    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:

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