基金会轨道自定义缩略图不改变主图像

Question

我正在使用基金会框架和轨道。我在这里建立了滑块：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> 

希望它有效。

干杯。