javascript - "Gridder Ajax"插件问题

Question

我想将 Gridder Ajax jquery 插件添加到我的作品集网站中，以展示我的作品。我按照 Github 站点( https://github.com/oriongunning/gridder-ajax )上的自述文件并准确复制了代码。我还下载了插件文件，并将插件的 JS 脚本和 CSS 链接指向 html 文档头部的正确目录路径，如下面的代码所示。我也尝试过将文档中的 JQuery 代码从头部移动到正文底部，但这不起作用。我还创建了一个 Jqueryalert() 以确保 JQuery 实际运行并且工作正常。看起来 JQuery 代码不起作用，但 CSS 可以。我这么说的原因是，如果我注释掉 中的 CSS 插件标签，那么图像旁边会显示一个无序列表项目符号。当我取消注释代码时，项目符号消失。所以我猜想正在应用一些样式。我认为我没有正确调用插件的 JS 文件，因为我期望渲染一个可以单击的图像，然后它应该使用描述和链接进行扩展。

这是我的编辑器的链接:https://ide.c9.io/dfmmalaw/scrollmagic-parallax

以下是该网站的链接:https://scrollmagic-parallax-dfmmalaw.c9users.io

以下是文件的链接:https://preview.c9users.io/dfmmalaw/scrollmagic-parallax

我还创建了这个 JSfiddle 来向您展示我的代码的外观以及实际呈现的内容。 https://jsfiddle.net/dfmmalaw/ossjtn33/显然，JSfiddle 无法使用 css 和 js 文件，因为它们不是由插件作者远程托管的，但您至少可以了解我的代码的结构。有人可以告诉我为什么这不起作用吗？

头部代码:

<link href="css/gridder-ajax.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="js/gridder-ajax.js"></script>

<script>
    jQuery(document).ready(function ($) {

        // Call Gridder Ajax with
        // default options

        $('.gridder-list').GridderAjax({
            scrollOffset: 0,
            rootUrl: "/",
            animationSpeed: 600,
            animationEasing: "easeInOutExpo"
        });
    });
</script>

正文中的代码:

<div class="gridder-list">
  <li class="item  item_1">
    <a href="item_4" title="Item 4" class="link">
      <img src="http://lorempixel.com/300/200/food/?date=6">
      <span class="title">Item 4</span>
      <span class="description">A small Description</span>
    </a>
    <span class="selectedBox"></span>
  </li>
</div>

Answer 1

我不太确定出了什么问题，因为您没有真正向我提供足够的信息来帮助您。 ajax 版本有点复杂，通常需要针对每次使用进行调整。

您有测试链接/图片以便我可以查看问题所在吗？

在所有情况下，研究演示和 github 页面，您最终应该能够管理。

http://www.oriongunning.com/demo/gridder-ajax/demo.php

编辑

不要使用缩小版本并确保所有类都正确设置(点击已注册到标记中不存在的 .do-expand-item。)。代码有很好的文档记录，因此不应该太难。我在下面添加了一个 jsfiddle。

问候，猎户座