Featured Content Slider, Can I Make My Own Buttons?

[joshywood]

1) Script Title: Featured Content Slider

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

3) If I wanted to create my own buttons that would display associated content in the Featured Content Slider after being clicked, what function from within its javascript would I use as my buttons' "onClick". Basically, what function gets called each time you click one of the pagination links? Or maybe I'm mistaken, is that how you would even go about having your own specially designed pagination buttons? Note: The buttons I'm creating are each different in appearance, so it's not going to be the same looking button repeated. If anyone can figure this one out I feel it'd make for a really cool addition to this script

[jscheuer1]

It depends. Do you want your images to appear in place of the text links or along with them?

Here is the typical generated code for a link:

<a class="" href="#" onclick="ContentSlider.turnpage('slider2', 1); return false">2</a>

It switches to the second content in the slider with the id slider2. If you were to just put something like that on your page somewhere with an image:

<a href="#" onclick="ContentSlider.turnpage('slider2', 1); return false"><img src="thumb_2.gif" border="0"></a>

It would probably work to load up the 2nd content but, unless the generated text links were also present, there would probably be an error. Their visibility could be set to hidden in a stylesheet though (for slider with id slider2):

#paginate-slider2 {
visibility:hidden;
}

If you wanted to hack the script to put in images in place of the text, here is where and how that might be done, the red lines generate text links:

ContentSlider.buildpagination=function(sliderid){
var paginatediv=document.getElementById("paginate-"+sliderid) //reference corresponding pagination DIV for slider
var pcontent=""
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\">'+(i+1)+'</a> '
pcontent+='<a href="#" style="font-weight: bold;" onClick=\"ContentSlider.turnpage(\''+sliderid+'\', parseInt(this.getAttribute(\'rel\'))); return false\">Next</a>'
paginatediv.innerHTML=pcontent
paginatediv.onclick=function(){ //cancel auto run sequence (if defined) when user clicks on pagination DIV
if (typeof window[sliderid+"timer"]!="undefined")
clearTimeout(window[sliderid+"timer"])
}
}

Here they are alone with the parts that generate the actual text highlighted:

pcontent+='<a href="#" onClick=\"ContentSlider.turnpage(\''+sliderid+'\', '+i+'); return false\">'+(i+1)+'</a> '
pcontent+='<a href="#" style="font-weight: bold;" onClick=\"ContentSlider.turnpage(\''+sliderid+'\', parseInt(this.getAttribute(\'rel\'))); return false\">Next</a>'

Now let's zoom in on these parts and offer alternatives for images:

'+(i+1)+'

could be replaced with this code:

<img src=thumb_'+(i+1)+'.gif border=0>

For that to work, you would need images with these names:

thumb_1.gif
thumb_2.gif
thumb_3.gif

and so on, available for however many content items you have. This part:

Next

is easier. You could just replace it in the code with an image tag:

<img src=next.gif border=0>

Note: if you want to use the proper (for HTML) quoting:

<img src=\"thumb_'+(i+1)+'.gif\" border=\"0\">

and:

<img src=\"next.gif\" border=\"0\">

escape it as shown just to be on the safe side.

[joshywood]

Thanks John As usual, your advice worked beautifully! I hope other javascript novices read this post because what it enables you to do with the Featured Content Slider is absolutely awesome.

- Josh

[johnhu_2005]

Can I make my buttons chrome? As like gradient?

[jscheuer1]

Can I make my buttons chrome? As like gradient?

Easiest way would be to just follow the instructions as laid out in this thread. The only difference would be to use gradient images.

If you want to get fancy, now that you see where to edit the code, if you would be happy with just the defaults as text on the buttons, you could create a single gradient image as the background image for the buttons.

[Masterskinnie]

I tryed changing the text name from '+(i+1)+' to the text I want by inserting

for (var i=N)

with N being the page I want the choice of name applyed. Is this way actually possible. i get a syntax error and i don't know why? If not in what way can I give paginations a name of my choice other than text images?

I originally had post at: http://www.dynamicdrive.com/forums/s...ad.php?t=17824

ddadmin obviously sent me here.

[ddadmin]

Lets make it more straightforward for you Open up the .js file, and add to it at the very top this line:

var contentpagelinks=["dogs", "cats", "babies", "bunnies"] //Change links text to your own, one for each page

Then, find the line:

pcontent+='<a href="#" onClick=\"ContentSlider.turnpage(\''+sliderid+'\', '+i+'); return false\">'+(i+1)+'</a> '

and change that to:

pcontent+='<a href="#" onClick=\"ContentSlider.turnpage(\''+sliderid+'\', '+i+'); return false\">'+contentpagelinks[i]+'</a> '

That's it. Change "dogs", "cats", "babies" to your own link text of course. I've attached the modified .js file as well.

[Masterskinnie]

Thanks, I got it fixed up and running. Sorry for the hastle. Javascript is different from most programming languages.

[jafarsalam]

thanks jscheuer1 for the detailed instructions. Any ideas how to make a transitions effect like fade .

thanks