anything slider numbers to text

[awaterson]

I’ve been playing with the anything slider and need some help changing the dynamic numbers to text. I’m trying to set up up the numbers as vertical with a description of each slide.
For instance:
Slide Description | Slide Number
Brooks Ghost 3 | 1
Free 2 day | 2
And so on… I really want to keep the boxed numbers but be able to add text next to them.

Here is an example of my slider so far.
http://andrewwaterson.com/images/sliderF/index.html
Any help would be awesome! :D
Thanks

[oneworld95]

Modify the included formatText() function to suit your need. Here’s an example that returns an image for each nav button:

Code:

function formatText(index, panel) {
return ““;
}

But you could have it return the index + your text/images and whatever you need to display in the nav button.

[awaterson]

I added that code. Can you clarify where and how I’d add the text or images to the main body of the html? I placed the code on the index.html switched out

Code:

function formatText(index, panel) {
return index + “”;
}

Thanks for the reply!

[oneworld95]

You’d add the HTML that you need inside the formatText() function. You’d probably want to build the HTML and test it so it all looks good and is the right size; then just concatenate a string inside the formatText() function. If you wanted to return a DIV tag, you’d do something like this:

Code:

function formatText(index, panel){
var myHtml = “

My text for Panel #” + index + ” goes here

”
return myHtml;
}

What the formatText function does is to set the HTML of the little "tab" under each panel of the AnythingSlider. For each panel, the AnythingSlider calls this function to get the HTML, so it serves as a template for the tabs. The HTML can contain anything you need, but it should be kept small enough to go with the design. The function has the index of that panel, as the argument "index" so you can reference that in your code as I’ve done in the example above.

[awaterson]

Nice! I’ve added that piece of code and I see how it adds the text to the slider nav tabs. I’m a little unsure how I can change the text for each individual slide. As in have the first tab say something completely different from tab 2 and 3 and so on. Is that possible? thanks for all the help!

[oneworld95]

Create an array outside of the formatText function and set each element of the array to the text you’d like to use. Ensure the array index matches the panel index, then reference the array element in the formatText function.

Code:

var nameArray = new Array(“Name 1″,”Name 2″,”Name 3″,”Name 4″,”Name 5″,”Name 6”)
function formatText(index, panel){
var myHtml = “

My text for Panel #” + index + ” is ” + nameArray[index] + “

”
return myHtml;
}

Make sure each array element’s text is for the panel you wish; in other words, "Name 1" goes with the first panel and so forth. You can replace the text in the array elements with whatever text or HTML you want to use.

[burtflaxton]

Hey fellas, found this post and was wondering if you could help me implement this.

Can you tell me where it is that those two pieces of code are being put. I am guessing it is in the jquery.anythingslider.js but where exactly do I put that function? Also where would I put the array at?

I think I will be working on this all morning, so if I figure it out I will return and post.

Appreciate any help you can give!

[oneworld95]

You’d put the formatText() function and the array declaration above the main AnythingSlider function call, so it will all look like this:

Code:

var nameArray = new Array("Name 1","Name 2","Name 3","Name 4","Name 5","Name 6");

function formatText(index, panel){
var myHtml = "<div class=’myDiv’>My text for Panel #" + index + " is " + nameArray[index] + "</div>";
return myHtml;
}

// Instantiate the AnythingSlider and set properties.
$(function () {

$(‘.anythingSlider’).anythingSlider({
easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 4000, // How long between slide transitions in AutoPlay mode
startStopped: false, // If autoPlay is on, this can force it to start stopped
animationTime: 600, // How long the slide transition takes
hashTags: false, // Should links change the hashtag in the URL?
buildNavigation: true, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "Go", // Start text
stopText: "Stop", // Stop text
navigationFormatter: formatText // Details at the top of the file on this use (advanced use)
});

});

Note that we’ve changed the value of the property "navigationFormatter" from null to the name of the function that sets the HTML for the nav buttons; it’s now set to formatText

[burtflaxton]

I guess that is not going to work for me. I have 4 different instances of anything slider happening on my pages. This pretty much breaks everything, but I does change the numbers to text. As much as I like this slider I might have to move onto something else…

http://turbodieselpower.com/

If you get bored and feel like offering some advice. The image slider & product scroller on the front page both depend on anything slider. I am guessing since these are changes to the default that it cannot be achieved the way you have done it above. Is there any way to apply this only to the top image slider on the homepage?

Any advice is much appreciated!

Thank you.

[oneworld95]

This will work for you! The code I gave you is pasted into a SCRIPT tag in the page where you need to use the AnythingSlider; it sets the properties for that specific instance of AnythingSlider. For each page/slider, use a different formatText function. You can even have mulitiple navigationFormatter functions on one page — just call the function something different for each instance and set the navigationFormatter to that name instead of formatText.

Here’s what you need for your two sliders:

Code:

jQuery(‘.anythingSlider’).anythingSlider({
easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 3000, // How long between slide transitions in AutoPlay mode
startStopped: false, // If autoPlay is on, this can force it to start stopped
animationTime: 600, // How long the slide transition takes
hashTags: false, // Should links change the hashtag in the URL?
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
navigationFormatter: myFormatFunc // Your custom function
});
jQuery(‘.anythingSlider-product-grid’).anythingSlider({
easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 3000, // How long between slide transitions in AutoPlay mode
startStopped: true, // If autoPlay is on, this can force it to start stopped
animationTime: 600, // How long the slide transition takes
hashTags: false, // Should links change the hashtag in the URL?
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
navigationFormatter: myOtherFormatFunc // Another custom function
});

Then define your formatter for each:

Code:

function myFormatFunc(index, panel) {
// your code that returns the HTML you want for this slider’s numbers
}

function myOtherFormatFunc(index, panel){
// your code that returns the HTML you want for this slider’s numbers
}

[burtflaxton]

I am going to have to do more research with jquery. I am really confused as where to put this information, and that comes from my lack of knowledge working with this type of code. Hopefully I can figure this out before my site is set to launch.

Appreciate the help very much! At least I know it can be done, just have to figure out what it all means so I know what I am doing and where to put it.

[Author]

Posts