javascript - 如何让 Featherlight Image Gallery 发挥作用？

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。

更新的 fiddle :http://jsfiddle.net/z28D7/