Question

我试图让Featherlight的图片库功能正常工作。这是一个jQuery插件，我已经从他们的网站（http://noelboss.github.io/featherlight/）跟踪了他们的指令，但不幸的是我无法按照预期的方式工作。我想要实现的是通过点击图像拇指进行图库展示。从图库我应该能够在图库中包含的图像中导航，其中包含上一个，下一个图标。我已经添加了到css样式文件和js文件的链接。输入库的HTML代码，并将设置的javascript代码添加到库中。我是javascript的新手所以它可能是一些非常基本的东西，我真的很感激任何关于错误的暗示。代码可在以下位置找到： http://jsfiddle.net/ovedexlin/69qZx/

HTML代码：

<div class="adImages">
            <div class="row">
              <a class="thumbnail gallery" href="http://www.tranarportalen.se/UpLoad/Breeders/b11000/digger.jpg">
              <img src="http://www.tranarportalen.se/UpLoad/Breeders/b11000/digger.jpg" alt="thumb1" width="250" height="200">
              </a>
              <a class="thumbnail gallery" href="http://www.tranarportalen.se/UpLoad/Breeders/b11000/digger.jpg">
              <img src="http://www.tranarportalen.se/UpLoad/Breeders/b11000/digger.jpg" alt="thumb2" width="250" height="200">
              </a>
            </div>
          </div>

JS-代码：

$(document).ready(function(){
  $('a.gallery').featherlightGallery({
    gallery: {
        previous: '«',
        next: '»',
        fadeIn: 300
    },
    openSpeed: 300
  });
});

Answer 1

您的代码看起来很好（尽管您可能希望使用css设置宽度和高度），但是您没有包含featherlight.gallery.min.js，只包含css。

更新小提琴：http://jsfiddle.net/z28D7/

如何让Featherlight图库工作？

1 个答案: