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

[viconia]

1) Script Title: Featured Content Slider v2.4

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

3) Describe problem: As you can see here, I`ve got quite a few buttons (1-37) and so I`d like to have them in two *neatly spaced rows. Is that possible?

Thank you.

[mesua]

1) Script Title: Featured Content Slider v2.4

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

3) Describe problem: As you can see here, I`ve got quite a few buttons (1-37) and so I`d like to have them in two *neatly spaced rows. Is that possible?

Thank you.

[ajfmrf]

You made two threads for the same thing..................

[djr33]

viconia/mesua, we have a strict rule here of one account per person. Please choose one account and let us know which you want to keep; the other will be deleted.
Additionally, please be patient with responses; waiting 3 minutes between double-posting is inappropriate.
If you have had any technical problems with your account(s), please let us know. (The best way to discuss it would probably be posting in the "feedback and announcements" section.)

For the moment I have merged your two threads together, and now you can wait to see if someone has an answer.

[jscheuer1]

Where the page has:

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

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]
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%'});
	$tocs.eq(Math.ceil($tocs.size() / 2)).after('<br>');
});
</script>

The browser cache may need to be cleared and/or the page refreshed to see changes.

Other variations:

jQuery(function($){
	var $tocs = $('#paginate-slider1 a').css({lineHeight: '165%'});
	$tocs.eq(Math.ceil($tocs.size() / 2) - 1).after('<br>');
});

or:

jQuery(function($){
	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();
});

[Beverleyh]

Or maybe you can reduce the width of the "pagination-slider1" div so the buttons wrap on to 2 lines sooner?

<style type="text/css">
pagination-slider1 { width:600px; }
</style>

<div class="pagination" id="paginate-slider1">

[mesua]

Yes, I`m sorry. I forgot that I`ve already registered once for this forum and then later I came across another thread I`d started a while ago. I`ll keep the first one (mesua) if that`s alright. Sorry for the inconvenience again.

[jscheuer1]

Or maybe you can reduce the width of the "pagination-slider1" div so the buttons wrap on to 2 lines sooner?

<style type="text/css">
pagination-slider1 { width:600px; }
</style>

<div class="pagination" id="paginate-slider1">

You will need a lot more than that for it to look good. You would also need to center the div, which is usually done with margin. But that's already in use to position it. Then there's the matter of the vertical space between the now wrapped lines and getting the width just right so that it wraps just where you want it. It can be done, but it's complicated. That's why I went with the approach I used. Later I realized even more control could be achieved, so my alternatives became more complex. Here's a perhaps even better method:

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

That centers the pagination links into two lines and moves the next/previous buttons slightly to the left and right respectively at an offset of half of the line (click to enlarge the image):

[djr33]

Yes, I`m sorry. I forgot that I`ve already registered once for this forum and then later I came across another thread I`d started a while ago. I`ll keep the first one (mesua) if that`s alright. Sorry for the inconvenience again.

Ok, that's fine. Just keep using that one, and the other (viconia) will be deleted once the administrator has a chance.

Now back to your code, the more important topic.

[jscheuer1]

I wa looking at this again, and what Beverleyh says can work fairly well if you change the style for the .pagination div from (around line 531 on the page):

.pagination{
width: 950px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
text-align: center;
background-color: #333333;
padding: 10px 1px;
margin-top:-2px;
height:30px;
margin-left:15px;
}

to:

.pagination {
	width: 525px;
	text-align: center;
	background-color: #333333;
	padding: 8px 1px 0 25px;
	margin: 0 auto;
	line-height: 165%;
}

Still not as nice as my last scripted solution I don't think, and the width and the left padding would have to be adjusted if the number of pages change. But it's pretty easy to do and easier for the average person to work with and tweak than the javascript would be.