jQuery plugins
Pre-written JavaScript
There are lots of pre-written JavaScript code bits out there (in the nebulous web)
Quite a popular segment is jQuery plugins: new features added to jQuery
Example plugins
- Lightboxes
- Carousels
- Animation systems
- Parallax
- Waypoints
- etc.
Using jQuery plugins
They always require jQuery (obviously…)
The <script> tags must go in a specific order:
- jQuery
- The plugin
- Your JavaScript file
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/waypoints.js"></script>
</body>
</html>
Starting the plugin
jQuery plugins almost always want you to write some code to initialize the plugin. It’s usually in a form similar to this:
$('.thingy').thePluginName();
It could be much more complicated too. You’ll have to read the documentation, they’re all different.
Plugin initialization tips
Always put the plugin initialization code in your main.js file—I don’t care where their documentation tells you to put it!
Also, if their docs tell you to put the <script> tag in the <head> of your HTML—they’re plain wrong. <script> tags always go at the bottom right above the closing </body> tag.