Solano Slider

So I've been playing with the Solano slider v0.8 jQuery plugin for a friend's website. Her website uses many (around ten) image sliders that are CSSed exactly the same. I wanted to create something that is as easy as possible to update and that keeps the HTML code very clean. There were a few gotchas.

Solano slider can automagically setup numbered navigation for you if you supply a #div. Well everything in that <div> will be floated so you must set a height in CSS or it won't show any navigation. The slider navigation must also be a <div> because Solano creates each navigation item as a floated <p> element.

Solano slider will also float each of the images contained within the slider so you also must set a height on the container <div> in CSS or it won't show any images.

When using jQuery1.4.3 there was a problem with the positioning of images and my left-floated site navigation. This was fixed by simply upgrading to jQuery1.4.4.

I use multiple image sliders in a single page and found the way that Solano handles classes added to navigation items and the currently selected item to be a pain in the butt. What it does is each slider gets a separate class (.solanoNav1, .solanoNav2, .currentNav1, .currentNav2 etc.) It did not add a generic navigation or selection class that could be used to style everything globally.

To ease updating of the website later (i.e. adding more sliders) I run the slider creation in a loop that runs over an array containing a list of slider #id. I did want to use a jQuery .each() e.g. $('.slider').each(...) to automate this without an array list but jQuery apparently doesn't allow .each() to be nested and Solano uses an .each() internally to build the slider. Still, adding a single entry to an array list is not too onerous an overhead for each new slider. The code is:

var sliders = Array('sprodesignad','strevormorris','smasterhouse',
  'smasterwok','shermagazine','sphotography','swallpaperdesign',
  's30day','sexperimental','suntitled','slost');

for (slider in sliders) {
  var sthis = $('#' + sliders[slider]);
  var navid = sliders[slider] + 'nav';
  sthis.addClass('slider');
  sthis.after('<div id="' + navid + '" class="slidernav"></div>');
  sthis.solanoSlider({
    autoNav: true,
    navID: ('#' + navid)
  });
  $('#' + navid).children().addClass('solanoNav');
  $('body').append('<style type="text/css">.currentNav'
    + slider + ' { color: #ccc; }</style>');
}

First we get a jQuery reference to the slider and setup a standard name for the navigation <div>. Next we add a .slider class to every slider to make hooking CSS easier and to further reduce the burden on the HTML coder when the site is updated later. Next we automatically add an empty div for the slider navigation using the name created before. The next call creates the solano slider - using the autoNav option and supplying the navigation <div> #id we created before. The next two lines are hacks to make dealing with all sliders globally easier. We add a standard class to each of the navigation items to make styling them easier. Finally we kludge in a <style> element containing a rule for the .currentNavX (.currentNav1, .currentNav2 etc.) This ends up polluting the DOM with a bunch of <style> elements and violates general practice of not specifying CSS style info in the HTML file but could not be avoided without hacking Solano slider itself.

Maybe I should just hack Solano? Would the author mind? Can I also just mention just how much I love jQuery!