Фонд Orbit пользовательские миниатюры не меняют основное изображение

Question

Я использую фреймворк Foundation и Orbit. Я создал слайдер здесь: http://www.abricot-production-dev.co.uk/group-two/gallery.html# , но большие пальцы не меняют основные фотографии на данный момент.

Мой код:

<div id="slider"> 
    <img src="images/slider/image-01.jpg" data-thumb="image-01.jpg" data-caption="#captionOne"/> 
    <img src="images/slider/image-02.jpg" data-thumb="image-02.jpg" data-caption="#captionTwo"/> 
    <img src="images/slider/image-03.jpg" data-thumb="image-03.jpg" data-caption="#captionThree"/> 
</div> 

<span class="orbit-caption" id="captionOne">Here is another caption...</span> 
<span class="orbit-caption" id="captionTwo">Here is a caption 2...</span> 
<span class="orbit-caption" id="captionThree">And here is a caption 3...</span> 

<ul class="orbit-bullets"> 
    <li class="has-thumb" style="background-image: url(images/slider/thumbs/image-01.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat; ">1</li> 
    <li class="has-thumb" style="background-image: url(images/slider/thumbs/image-02.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat; ">2</li> 
    <li class="has-thumb" style="background-image: url(images/slider/thumbs/image-03.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat; ">3</li> 
</ul> 

</div> 

инициализирован:

<script> 
    $(window).load(function() { 
     $("#slider").orbit(); 
    }); 
</script> 

И в foundation.min.js:

bullets:!1, bulletThumbs:!0, bulletThumbLocation:"../images/slider/thumbs/" 

Что мне не хватает?

Энди

Answer 1

Я нашел это решение: http://foundation.zurb.com/docs/components/orbit.html

Реализация:

<ul class="disc"> 
    <li class="has-thumb" style="background-image: url(images/slider/thumbs/image-01.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat; "data-orbit-link="headline-1">1</li> 
    <li class="has-thumb" style="background-image: url(images/slider/thumbs/image-02.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat; " data-orbit-link="headline-2">2</li> 
    <li class="has-thumb" style="background-image: url(images/slider/thumbs/image-03.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat; " data-orbit-link="headline-3">3</li> 
</ul> 

Надеюсь, что это работает.

Cheers.