Question

I have modified bx.slider to have the thumbnails underneath text content with an image as a background:

http://inetwebdesign.com/jQueryTools/thumbnail_pager_method5.html

The problems I am facing are the following:

1. In IE (in Firefox and Opera everything is ok) the thumbs (which are wrapped in anchor tags) still have the blue outline, and no amount of text-decoration:none; or outline:none; appears to solve the problem, and
2. In this implementation, clicking on the thumbnail pulls up the corresponding image, but the carousel will only restart if I reload the page.

So my questions are:

1. How do you get rid of the text decoration for the anchor tags, and
2. How do you get the carousel to restart without having to reload the page?

Thanks.

gachoong

Answer 1

Don’t have IE to try out, but for the <a> problem with text-decoration you should make it work with a CSS such as this:

a.no-txd:link,   
a.no-txd:visited,
a.no-txd:hover,
a.no-txd:active {
    text-decoration:none;
}

and then apply class no-txd (or whatever you name it – just change the no-txd in above CSS) to your <a> tags. See demo here:

• http://jsfiddle.net/jLtxT/

As for the thing stopping, I am not familiar with bxSlider, but from their API page:

• http://bxslider.com/options

there’s a startShow method. If you don’t find a better way, you can add a listener to your <a> and call this method after some time, e.g. using setTimeout, such as given here:

• Call js-function using JQuery timer

Of course, this depends on what you want to do, but you should have enough to play around and tweak to your needs.