Way back when I started the design of my website, I had a few ideas that I wanted to explore. One of those ideas was that I wanted the website to be surprising – taking back users with something they weren’t expecting, but did not compromise usability.

Through the use of jQuery this was very possible, and due to the high availability of free plugins and examples, really quite easy. The authors of these plugins and examples spend a long time developing them for our use, often without credit – but without them, we designers wouldn’t be building the websites we are today. Below, I have listed all of the scripts and examples that have been used in the website, hopefully you will get something out of them too.

jQuery Infinite carousel

http://www.catchmyfame.com/2009/08/27/jquery-infinite-carousel-plugin-1-2-released/
This script powers both the sliding ‘featured’ items on the homepage and the portfolio previews within the portfolio item pages. There are numerous sliding graphic jQuery scripts available, and I did experiment with several of them – but this one worked the best for my case. This script has been customised slightly on my website.

jQuery hover fade

http://greg-j.com/static-content/hover-fade-redux.html
This example was used for all of the animated hovers throughout the website. The basis for this was also used to slide up the portfolio previews on the home and portfolio page.

jQuery anchors

http://www.position-absolute.com/articles/better-html-anchor-a-jquery-script-to-slide-the-scrollbar/
Although quite simple, this script provides the automatic smooth scrolling from the ‘Back to top’ anchor link in the footer.

jQuery Tools – Tooltips

http://flowplayer.org/tools/demos/index.html
This is a very useful library of jQuery tools I use regularly. In the case of my website, I used the tooltips plugin to aid in the understanding of my process on my about page.

Easyslider

http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
Another plugin I use quite regularly, this script powers the form choice sliding on the contact page – although it has been customised slightly.

jQuery validate

http://bassistance.de/jquery-plugins/jquery-plugin-validation/
This plugin provides the validation for required fields in my forms – very simple to install, and very powerful.

jQuery filter

http://www.newmediacampaigns.com/page/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours#zip
This plugin provides the filtering functionality on my portfolio page, filtered based on the class of the images.

Reject ie6

http://www.sandaru1.com/2009/10/17/reject-ie6/
Although most users won’t see this – this script lets users running ie6 know that the browser they are running is out of date, and provides a number of options to upgrade. I made the decision not to support ie6 with this website (for personal and professional reasons) and this tool provides a valuable solution for those still using the obsolete browser.

That lists them all (I think) – I encourage you to try some of them out, hopefully they will be as useful to you as they were to me.