jQuery plugins · JavaScript

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

HTML

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

Videos & tutorials

JavaScript + jQuery effects ➔