Help changing image slider from img's to li's

Question

Hi. I've spent numerous hours trying to figure out how to get this slider to use li's with background images rather than img's.

The reason for this is that I intend to use the slider for Wordpress & many Wordpress themes apply their own css properties to images (such as 'max-width') which will often break the slider. I would appreciate if anyone could check out the following scripts and change it to work with li's :) I've been trying myself but for some reason all it would do is load forever never showing any images..

Here is the script:

http://pastebin.com/8J9uwRtZ

In the meantime I will continue to try figure this out myself. I would appreciate if anyone could help me out.

Here is a test site with an example of the slider not working with the theme 'Thematic' which applies a 'max-width' of 100% to images & an example of a theme which doesn't (hence the slider works perfectly). FYI removing the max-width from 'Thematic' & other themes fixes the slider everytime so this is definitely the problem; hence why I wish to use li's instead of img's.

http://www.matthewruddy.com/demo/ <- not working

http://www.matthewruddy.com/demo/?preview=1&amp;template=twentyten&amp;stylesheet=twentyten&amp;TB_iframe=true <- working

Thanks to anyone who can help! Matthew.

Answer 1

As akonsu said, your best bet is applying a specific image style to the lof class. The default style defined by the themes image.css file only gets applied for.. you guessed it.. default images. Properly redefining it in the lof class will overwrite that rule and use the new style. If your browser still doesn't seem to be picking it up, throw a big fat !important to the end of the style rule and everything except IE6 will pick it up just fine.

Max-width is only applied to images with no other specific rules present, hence "cascading" style sheets. CSS rules marked !important take precedence over other rules for the same type. Normally in CSS the rules work from top to bottom, so if you assigned a new style to an element further down the style sheet or in a secondary style sheet then the later rule would take precedence. !important ensures that this rule has precedence. ie:

p { color: blue !important; }
.container h3 { do stuff }
.container p { color: red; }

In every browser except IE6 the font color for all paragraph elements will be blue as long as your doctype is properly set and your not getting tossed into quirks mode. However, doing something like this:

p { color: blue; }
.container p { color: red !important; }

Will show a red font color for all paragraph elements in the container only, for all browsers. This works because even if IE6 doesn't understand the !important rule, it still fully understands cascading rules and will apply the style based on what was last defined.

So in your case, the following rule works just fine and fixes your display problems in IE:

ul.lof-main-wapper li img { max-width: none !important; }