Build a slick portfolio w/ jQuery & the Cycle slider plugin

by Joe Sak

I'm going to demonstrate how Neoteric Design builds a sliding portfolio, a design element which can be used to show off your best project work, a series of promotions for various sections of your site, or anything else you can imagine that makes sense in rotation. Here it is:

Arts & Business Council of Chicago

Helping Arts & Businesses Connect

The Arts & Business Council of Chicago has been serving Chicago for 25 years to strengthen the arts community through its partnerships, programs, resources, and services. We're pleased to announce the launch of a bold, redesigned website that conveys the energy and spirit of the organization. A bright, new look with strong imagery and type styles helps extend the existing brand. Resources for business volunteers and non-profits are easy to find and registrations for workshops and events are simple to use and update. A news blog keeps visitors up-to-date about trends and issues affecting the community.

Visit website »

Lincoln Park Chamber of Commerce

The Cornerstone of Your Success

The LPCC serves as a catalyst for business success and economic development in Lincoln Park. The redesigned website features an easy-to-use content management system, extensive news, blogs, and media feeds, and integration with the Chamber's membership management system, ChamberMaster.

Visit website »

Appolicious

Find mobile apps you'll love

Appolicious now has curated apps! As the mobile app landscape shifts and evolves, Appolicious stays on top with more app discovery features. Users can now create their own collection of applications, souping up the browsing experience. Go on, wrangle up your own set!

Visit website »

You can skip straight to the source code if you'd like.

Several times, I've been asked how to use the Coda slider jQuery plugin to build a web portfolio and every time I strongly recommended the jQuery Cycle plugin instead.

Why Cycle and not Coda?

Coda's markup requirements are too bulky and the pay-off is a single slide left/right transition. Cycle offers about 2 dozen transitions and a lite version that is comparable in size to Coda (though only with the 'fade' transition).

Both allow use of the jQuery Easing Plugin, which I recommend to fine-tune the sliding transition. When comparing the Coda settings options versus the Cycle settings options, we find a lot more options available from Cycle that are also a little easier to understand just from reading the name.

OK, these are just a couple of reasons for me, and I'd like to move on to demonstrating the portfolio.

Let's Get Started

Ingredients:

Construct the HTML

Following the example in this gist, create the HTML for the portfolio content. Each top-level DIV inside "#cycle_area" is considered one portfolio piece. In fact, Cycle attempts to load any top-level element into rotation, so be sure this part is consistent. Cycle best handles a list of IMGs or DIVs. For this example, I'm choosing DIVs to demonstrate its ability to rotate full chunks of HTML.

Wire up the JavaScript

Now that your HTML is complete, it's time to write the javascript! I'm just going to go over it line-by-line:

A Custom Method to Build Thumbnails in the Pager

At this point, you should check your page. It should be rolling along smoothly!

See it in Action:

If all went well, you should expect a portfolio that works much like our demo. If you need help, just leave comments.

Code Examples:

Construct the HTML:

Include the JavaScript:

Write the JavaScript:

See the HTML code

Full Tutorial & Demo:

The demo

The tutorial is available on GitHub

comments powered by Disqus