"Gridder Ajax" 插件问题
Issue with "Gridder Ajax" plug-in
我想将 Gridder Ajax jquery 插件添加到我的投资组合网站以展示我的作品。我遵循 Github 站点 (https://github.com/oriongunning/gridder-ajax) 上的自述文件并准确复制了代码。我还下载了插件文件,并将插件的 JS 脚本和 CSS link 指向我的 html 文档头部的正确目录路径,如您在下面的代码中所见。我也尝试将 JQuery 代码从文档的头部移动到正文的底部,但这没有用。我还创建了一个 Jquery alert() 以确保 JQuery 实际上是 运行 并且它工作得很好。似乎 JQuery 代码无效,但 CSS 有效。我之所以这样说,是因为如果我注释掉 中的 CSS 插件标签,那么图像旁边会出现一个无序列表项目符号。当我取消注释代码时,项目符号消失。所以我想正在应用一些样式。我想我没有正确调用插件的 JS 文件,因为我希望呈现一个我可以单击的图像,然后它应该扩展为描述和 link。
这里是 link 给我的编辑:https://ide.c9.io/dfmmalaw/scrollmagic-parallax
这里是 link 站点:https://scrollmagic-parallax-dfmmalaw.c9users.io
这是文件的 link: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>
我不太确定哪里出了问题,因为您没有真正给我足够的信息来帮助您。 ajax 版本有点复杂,通常需要针对每次使用进行调整。
你有测试吗link/image所以我可以看看哪里出了问题?
在所有情况下,研究演示和 github 页面,您最终应该会管理。
http://www.oriongunning.com/demo/gridder-ajax/demo.php
编辑
不要使用缩小版本并确保所有 类 都正确设置(点击已注册到标记中不存在的 .do-expand-item。)代码非常好记录在案,所以它不应该太难。我在下面添加了一个 jsfiddle。
此致,
猎户座
我想将 Gridder Ajax jquery 插件添加到我的投资组合网站以展示我的作品。我遵循 Github 站点 (https://github.com/oriongunning/gridder-ajax) 上的自述文件并准确复制了代码。我还下载了插件文件,并将插件的 JS 脚本和 CSS link 指向我的 html 文档头部的正确目录路径,如您在下面的代码中所见。我也尝试将 JQuery 代码从文档的头部移动到正文的底部,但这没有用。我还创建了一个 Jquery alert() 以确保 JQuery 实际上是 运行 并且它工作得很好。似乎 JQuery 代码无效,但 CSS 有效。我之所以这样说,是因为如果我注释掉 中的 CSS 插件标签,那么图像旁边会出现一个无序列表项目符号。当我取消注释代码时,项目符号消失。所以我想正在应用一些样式。我想我没有正确调用插件的 JS 文件,因为我希望呈现一个我可以单击的图像,然后它应该扩展为描述和 link。
这里是 link 给我的编辑:https://ide.c9.io/dfmmalaw/scrollmagic-parallax
这里是 link 站点:https://scrollmagic-parallax-dfmmalaw.c9users.io
这是文件的 link: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>
我不太确定哪里出了问题,因为您没有真正给我足够的信息来帮助您。 ajax 版本有点复杂,通常需要针对每次使用进行调整。
你有测试吗link/image所以我可以看看哪里出了问题?
在所有情况下,研究演示和 github 页面,您最终应该会管理。
http://www.oriongunning.com/demo/gridder-ajax/demo.php
编辑
不要使用缩小版本并确保所有 类 都正确设置(点击已注册到标记中不存在的 .do-expand-item。)代码非常好记录在案,所以它不应该太难。我在下面添加了一个 jsfiddle。
此致, 猎户座