Page 2 of 2 FirstFirst 12
Results 11 to 19 of 19

Thread: Could I make a Featured Content Slider with two rows of buttons?

  1. #11
    Join Date
    Aug 2012
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    @ jscheuer1

    I`ve tried it but for some reason, even after emptying my cache and refreshing my page, there doesn`t seem to be any change in the layout of the buttons. I`ve tried it in different browsers...still nothing.

    I`ve also tried Beverleyh`s idea, but...didn`t get lucky.

    Any ideas what I`m missing?

  2. #12
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,004
    Thanks
    44
    Thanked 3,199 Times in 3,161 Posts
    Blog Entries
    12

    Default

    You're almost there. Add the highlighted:

    Code:
    <script type="text/javascript">
    featuredcontentslider.init({
    id: "slider1", //id of main slider DIV
    contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
    nextprev: ["<", ">"], //labels for "prev" and "next" links. Set to "" to hide.
    enablefade: [true, 0.2], //[true/false, fadedegree]
    autorotate: [false, 3000],
    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)
    }
    });
    jQuery(function($){
    	var $tocs = $('#paginate-slider1 a').css({lineHeight: '165%'}), $next;
    	$tocs.last().wrap('<span></span>');
    	$tocs.eq(Math.ceil($tocs.size() / 2)).after(' ' + $('#paginate-slider1 span').html() + '<br>');
    	$next = $('#paginate-slider1 a').filter('.next');
    	$next.eq(0).replaceWith($next.eq(1));
    	$('#paginate-slider1 span').remove();
    	$('#paginate-slider1 a').filter('.next, .prev').css({position: 'relative', top: '0.5em'}).eq(0).css({left: '-2em'}).end().eq(1).css({left: '2em'});
    });
    </script>
    By way of explanation, that property, even if the first value is false, is required. Otherwise the code throws an error. For some reason that error is too late to prevent the slider from working. But it comes before the added code for the pagination div, so that code is never run. Once the error is fixed, the pagination code does run and produces the desired result.
    Last edited by jscheuer1; 11-25-2012 at 04:48 PM. Reason: add explanation
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    mesua (11-25-2012)

  4. #13
    Join Date
    Aug 2012
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Yeeeeeey! It`s working now. Thanks a lot for everything

  5. #14
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,004
    Thanks
    44
    Thanked 3,199 Times in 3,161 Posts
    Blog Entries
    12

    Default

    Great! Here's an optional variation you can try:

    Code:
    	var $tocs = $('#paginate-slider1 a').css({lineHeight: '165%'}), $next;
    	$tocs.last().wrap('<span></span>');
    	$tocs.eq(Math.ceil($tocs.size() / 2) - 1).after(' ' + $('#paginate-slider1 span').html() + '<br>');
    	$next = $('#paginate-slider1 a').filter('.next');
    	$next.eq(0).replaceWith($next.eq(1));
    	$('#paginate-slider1 span').remove();
    	$('#paginate-slider1 a').filter('.next, .prev').css({position: 'relative', top: '0.5em'}).eq(0).css({left: '-2em'}).end().eq(1).css({left: '2em'});
    });
    As you probably noticed, the top line of pagination links is longer than the bottom. It would be difficult or impossible (you would have to make all the page links the same width and ensure that there were an even number of them) to make them the same though. What the above variation will do is make the top one shorter. It's a subtle thing, but I think it looks a little better that way.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    mesua (11-27-2012)

  7. #15
    Join Date
    Aug 2012
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Thanks a lot!

  8. #16
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,004
    Thanks
    44
    Thanked 3,199 Times in 3,161 Posts
    Blog Entries
    12

    Default

    You're welcome. I noticed something else about the installation, and in investigating how best to explain and correst it, I also noticed that the script credit appears to be missing from the page. See:

    http://www.dynamicdrive.com/notice.htm

    for the usage terms, which state (among other things) that the script credit must appear on each page that is using the script. So where you have:

    Code:
    <script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/contentslider-n-b-l-t-r.js' type='text/javascript'></script>
    That should be:

    Code:
    <script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/contentslider-n-b-l-t-r.js' type='text/javascript'>
    
    /***********************************************
    * Featured Content Slider- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    The other thing I noticed is that since you have (near the top of contentslider-n-b-l-t-r.js):

    Code:
    enablepersist: true, //persist to last content viewed when returning to page?
    and because you're using the same id (slider1) for both the first and second chapter of the graphic novel, when the user leaves chapter 1 at - say panel #29, if he then goes to chapter #2, that starts at panel #29. So you either have to, using a text only editor like NotePad, edit contentslider-n-b-l-t-r.js and change that value to false, or change the id of one of the chapters. If you change the id of one of the chapters, you have to change it in the init and the markup, including for the pagination as well as in the added code for the pagination links where it appears a number of times. Like on the chapter 2 page, do a global search and replace on slider1 for slider2. Then when the next chapter comes out, make it slider3.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    mesua (11-28-2012)

  10. #17
    Join Date
    Aug 2012
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Thank you. I`ve added the script credit, I hope everything`s ok. Renamed the sliders as well, so now that`s sorted although I have a few more questions about the slider now that I think of it. I don`t know if this is straying too much from the initial thread, but here it goes:


    1) If for the current chapter I`m going to add yet another row of buttons (I`ll be adding new panels), do I need to make any changes to the script you`ve given me? Change it from:

    Code:
    ($tocs.size() / 2) - 1)
    to

    Code:
    ($tocs.size() / 3) - 1)
    perhaps?

    2) So now, when someone reads chapter 1 , stops at panel #29 and then goes on to chapter 2, they get to see panel #1. But if they go back to chapter 1 again, they land on whichever panel number they were when they left. Is there a way to `reset` the slider so that they would land on the first panel?

    3) If, say, the chapter gets waaaay too long and the slider buttons just don`t look good on the page anymore, can I change the current slider so that it works like this:

    < 1 2 3 ... 10 >

    Thank you

  11. #18
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,004
    Thanks
    44
    Thanked 3,199 Times in 3,161 Posts
    Blog Entries
    12

    Default

    1. Code:
      ($tocs.size() / 2) - 1)
      Will always divide the number of panels in half, so unless you have a ton of them, it need not be changed. And changing it to / 3 will give you a third of them on top, all the rest on the bottom, so that's probably not a solution. It could be part of a solution if then the second third of them had a break put after them and then the next/prev buttons were placed a little lower. But now we're getting into a solution that needs to be rewritten for each situation. A better solution would be one that works in both cases and even in other cases where there are a lot more panels.

    2. What you're asking for here is a way to disable the setting and reading of the cookie aka the persist behavior. To disable persistence, using a text only editor like NotePad, open up the contentslider-n-b-l-t-r.js file and near the top where it has:

      Code:
      enablepersist: true, //persist to last content viewed when returning to page?
      Change that to false and save that and use that version.

      However, it's a nice feature to have the user return to where they were, like a bookmark in a real book allows you to return to the page you were reading when you last left it. If you decide to keep it, leave that value as true or change it back if you've already tried it as false and decided you prefer it to be enabled.

    3. I'm pretty sure that this can be done and would be one approach as I alluded to in my answer to #1 above. It might be a little complicated. When I have more time I will have a look at just what it might entail.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  12. #19
    Join Date
    Aug 2012
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Ok, that`s fine. I`ll keep things as they are at the moment, really pleased with how it looks and works. Thanks again for your time and advice

Similar Threads

  1. Featured Content Slider - Stop/Play buttons?
    By amimoto in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 02-10-2009, 01:20 PM
  2. Featured Content Slider, make it change on hover?
    By A2597 in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 04-03-2008, 03:15 PM
  3. Featured Content Slider: Does not allow me to embed more than three buttons
    By masterpower in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 02-20-2008, 11:33 PM
  4. Featured Content Slider to use REAL URLS in the buttons
    By Acts7 in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 11-20-2007, 08:22 AM
  5. Featured Content Slider, Can I Make My Own Buttons?
    By joshywood in forum Dynamic Drive scripts help
    Replies: 8
    Last Post: 03-09-2007, 10:38 PM

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
  •