Advanced Search

Results 1 to 5 of 5

Thread: Featured Content Slider v2.4 - one slider with several paginate-slider

  1. #1
    Join Date
    Aug 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Featured Content Slider v2.4 - one slider with several paginate-slider

    1) Script Title: Featured Content Slider v2.4

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

    3) Describe problem:

    Hello,

    I need one slider with three paginate-slider: one with images, one with text-links and one for 'prev' and 'next'. I have spent a lot of time, but I didnīt find a solution. Is this possible?

    Thanks in advance!

    beathead

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

    Default

    Hmm I don't see an easy way to modify the script for this unfortunately- that is, have the script recognize and parse more than one pagination DIV to be associated with a Featured Content instance. You can, however, manually get to where you want in a way by defining arbitrary links anywhere on the page that jumps to specific slides. For example, you may have arbitrary text links that jump to a particular slide within a particular featured content slider using the function featuredcontentslider.jumpTo("sliderID", pagenumber):

    Code:
    <a href="javascript:featuredcontentslider.jumpTo('mysliderid', 0)">Page 1</a> | <a href="javascript:featuredcontentslider.jumpTo('mysliderid', 1)">Page 2</a> | <a href="javascript:featuredcontentslider.jumpTo('mysliderid', 2)">Page 3</a>
    There's no way to do the same for the "prev" and "next" functions though.

  3. #3
    Join Date
    Aug 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Re:Hmm

    Yes, I made this yesterday, but then the 'a.selected' doesnīt work.
    I try it with the 'onChange event handler', but...

    Code:
    <div id="paginate-slider-2" class="pagination">
      <a href="javascript:featuredcontentslider.jumpTo('slider', 1)" class="toc"><img src="images/projekte/projekt-1_0.jpg" /></a>
      <a href="javascript:featuredcontentslider.jumpTo('slider', 2)" class="toc"><img src="images/projekte/projekt-2_0.jpg" /></a>
      <a href="javascript:featuredcontentslider.jumpTo('slider', 3)" class="toc"><img src="images/projekte/projekt-3_0.jpg" /></a>
    </div>
      
    <div id="paginate-slider-3" class="pagination">
      <a href="javascript:featuredcontentslider.jumpTo('slider', 1)" class="toc">1</a><br />
      <a href="javascript:featuredcontentslider.jumpTo('slider', 2)" class="toc">2</a><br />
      <a href="javascript:featuredcontentslider.jumpTo('slider', 3)" class="toc">3</a><br />
    
    </div>
    <div id="mainContent">
        <!--Inner content DIVs should always carry "contentdiv" CSS class-->
        <!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->
        
        <div id="slider" class="sliderwrapper">
        
        <div class="contentdiv">
        Content 1 Here.
        </div>
        
        <div class="contentdiv">
        Content 2 Here. <br />
        
        </div>
        
        <div class="contentdiv">
        Content 3 Here.
        </div>
        
        </div>
        <div id="paginate-slider" class="pagination">
          <a href="#" class="prev"><</a>
          <a href="#" class="next">></a>
        </div>
        
        <script type="text/javascript">
        featuredcontentslider.init({
            id: "slider",  //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: ["Zurück", "Weiter"],  //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
                //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>
    </div>
    Any idea?

    ThanX

    beathead

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

    Default

    The ".selected" link won't work in those links you manually created unfortunately. That's part of what I meant by "there's no easy way to modify the script for this", as that's one of the features that's more complex to add if you have multiple pagination DIVs on the page.
    DD Admin

  5. The Following User Says Thank You to ddadmin For This Useful Post:

    beathead (08-05-2008)

  6. #5
    Join Date
    Aug 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Do you know another script with this features?

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
  •