Low-cost, effective, standards-compliant web design, development, online business and marketing consultation

• Home
• Portfolio
• Contact
• Site Map

easySlider modification: Use a dynamic array to define the text for panel links.

First, thanks for this slider code. It's the best one I've used. Read the original article.
Second, thanks to Kyle Florence for his modifications. They're great.

After implementing this slider I decided that I would like the controls to be text links rather than numbers. Also it would be advantageous for me to be able to control the amount of links/sliders displayed.

I settled on using dynamic arrays of strings (the text for the links) with the size of the array (amount of text links/sliders) both controlled by passing values as options.

I added these default variables:

controlsTextNumber: '', //The total number of text links
controlsText:   ['','','','',''] //array of text links labels, amount equal to the number set in controlsTextNumber

The variables are declared empty - you can set default values here if you wish. Maybe it's more advisable to do so?

and initialised the array like this:

this.each(function()
        {
            var obj = $(this);
            var controlsText = new Array(options.controlsTextNumber);

I altered the following code:

if(options.numeric)
            {
                for(var i=0;i'+ (i+1) +'')
                        .appendTo($("#"+ options.numericId))
                        .click(function(){
                            animate($("a",$(this)).attr('rel'),true);
                            return false;
                        });
                };
            }

to look like this:

if(options.numeric){

                for(i=0; i'+ /*(i+1)*/options.controlsText[i] +'')
                    .appendTo($("#"+ options.numericId))
                    .click(function(){
                        animate($("a",$(this)).attr('rel'),true);
                        return false;
                    });
                };
            }

The results can be seen here:

First Slider, set to 2 sliding panels + 2 text links:

http://lopressure.com/themes/homes-interiors-scotland/files/test.php#welcome

Second Slider, set to 5 sliding panels + 5 text links:

http://lopressure.com/themes/homes-interiors-scotland/files/test.php#work

Third Slider, set to 4 sliding panels + 4 text links:

http://lopressure.com/themes/homes-interiors-scotland/files/test.php#html

This works for me however I suspect that there's a more elegant way to achieve this functionality - I'm not a super coder. If anyone has suggestions please let me know.

Last Updated: Sat Oct 2010 16:30