Featured Content Slider: Linktext array in columns?

[rveloz]

Hello DD forum:
i am using the Featured Content Slider http://www.dynamicdrive.com/dynamici...tentslider.htm
i would like to have the list of links arranged in columns, because my list is long. Please see the attached imgs, the first one showing how i would like the list to look, the second one showing how it currently looks.

any help is appreciated!!

rv

[ddadmin]

Basically it comes down to hacking contentslider.js, specifically, the output of the pagination links (variable pcontent) so instead of just a string of <a> tags, additional HTML is thrown in to organize them into columns. I spent a little time, and here's what I came up with. Inside contentslider.js, replace the following 3 lines:

for (var i=0; i<slidernodes[sliderid].length; i++) //For each DIV within slider, generate a pagination link
		pcontent+='<a href="#" onClick=\"ContentSlider.turnpage(\''+sliderid+'\', '+i+'); return false\">'+(slider.paginateText? slider.paginateText[i] : i+1)+'</a> '
	pcontent+='<a href="#" style="font-weight: bold;" onClick=\"ContentSlider.turnpage(\''+sliderid+'\', parseInt(this.getAttribute(\'rel\'))); return false\">'+(slider.nextText || "Next")+'</a>'
	paginatediv.innerHTML=pcontent

With the below instead:

var linkspercolumn=3
	for (var i=0; i<slidernodes[sliderid].length; i++){ //For each DIV within slider, generate a pagination link
		pcontent+=(i==0)? '<div class="column">' : (i>=linkspercolumn && i%linkspercolumn==0 && i<=slidernodes[sliderid].length-1)? '</div>\n<div class="column">' : ""
		pcontent+='<a href="#" onClick=\"ContentSlider.turnpage(\''+sliderid+'\', '+i+'); return false\">'+(slider.paginateText? slider.paginateText[i] : i+1)+'</a>\n '
	}
	pcontent+='<a href="#" style="font-weight: bold;" onClick=\"ContentSlider.turnpage(\''+sliderid+'\', parseInt(this.getAttribute(\'rel\'))); return false\">'+(slider.nextText || "Next")+'</a></div><br style="clear: left" />'
	alert(pcontent)

And inside contentslider.css, add the below new rules to the end:

.column{
float: left;
}

.column a{
display: block;
}

Take a look at the line in red- change "3" to the desired number of links to show per column. I also threw in an alert() statement within the code to show you what the current output for the pagination links is- when you're satisfied, remove that statement.

Here's what a value of 3 causes the pagination links to look like. I've also attached the modified contentslider.js.

[rveloz]

Thanks! this works great!!