Everyone has seen a super cool jQuery plugin out there on the wild, wild internet right? Perhaps you only became interested in actually learning more about jQuery and JavaScript by finding a jQuery plugin and trying to use it on your own site. No shame of course. I’m sure that’s about how it happened for me. They can be so easy to use that you can pull off some pretty great stuff without much work.
I’ve made a number of them myself. For instance, FitVids. But I’ve screencasted about that one before. This time, I’m going to pick a couple of jQuery plugins that looked neat to me, but I’ve never ever used them before. I’m doing that on purpose, so can see the thought process that goes into figuring out how a random jQuery plugin works for the first time.
The first one we pick is a lightbox plugin called Boxer. You know, one of those design patterns where you click a thumbnail of an image and it opens a bigger version of it right on the page and kinda darkens out the background. We get it working pretty darn quickly following the documentation.
There is where we got on that one:
See the Pen Trying out Boxer Plugin by Chris Coyier (@chriscoyier) on CodePen
The next one we pick is called OWL Carousel. It looks like a pretty darn nice slider, having the two big features that you often don’t see in older sliders: touch support and flexibility. We get this one working also by using the documentation but also checking out the provided demos.
This is where we got on that one in just a few minutes:
See the Pen 73452e0922f60633ef3e142f46f78f31 by Chris Coyier (@chriscoyier) on CodePen
In both of these examples, what drew me toward bookmarking them was:
- The good documentation.
- The seemingly nice balance of options and bloat. Meaning: there was quite a few well-named and clearly-useful parameters (including callbacks), but not so many that it seems overwhelming.
- The nice design. These are visual things after all.
We should dig into writing our own plugin a little bit next.
