Trouble installing
Forever-Peace opened this issue · 5 comments
I'm a bit clueless when it comes to html, and I'm having trouble getting Fluidbox to work with my fork of beautiful_jekyll (from https://github.com/daattali/beautiful-jekyll#readme) on my.
I have:
- Copied jquery.fluidbox.min.js here (https://github.com/Forever-Peace/Ground_Control/tree/master/js). Beautiful_jekyll already came with jquery-1.11.2.min.js.
- Copied fluidbox.min.css and fluidbox.min.css.map here (https://github.com/Forever-Peace/Ground_Control/tree/master/css).
- Edited the head.html "includes" file to load jquery-throttle-debounce (line 121 here https://github.com/Forever-Peace/Ground_Control/blob/master/_includes/head.html).
- Edited main.js to initialize fluidbox for any picture (line 134 at https://github.com/Forever-Peace/Ground_Control/blob/master/js/main.js).
- Changed some of the picture tags to utilize the format specified by fluidbox. (line 11 here https://github.com/Forever-Peace/Ground_Control/blob/master/_apps/install_apps.md)
Page where fluidbox should be operating is here: https://forever-peace.github.io/Ground_Control/apps/install_apps/
I'm guessing the 4 required files aren't being loaded correctly, but I don't really know where/how to load them. jquery should already be loaded, and throttle debounce was added to the end of the head includes, but I haven't specified jquery.fluidbox.min.js or fluidbox.min.css anywhere...
Any assistance here would be much appreciated. Thank you - sorry for the trouble.
Fluidbox does not seem to be loaded on your page. You probably have to modify the YAML file so that Fluidbox will be loaded to the theme: https://github.com/daattali/beautiful-jekyll#yaml-front-matter-parameters.
You can see that Fluidbox is clearly not loaded because attempting to run $().fluidbox in the console returns undefined.
Ah, yes thank you! I can see the js files in the console and sources now, but I'm unfortunately still getting the error message, and lightbox still doesn't appear to be working. Here is the current relevant front matter for the page now:
ext-js: //cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js
js:
- /js/jquery-1.11.2.min.js
- /js/jquery.fluidbox.min.js
css: /css/fluidbox.min.css
jquery would already be loaded anyways, but loading it manually here seems to ensure that jquery is loaded before fluidbox. However, even putting ext-js ahead of js in the front matter appears to put the throttle script first (and fluidbox is throwing up a warning about not finding it) - I'll have to dig into some of the other files here to see if I can reorder this manually. Current order that things are loaded:
http://imgur.com/HeVKZ8D
Ideas?
Thanks for the help!
Debounce/throttle plugin is not required but recommended. However, if you want Fluidbox to take advantage of it, you will need to load that plugin before Fluidbox does. It will be a lot easier if you have a build process, where you can specify what dependencies are required and they will be automagically loaded in the correct order.
From your page I can see that you are running into a syntax error in your code: Uncaught SyntaxError: Unexpected identifier.
To simplify the troubleshooting process, I suggest that you check your browser console: it will tell you what have went wrong when the browser attempts to parse and execute your JS code.
It's raising an error when I try to call $(function... in main.js.
Console message:
Is there anything else from the browser console that would be helpful here? Again, I apologize, this is not my strong suite.
Pass your code through JSLint/Hint and you will see what went wrong: you are placing the DOM ready handler in an object called main.
I'm sorry but I cannot help you any further—these errors are not caused by Fluidbox at all.