“ Gridder Ajax”插件的问题

Question

I want to add the Gridder Ajax jquery plugin to my portfolio site in order to showcase my work. I followed the Readme file on the Github site ( https://github.com/oriongunning/gridder-ajax ) and copied the code exactly. I have also downloaded the plugin files and have pointed the plugin's JS script and CSS link to the correct directory path in the head of my html document as you can see in my code below. I have tried moving the JQuery code from the head to the bottom of the body in my document as well but that did not work. I also created a Jquery alert() to make sure that JQuery is actually running and it worked just fine. It seems like the JQuery code is not working but the CSS is. The reason I say this is because if I comment out the CSS plugin tag in the , then a unordered list bullet shows up next to the image. When I uncomment the code the bullet disappears. So I guess some styling is being applied. I think I am not calling the plugin's JS file correctly because I am expecting an image to render that I can click and then it should expand with a description and link.

Here is the link to my editor: https://ide.c9.io/dfmmalaw/scrollmagic-parallax

Here is the link to the site: https://scrollmagic-parallax-dfmmalaw.c9users.io

Here is the link to the files: https://preview.c9users.io/dfmmalaw/scrollmagic-parallax

I also created this JSfiddle to show you how my code looks and what is actually rendering. https://jsfiddle.net/dfmmalaw/ossjtn33/ Obviously JSfiddle cannot use the css and js files since they are not hosted remotely by the plugin author but you can at least get an idea of how my code is structured. Can someone tell me why this is not working?

Code in head:

<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>

Code in body:

<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

I'm not quite sure what is wrong as you've not really giving me enough information to help you. The ajax version is a little complex and usually needs to be tweaked for each usage.

Do you have a test link/image so I can view what's wrong?

In all cases, study the demo and the github page and you should eventually manage.

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

EDIT

Do no use the minified version and make sure all classes are correctly setup (the click was registered to the .do-expand-item which was inexistant in the markup.).The code is pretty well documented so it should not be too hard. I've added a jsfiddle below.

Regards, Orion