Question

我想将Gridder Ajax jquery插件添加到我的投资组合网站，以展示我的工作。我按照Github网站上的自述文件（https://github.com/oriongunning/gridder-ajax）并完全复制了代码。我还下载了插件文件，并将插件的JS脚本和CSS链接指向我的html文档头部中的正确目录路径，如下面的代码中所示。我已经尝试过在我的文档中将JQuery代码从头部移动到正文的底部，但这不起作用。我还创建了一个Jquery alert（）来确保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版本有点复杂，通常需要针对每种用法进行调整。

您是否有测试链接/图像，以便查看错误？

在所有情况下，研究demo和github页面，你最终应该管理。

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

修改

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

此致猎户

“Gridder Ajax”插件的问题

1 个答案: