Clean Up JS Code clutter

Question

I threw my portfolio together a few months ago and now I am trying to go back and clean up the code so that it is easier to add new items etc..

My main problem is that I am using the Alen Grakalic's Easy Slider Jquery plugin to simulate a browser window and everytime I want to add a new portfolio item, I have to add a new block of code that looks something like this:

        $("#slider").easySlider({
            controlsBefore: '<p id="controls">Scroll: ',
            controlsAfter:  '</p>',
            prevId: 'prevBtn',
            nextId: 'nextBtn',
            continuous: true,
            prevText: 'Up', 
            nextText: 'Down',
            vertical: true
        });

In addition, I am forced to add a whole bunch of new ID tags and classes to my CSS, which isn't very practical if I am going to have a very large number of portfolio items. All this duplicate code seems really unnecessary and I feel like there should be a more efficient way to do this.

Is there a way to pare down the necessary code for adding a new slider so that I don't have to add so many new ID tags and JS blocks? Should I skip the plugin and revert to something simpler like slideUp/slideDown? If so, is there a way to detect if the image has slid all the way to the bottom and force it to jump back up to the top like this plugin?

Here is the link: http://richard.designvillain.com

Answer 1

Well, at a minimum, if your sliders all have the same options, you could certainly define your own function that would do the slider stuff:

function makeSlider(id) {
        $("#" + id).easySlider({
            controlsBefore: '<p id="' + id + "_controls">Scroll: ',
            controlsAfter:  '</p>',
            prevId: 'prevBtn' + id,
            nextId: 'nextBtn' + id,
            continuous: true,
            prevText: 'Up', 
            nextText: 'Down',
            vertical: true
        });
        $('#prevBtn'+id).addClass("previousButtonClass");
        $('#nextBtn'+id).addClass("previousButtonClass");
}

and then just call

makeSlider("slider");
makeSlider("anotherSlider");

etc.

Even if your sliders don't all have the same options, you could write a function that sets all the basic options and allows you to pass in an object containing additional options.

Answer 2

The plugin returns this.each, so are you able to pass in a collection of elements?

Ex.

$('.sliders').easySlider({
   controlsBefore: '<p id="controls">Scroll: ',
   controlsAfter:  '</p>',
   continuous: true,
   prevText: 'Up', 
   nextText: 'Down',
   vertical: true
});

You'd have to change the controlsBefore property to reference the current .sliders object instead of #controls.

Also, the plugin defaults prevId and nextId to what you're setting, so you can omit those.

Answer 3

You should be able to run through each of those with a loop.

$('.window > div').each(function(index){
  $(this).easySlider({
    controlsBefore: '<p id="controls' + index + '">Scroll: ',
    controlsAfter:  '</p>',
    prevId: 'prevBtn' + index,
    nextId: 'nextBtn' + index,
    continuous: true,
    prevText: 'Up', 
    nextText: 'Down',
    vertical: true
  });
});

as to the CSS, you could simply give every one of them a class and style that instead.

Answer 4

Another solution that assumes all your elements have the same options:

var options = {
    controlsBefore: '<p id="controls">Scroll: ',
    controlsAfter:  '</p>',
    prevId: 'prevBtn',
    nextId: 'nextBtn',
    continuous: true,
    prevText: 'Up', 
    nextText: 'Down',
    vertical: true
};

$('#slider').easySlider(options);

It's really a matter of preference whether you want to use this solution, or JacobM's solution.