基础轨道自定义缩略图不更改主图像

时间:2013-02-22 11:56:05

标签: thumbnails zurb-foundation orbit

我正在使用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/"

我错过了什么?

安迪

1 个答案:

答案 0 :(得分:0)

我找到了这个解决方案: 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>

希望它有效。

干杯。