Tutorial Growing Thumbnails Portfolio

DEMO - DOWNLOAD - SOURCE

In this tutorial we will be making a portfolio with HTML5, jQuery and CSS3 that features an interesting growing effect.

The HTML

As usual, we start off with a blank HTML5 document, and add the needed stylesheets, markup and JavaScript includes.

01<!DOCTYPE html>
02<html>
03    <head>
04        <meta charset="utf-8" />
05        <title>Growing Thumbnails Portfolio with jQuery &amp; CSS3 | Tutorialzine Demo</title>
06
07        <!-- The stylesheet -->
08        <link rel="stylesheet" href="assets/css/styles.css" />
09
10        <!-- Google Fonts -->
11        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Rochester|Bree+Serif" />
12
13        <!--[if lt IE 9]>
14          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
15        <![endif]-->
16    </head>
17
18    <body>
19
20        <header>
21            <h2>Welcome to</h2>
22            <h1>Dan's Portfolio</h1>
23        </header>
24
25        <div id="main">
26
27            <h3>My Latest Projects</h3>
28
29            <a class="arrow prev">Prev</a>
30            <a class="arrow next">Next</a>
31
32            <ul id="carousel">
33                <li class="visible"><a href=""><img src="assets/img/sites/s1.jpg" alt="" /></a></li>
34            <!--  Place additional items here -->
35            </ul>
36
37        </div>
38
39        <!-- JavaScript includes - jQuery and our own script.js -->
40        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
41        <script src="assets/js/script.js"></script>
42
43    </body>
44</html>

The important bit to note here is the #carousel unordered list. This element holds a collection of li items that represent your recent works. The visible class is only added if the thumbnail is to be shown. Only three thumbnails will be visible at a time. The href attribute of the hyperlink can point to the website in question, or a larger version of the image if you plan to use a lightbox together with this example.

Growing Thumbnail Portfolio

The JavaScript

All of the JavaScript/jQuery code for this example resides in assets/js/script.js. We will write a JavaScript class called Navigator that will manage the carousel for us. This will involve writing methods for listening for clicks on the arrows, partitioning the carousel into groups of 3 items and showing them.
Here is how the class will be used:

01$(document).ready(function(){
02
03    // Initialize the object on dom load
04    var navigator = new Navigator({
05        carousel: '#carousel',
06        nextButton: '.arrow.next',
07        prevButton: '.arrow.prev',
08        // chunkSize:3,
09        shuffle: true
10    });
11
12    navigator.init();
13});

When the document is loaded, we will create an instance of the class, passing the carousel div, the arrows and an optional parameter for whether you want the list to be shuffled. There is one more parameter that can go here – chunkSize. This property determines how many thumbnails will be featured at once, the default is 3.
The first step to achieve this, is to write the layout of the class:

01// A Navigator "class" responsible for navigating through the carousel.
02function Navigator(config) {
03
04    this.carousel = $(config.carousel); //the carousel element
05    this.nextButton = $(config.nextButton); //the next button element
06    this.prevButton = $(config.prevButton); //the previous button element
07    this.chunkSize = config.chunkSize || 3; //how many items to show at a time (maximum)
08    this.shuffle = config.shuffle || false; //should the list be shuffled first? Default is false.
09
10    //private variables
11    this._items = $(config.carousel + ' li'); //all the items in the carousel
12    this._chunks = []; //the li elements will be split into chunks.
13    this._visibleChunkIndex = 0; //identifies the index from the this._chunks array that is currently being shown
14
15    this.init = function () {
16
17        // This will initialize the class, bind event handlers,
18        // shuffle the li items, split the #carousel list into chunks
19
20    }
21
22    // Method for handling arrow clicks
23    this.handlePrevClick = function(e) {};
24    this.handleNextClick = function(e) {};
25
26    // show the next chunk of 3 lis
27    this.showNextItems = function() {};
28
29    // show the previous chunk of 3 lis
30    this.showPrevItems = function() {};
31
32    // These methods will determine whether to
33    // show or hide the arrows (marked as private)
34    this._checkForBeginning = function() {};
35    this._checkForEnd = function() {};
36
37    // A helper function for splitting the li
38    // items into groups of 3
39    this._splitItems = function(items, chunk) {};
40}

We are using an underscore to denote which properties and methods are private. External code should not use any property that starts with an underscore.
In the fragments below you can see how each of the methods are implemented. First comes init(), which sets up the carousel by binding event listeners and partitioning the carousel ul.

01this.init = function () {
02
03    //Shuffle the array if neccessary
04    if (this.shuffle) {
05        //remove visible tags
06        this._items.removeClass('visible');
07
08        //shuffle list
09        this._items.sort(function() { return 0.5 - Math.random() });
10
11        //add visible class to first "chunkSize" items
12        this._items.slice(0, this.chunkSize).addClass('visible');
13    }
14
15    //split array of items into chunks
16    this._chunks = this._splitItems(this._items, this.chunkSize);
17
18    var self = this;
19
20    //Set up the event handlers for previous and next button click
21    self.nextButton.on('click', function(e) {
22        self.handleNextClick(e);
23    }).show();
24
25    self.prevButton.on('click', function(e) {
26        self.handlePrevClick(e);
27    });
28
29    // Showing the carousel on load
30    self.carousel.addClass('active');
31};

