PDA

View Full Version : Featured Content Slider: Linktext array in columns?



rveloz
08-27-2007, 08:32 PM
Hello DD forum:
i am using the Featured Content Slider http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.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
08-28-2007, 03:21 AM
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
08-28-2007, 04:45 PM
Thanks! this works great!!:D