Useful jQuery Plugins Part 2: Layout
Part deux of the jQuery plugins focuses on layout. I will talk about 2 awesome plugins that I’ve used before (whether at work or in my ventures). First, what I mean by a layout jQuery plugin is one that places and controls major content elements on a screen.
This is a great plugin that creates the very popular effect of displaying a set of images that slide through. We’ve seen it before above the fold on the splash page on almost any corporate website–image one will talk about a fancy new product; a few seconds pass by and image 2 will push out image 1; few more seconds, image 3 does the same to image 2… At any point if you want to go back to a particular image, some sort of navigation is provided that allows you to do that.
While SlideJS doesn’t give you the capabilities nor the handy utility of Wow Slider, it’s free and open source so you can modify it to suit your needs.
Official Website – Check the official slide js website for documentation and live examples
Github – The repo page for latest release, docs, and branches
SlidesJS 3.0 – Download right from here (you may want to check the official webpage or github page for the latest release)
So this is an awesome look, especially when it’s animated. Basically you put a bunch of small <div>s of various sizes inside a container <div> and this plugin will re-arrange the items to make it fit as well as possible (or according to a certain pattern). Awesome already, right? Yes. It gets better because when you filder your set of <div>s by hidding some, or you resize the window or the container div, the objects will re-arrange automatically. Not only that, they will animate (fly?) into their new position!
Originally I used isotope, which is great, but unfortunately it’s not free. If you have a non-commercial website you may use it, but you’ll have to pay a dev licence for commercial use. Enter jQuery Masonry. This plugin might not be as well rounded as isotope (although I couldn’t find any issue with it), but it’s free (MIT Liscence).
Official Website – This is a great place for docs and examples. Highly recommend going there when implementing.
Github – Repo page.
jQuery Masonry Download – Don’t want to go anywhere else? Just download the it here.