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

[mesua]

@ 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?

[jscheuer1]

You're almost there. Add the highlighted:

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

[mesua]

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

[jscheuer1]

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

	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.

[mesua]

Thanks a lot!

[jscheuer1]

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:

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

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

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.

[mesua]

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:

($tocs.size() / 2) - 1)

to

($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

[jscheuer1]

1. ($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:
   
   

   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.

[mesua]

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