Next are the methods for handling arrow clicks.

01this.handlePrevClick = function (e) {
02
03    e.preventDefault();
04
05    //as long as there are some items before the current visible ones, show the previous ones
06    if (this._chunks[this._visibleChunkIndex - 1] !== undefined) {
07        this.showPrevItems();
08    }
09};
10
11this.handleNextClick = function(e) {
12
13    e.preventDefault();
14
15    //as long as there are some items after the current visible ones, show the next ones
16    if (this._chunks[this._visibleChunkIndex + 1] !== undefined) {
17        this.showNextItems();
18    }
19};

They call showPrevItems and showNextItems respectfully:

01this.showNextItems = function() {
02
03    //remove visible class from current visible chunk
04    $(this._chunks[this._visibleChunkIndex]).removeClass('visible');
05
06    //add visible class to the next chunk
07    $(this._chunks[this._visibleChunkIndex + 1]).addClass('visible');
08
09    //update the current visible chunk
10    this._visibleChunkIndex++;
11
12    //see if the end of the list has been reached.
13    this._checkForEnd();
14
15};
16
17this.showPrevItems = function() {
18
19    //remove visible class from current visible chunk
20    $(this._chunks[this._visibleChunkIndex]).removeClass('visible');
21
22    //add visible class to the previous chunk
23    $(this._chunks[this._visibleChunkIndex - 1]).addClass('visible');
24
25    //update the current visible chunk
26    this._visibleChunkIndex--;
27
28    //see if the beginning of the carousel has been reached.
29    this._checkForBeginning();
30
31};

The above methods remove or assign the visible class, which is how we control the visibility of the thumbnails. It is a good idea to hide the previous/next arrow if there are no further items to show. This is done with the checkForBeginning and checkForEnd methods.

01this._checkForBeginning = function() {
02    this.nextButton.show(); //the prev button was clicked, so the next button can show.
03
04    if (this._chunks[this._visibleChunkIndex - 1] === undefined) {
05        this.prevButton.hide();
06    }
07    else {
08        this.prevButton.show();
09    }
10};
11
12this._checkForEnd = function() {
13    this.prevButton.show(); //the next button was clicked, so the previous button can show.
14
15    if (this._chunks[this._visibleChunkIndex + 1] === undefined) {
16        this.nextButton.hide();
17    }
18    else {
19        this.nextButton.show();
20    }
21};

Lastly, here is the splitItems method, which generates the chunks. It relies on the splice JavaScript method for removing parts of the array and adding them to the splitItems array (it becomes an array of arrays):

01this._splitItems = function(items, chunk) {
02
03    var splitItems = [],
04    i = 0;
05
06    while (items.length > 0) {
07        splitItems[i] = items.splice(0, chunk);
08        i++;
09    }
10
11    return splitItems;
12
13};

Congrats! You now have a working example. We are only left with styling it.

Growing CSS3 Effect

The CSS

The styling of the portfolio is defined in assets/css/styles.css. Only the more interesting parts are shown here, as the rest is omitted for brevity.

01#carousel{
02    margin-top:200px;
03    text-align:center;
04    height:60px;
05    background-color:#111;
06    box-shadow:0 3px 5px #111;
07
08    /* Initially hidden */
09    opacity:0;
10
11    /* Will animate the grow effect */
12    -moz-transition:0.4s opacity;
13    -webkit-transition:0.4s opacity;
14    transition:0.4s opacity;
15}
16
17#carousel.active{
18    opacity:1;
19}
20
21/* The thumbnails, hidden by default */
22
23#carousel li{
24    display:none;
25    list-style:none;
26    width:150px;
27    height:150px;
28    margin: -82px 18px 0;
29    position:relative;
30
31    -moz-transition:0.4s all;
32    -webkit-transition:0.4s all;
33    transition:0.4s all;
34}
35
36/* This class will show the respective thumbnail */
37
38#carousel li.visible{
39    display:inline-block;
40}
41
42#carousel li a img{
43    border:none;
44}
45
46#carousel li img{
47    display:block;
48    width:auto;
49    height:auto;
50    max-width:100%;
51    max-height:100%;
52    position:relative;
53    z-index:10;
54}
55
56/* Creating the cradle below the thumbnails.
57    Uses % so that it grows with the image. */
58
59#carousel li:after{
60    content:'';
61    background:url('../img/cradle.png') no-repeat top center;
62    background-size:contain;
63    bottom: 4%;
64    content: "";
65    height: 50px;
66    left: -6.5%;
67    position: absolute;
68    right: -6.5%;
69    width: auto;
70    z-index: 1;
71}
72
73/* Enlarging the thumbnail */
74
75#carousel li:hover{
76    height: 197px;
77    margin-top: -152px;
78    width: 222px;
79}

With this our Growing Thumbnails Portfolio is complete!

Wednesday, May 30, 2012