5 useful jQuery libraries

Below I’ve consolidated a list of 5 jQuery libraries I’ve used abundantly when creating my bespoke WordPress themes or websites for clients. Although react is taking over as the go to Javascript library (which I prefer to use), jQuery is ubiquitous and is still worth learning. You’ll notice many websites in the wild still using it, so make sure you leverage the best open sources libraries for all the functional complexities.

1. slick.js

Probably one of the most renowned libraries available, Slick provides out of the box slider functionality so you can focus on the designs styling. It’s that popular there’s even a react equivalent.

2. isotope.js

A popular trend in web design is a filtering UI. Usually there’s a masonry grid of blog posts and at the top there will be filter options, example here. Isotope allows you to filter these posts by attaching a click event listener to each of the buttons. Then, if the button shares the same class with any of the posts, once clicked, all other posts not matching that class will fade away. I personally love this library, the built in fade away animation and thorough documentation makes implementing this filtering feature a breeze.

Bonus: you don’t have to use jQuery with this library, vanilla JavaScript is an option to initiate an instance.

3. masonry.js

Speaking of masonry, there’s no reason to fear when you see a brick wall styling block in designs anymore, masonry.js has your back. Metafizzy (creator of isotope) offers a very simple way of creating that masonry UI. Although a masonry layout is somewhat more achievable in native CSS now with CSS grid, for initial prototyping masonry.js allows you to create this complex layout with just a little configuration. Also, packery.js achieves the same as this library with a few less options and being less in file size. I’ve found packery to be a little less buggy, especially when setting widths of the masonry elements and when resizing the window width.

4. fancybox.js

In need of a light-box? fancybox to the rescue. Again, another very intuitive library to use. Options includes image lightbox galleris, pop up models and instant play video lightbox. It’s my go to light-box library to use when working with jQuery.

5. scrollify.js

Another popular trend I’ve noticed is full page scrolling. With a few lines of CSS and a little bit of JavaScript you can transform your page to a slide show. A paid and a more full featured alternative would be fullpage.js, either one does the job brilliantly.

Note: Of course using a jQuery library is entirely subjective, sometimes it’s just easier to use plain vanilla javascript. For instance, to toggle a mobile menu and hamburger icon.