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.
Growing Thumbnails Portfolio with jQuery & CSS3 );
navigator.init();
});</pre>
<p>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 – <strong>chunkSize</strong>. This property determines how many thumbnails will be featured at once, the default is 3.</p>
<p>The first step to achieve this, is to write the layout of the class:</p>
<pre class="brush:js">// A Navigator "class" responsible for navigating through the carousel.
function Navigator(config)
this.carousel = $(config.carousel); //the carousel element
this.nextButton = $(config.nextButton); //the next button element
this.prevButton = $(config.prevButton); //the previous button element
this.chunkSize = config.chunkSize
// Method for handling arrow clicks
this.handlePrevClick = function(e) {};
this.handleNextClick = function(e) {};
// show the next chunk of 3 lis
this.showNextItems = function() {};
// show the previous chunk of 3 lis
this.showPrevItems = function() {};
// These methods will determine whether to
// show or hide the arrows (marked as private)
this._checkForBeginning = function() {};
this._checkForEnd = function() {};
// A helper function for splitting the li
// items into groups of 3
this._splitItems = function(items, chunk) {};
}</pre>
<p>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.</p>
<p>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.</p>
<pre class="brush:js">this.init = function ()
//Shuffle the array if neccessary
if (this.shuffle)
//remove visible tags
this._items.removeClass('visible');
//shuffle list
this._items.sort(function() return 0.5 - Math.random() );
//add visible class to first "chunkSize" items
this._items.slice(0, this.chunkSize).addClass('visible');
}
//split array of items into chunks
this._chunks = this._splitItems(this._items, this.chunkSize);
var self = this;
//Set up the event handlers for previous and next button click
self.nextButton.on('click', function(e)
self.handleNextClick(e);
).show();
self.prevButton.on('click', function(e)
self.handlePrevClick(e);
);
// Showing the carousel on load
self.carousel.addClass('active');
};</pre>
<p>Next are the methods for handling arrow clicks.</p>
<pre class="brush:js">this.handlePrevClick = function (e)
e.preventDefault();
//as long as there are some items before the current visible ones, show the previous ones
if (this._chunks[this._visibleChunkIndex - 1] !== undefined)
this.showPrevItems();
};
this.handleNextClick = function(e)
e.preventDefault();
//as long as there are some items after the current visible ones, show the next ones
if (this._chunks[this._visibleChunkIndex + 1] !== undefined)
this.showNextItems();
};</pre>
<p>They call showPrevItems and showNextItems respectfully:</p>
<pre class="brush:js">this.showNextItems = function()
//remove visible class from current visible chunk
$(this._chunks[this._visibleChunkIndex]).removeClass('visible');
//add visible class to the next chunk
$(this._chunks[this._visibleChunkIndex + 1]).addClass('visible');
//update the current visible chunk
this._visibleChunkIndex++;
//see if the end of the list has been reached.
this._checkForEnd();
;
this.showPrevItems = function()
//remove visible class from current visible chunk
$(this._chunks[this._visibleChunkIndex]).removeClass('visible');
//add visible class to the previous chunk
$(this._chunks[this._visibleChunkIndex - 1]).addClass('visible');
//update the current visible chunk
this._visibleChunkIndex--;
//see if the beginning of the carousel has been reached.
this._checkForBeginning();
;</pre>
<p>The above methods remove or assign the <strong>visible</strong> 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 <em>checkForBeginning</em> and <em>checkForEnd</em> methods.</p>
<pre class="brush:js">this._checkForBeginning = function()
this.nextButton.show(); //the prev button was clicked, so the next button can show.
if (this._chunks[this._visibleChunkIndex - 1] === undefined)
this.prevButton.hide();
else
this.prevButton.show();
};
this._checkForEnd = function()
this.prevButton.show(); //the next button was clicked, so the previous button can show.
if (this._chunks[this._visibleChunkIndex + 1] === undefined)
this.nextButton.hide();
else
this.nextButton.show();
};</pre>
<p>Lastly, here is the <em>splitItems</em> 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):</p>
<pre class="brush:js">this._splitItems = function(items, chunk)
var splitItems = [],
i = 0;
while (items.length > 0)
splitItems[i] = items.splice(0, chunk);
i++;
return splitItems;
};</pre>
<p>Congrats! You now have a working example. We are only left with styling it.</p>
<div id="attachment_2017" class="wp-caption alignnone" style="width: 630px"><a href="http://demo.tutorialzine.com/2012/05/growing-thumbnails-portfolio-jquery-css3/"><img class="size-full wp-image-2017" title="Growing CSS3 Effect" src="http://developersarena.com/wp-content/uploads/2012/05/467dgrowing-thumbnail-effect-css3-transitions.jpg" alt="Growing CSS3 Effect" width="620" height="260" /></a>
<p class="wp-caption-text">Growing CSS3 Effect</p>
</div>
<h3>The CSS</h3>
<p>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.</p>
<pre class="brush:css">#carousel
margin-top:200px;
text-align:center;
height:60px;
background-color:#111;
box-shadow:0 3px 5px #111;
/* Initially hidden */
opacity:0;
/* Will animate the grow effect */
-moz-transition:0.4s opacity;
-webkit-transition:0.4s opacity;
transition:0.4s opacity;
#carousel.active
opacity:1;
/* The thumbnails, hidden by default */
#carousel li
display:none;
list-style:none;
width:150px;
height:150px;
margin: -82px 18px 0;
position:relative;
-moz-transition:0.4s all;
-webkit-transition:0.4s all;
transition:0.4s all;
/* This class will show the respective thumbnail */
#carousel li.visible
display:inline-block;
#carousel li a img
border:none;
#carousel li img
display:block;
width:auto;
height:auto;
max-width:100%;
max-height:100%;
position:relative;
z-index:10;
/* Creating the cradle below the thumbnails.
Uses % so that it grows with the image. */
#carousel li:after
content:'';
background:url('../img/cradle.png') no-repeat top center;
background-size:contain;
bottom: 4%;
content: "";
height: 50px;
left: -6.5%;
position: absolute;
right: -6.5%;
width: auto;
z-index: 1;
/* Enlarging the thumbnail */
#carousel li:hover
height: 197px;
margin-top: -152px;
width: 222px;
</pre>
<p><strong>With this our Growing Thumbnails Portfolio is complete!</strong></p>
<h3>It’s a wrap!</h3>
<p>You can easily customize today’s example by incorporating a lightbox script, increasing the number of thumbnails shown at once, or even by turning it into a gallery. If you do something interesting be sure to share it in the comment section below!</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Tutorialzine?a=6teS44ZkTjY:mBsj3NmIe6Q:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/Tutorialzine?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Tutorialzine?a=6teS44ZkTjY:mBsj3NmIe6Q:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/Tutorialzine?i=6teS44ZkTjY:mBsj3NmIe6Q:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Tutorialzine?a=6teS44ZkTjY:mBsj3NmIe6Q:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/Tutorialzine?i=6teS44ZkTjY:mBsj3NmIe6Q:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Tutorialzine?a=6teS44ZkTjY:mBsj3NmIe6Q:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Tutorialzine?i=6teS44ZkTjY:mBsj3NmIe6Q:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Tutorialzine?a=6teS44ZkTjY:mBsj3NmIe6Q:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Tutorialzine?i=6teS44ZkTjY:mBsj3NmIe6Q:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Tutorialzine?a=6teS44ZkTjY:mBsj3NmIe6Q:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/Tutorialzine?d=qj6IDK7rITs" border="0"></img></a>
</div>
<p><img src="http://feeds.feedburner.com/~r/Tutorialzine/~4/6teS44ZkTjY" height="1" width="1" />|
<div><a href="http://tutorialzine.com/2012/05/growing-thumbnails-portfolio-jquery-css3/"><img src="http://cdn.tutorialzine.com/img/featured/2004.jpg" /></a></div>
<p> In this tutorial we will be making a portfolio with HTML5, jQuery and CSS3 that features an interesting growing effect.}</p>
<p>Read more : <a target="_blank" href="http://feedproxy.google.com/~r/Tutorialzine/~3/6teS44ZkTjY/" title="Growing Thumbnails Portfolio">Growing Thumbnails Portfolio</a></p>
<div class="clear"></div>
</div><!-- .entry-content-->
<p class="filed categories alt-font tight">Posted in Uncategorized.</p>
<p class="comments-link"><a href="http://developersarena.com/web/2012/05/growing-thumbnails-portfolio/#respond" rev="post-22982" >No comments</a></p>
<p class="by-line">
<span class="author vcard full-author">
<span class="by alt-font">By</span> <a class="url fn" href="http://developersarena.com/author/Martin Angelov/" title="View all posts by Martin Angelov">Martin Angelov</a> </span>
<span class="date full-date"><span class="ndash alt-font">–</span> <abbr class="published" title="2012-05-30T17:06">May 30, 2012</abbr></span>
</p><!--/by-line-->
<div id="post-comments-22982-target"></div>
<div class="clear"></div>
</div><!-- .post --> <div id="comments">
<div class="rule-major"><hr /></div>
<h2 class="h1 comments-title">0 Responses</h2>
<p>Stay in touch with the conversation, subscribe to the <a class="feed" rel="alternate" href="http://developersarena.com/web/2012/05/growing-thumbnails-portfolio/feed/"><acronym title="Really Simple Syndication">RSS</acronym> feed for comments on this post</a>.</p>
<div id="respond-p22982">
<form action="http://developersarena.com/wp-comments-post.php" method="post" class="comment-form">
<p class="comment-form-comment tight">
<label class="h3" for="comment-p22982">Leave a Reply <em id="cancel-comment-reply"><a rel="nofollow" id="cancel-comment-reply-link-p22982" href="/inspiration/2012/05/growing-thumbnails-portfolio/#respond-p22982" style="display:none;">Cancel</a></em></label>
<br class="lofi" />
<span class="comment-form-comment-area">
<textarea id="comment-p22982" name="comment" rows="8" cols="40"></textarea><br />
<em class="some-html-is-ok"><abbr title="You can use: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> ">Some HTML is OK</abbr></em>
</span>
</p>
<p class="comment-form-user-info tight">
<input type="text" id="author-p22982" name="author" value="" size="22" />
<label for="author-p22982">Name <em>(required)</em></label>
</p><!--/name-->
<p class="comment-form-user-info tight">
<input type="text" id="email-p22982" name="email" value="" size="22" />
<label for="email-p22982">Email <em>(required, but never shared)</em></label>
</p><!--/email-->
<p class="comment-form-user-info tight">
<input type="text" id="url-p22982" name="url" value="" size="22" />
<label title="Your website address" for="url-p22982">Web</label>
</p><!--/url-->
<p class="tight">
<input name="submit" type="submit" value="Post comment" />
<span class="comment-form-trackback">or, reply to this post via <a rel="trackback" href="http://developersarena.com/web/2012/05/growing-thumbnails-portfolio/trackback/">trackback</a>.</span>
</p>
<input type='hidden' name='comment_post_ID' value='22982' id='comment_post_ID_p22982' />
<input type='hidden' name='comment_parent' id='comment_parent_p22982' value='0' />
</form>
</div>
</div><!--#comments-->
<div class="pagination-single">
<span class="previous">« <a href="http://developersarena.com/web/2012/05/is-your-mobile-operator-getting-in-the-way-of-voip-services-for-cheaper-calls/" rel="prev">Is your mobile operator getting in the way of VoIP services for cheaper calls?</a></span>
<span class="next"><a href="http://developersarena.com/web/2012/05/mark-pincus-on-zyngas-facebook-addiction-weve-never-thought-of-it-in-terms-of-attachment-or-detachment/" rel="next">Mark Pincus On Zynga’s Facebook Addiction: “We’ve Never Thought Of It In Terms Of Attachment (Or Detachment)”</a> »</span>
</div>
</div><!--#content-->
<hr class="lofi" />
<div id="sidebar">
<div id="carrington-subscribe" class="widget">
<h2 class="widget-title">Subscribe</h2>
<a class="feed alignright" title="RSS 2.0 feed for posts" rel="alternate" href="http://developersarena.com/feed/">
<img src="http://developersarena.com/wp-content/themes/carrington-blog/img/rss-button.gif" alt="Developers Arena latest posts" title="Developers Arena latest posts" />
</a>
</div><!--.widget-->
<div id="carrington-about" class="widget">
<div class="about">
<h2 class="widget-title">About Developers Arena</h2>
Developersarena.com is a place where we share our knowledge, thoughts. DA handles topics such as web technologies, mobile applications, technology, tips etc.<a class="more" href="http://developersarena.com/about/">more →</a> </div>
</div><!--.widget-->
<div id="primary-sidebar">
<div id="recent-posts-3" class="widget widget_recent_entries"> <h2 class="widget-title">Recent Posts</h2> <ul>
<li>
<a href="http://developersarena.com/web/2019/09/danville-metropolis-council-works-with-casino-12/">Danville Metropolis Council Works with Casino Legalization Effort</a>
</li>
<li>
<a href="http://developersarena.com/web/2019/09/sign-up-for-the-actual-sat-knowing-you-re-in-a-5/">Sign up for the actual SAT knowing you’re in a position to register for taking the test.</a>
</li>
<li>
<a href="http://developersarena.com/web/2019/09/coming-to-america-our-best-pupil-podcasts-around-3/">Coming To America: Our Best Pupil Podcasts Around Immigration</a>
</li>
<li>
<a href="http://developersarena.com/web/2019/09/fine-martial-arts-styles-portfolio-suggestions-11/">Fine Martial arts styles Portfolio Suggestions Applicants may perhaps submit their very own portfolio 1 of 2 ways</a>
</li>
<li>
<a href="http://developersarena.com/web/2019/09/when-must-my-scholar-take-the-posed/">When Must My Scholar Take the POSED?</a>
</li>
</ul>
<div class="clear"></div></div><div id="search-3" class="widget widget_search"><form role="search" method="get" id="searchform" class="searchform" action="http://developersarena.com/">
<div>
<label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form><div class="clear"></div></div> </div><!--#primary-sidebar-->
<div id="secondary-sidebar">
<div id="categories-3" class="widget widget_categories"><h2 class="widget-title">Categories</h2> <ul>
<li class="cat-item-none">No categories</li> </ul>
<div class="clear"></div></div><div id="tag_cloud-3" class="widget widget_tag_cloud"><h2 class="widget-title">Tags</h2><div class="tagcloud"></div>
<div class="clear"></div></div><div id="recent-comments-3" class="widget widget_recent_comments"><h2 class="widget-title">Recent Comments</h2><ul id="recentcomments"></ul><div class="clear"></div></div> </div><!--#secondary-sidebar-->
<div class="clear"></div>
</div><!--#sidebar--> <div class="clear"></div>
</div><!-- .wrapper -->
</div><!-- #main -->
<hr class="lofi" />
<div id="footer" class="section">
<div class="wrapper">
<p id="generator-link">Proudly powered by <a href="http://wordpress.org/" rel="generator">WordPress</a> and <a href="http://carringtontheme.com" title="Carrington theme for WordPress">Carrington</a>.</p>
<p id="developer-link"><a href="http://crowdfavorite.com" title="Custom WordPress development, design and backup services." rel="developer designer">Carrington Theme by Crowd Favorite</a></p>
</div><!--.wrapper-->
</div><!--#footer -->
</div><!--#page-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-19328731-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>