I am about to try, for the first time, to use Coda Slider. I've never used Jquery and a slider.

I've been looking at the code and the code on example sites. Looking at the CSS and HTML side of things. One thing that has stumped me is that on this slider I would want thumbnails as the navigation links below the main image similar to colinprior.co.uk

 

However, for the life of me I can not find the HTML markup that has the navigation links in most of the coda based sites. AM I missing something? I can see the CSS sides of things, but the HTML/XHTML Has totally stumped me.

 

I would thought it

In this case, I would suggest using a sprite for the slider links. Set up the nav list as normal (<ul><li><a id>link text</a></li></ul>). Give each link an id. You can use text-indent: -99999px, which will hide text from the links and you can then set a background image (sprite) on the anchors through the CSS, using background-position for hovers etc.

 

colinprior.co.uk has done it slightly differently by simply including an img within the anchor tags.

 

Hope this helps.

Edited February 9, 201115 yr by jay pick

In this case, I would suggest using a sprite for the slider links. Set up the nav list as normal (<ul><li><a id>link text</a></li></ul>). Give each link an id. You can use text-indent: -99999px, which will hide text from the links and you can then set a background image (sprite) on the anchors through the CSS, using background-position for hovers etc.

 

colinprior.co.uk has done it slightly differently by simply including an img within the anchor tags.

 

Hope this helps.

 

I see. So it's like a normal navigation bar then with on state, hover etc. Would that explain then why on his site each time I click the thumbnail a #number appears in the address bar because it's actually going to a new page?

I see. So it's like a normal navigation bar then with on state, hover etc. Would that explain then why on his site each time I click the thumbnail a #number appears in the address bar because it's actually going to a new page?

 

Its not going to a different page but a panel within the slider. So an anchor with an href="#5" would scroll to the panel within the slider that has that id. Not all versions of coda slider do this in the URL but still work in much the same way.

Edited February 10, 201115 yr by jay pick