jQuery Plugin To Create A Responsive Portfolio Web Page - Portfolio

Portfolio is a simple, easy, cross-browser jQuery plugin to create a fully responsive portfolio website with animated image hover captions. When you click on a thumbnail, the plugin will slide out a closable box containing more details at the bottom of the thumbnail.

How to use it:

1. Include the jQuery library and jQuery portfolio plugin's javascript and CSS files in the Html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="portfolio.jquery.js"></script>

2. Create the Html for the thumbnails with image captions in the document.

<ul class="thumbs">

<li><a href="#content1" class="thumbnail" style="background-image: url('images/1.jpg')">
<h4>Category 1</h4>
<span class="description"> Description 1 </a> </li>

<li><a href="#content2" class="thumbnail" style="background-image: url('images/2.jpg')">
<h4>Category 2</h4>
<span class="description"> Description 2 </a> </li>

<li><a href="#content3" class="thumbnail" style="background-image: url('images/3.jpg')">
<h4>Category 3</h4>
<span class="description"> Description 3 </a> </li>

</ul>

3. Create the Html for the portfolio contents.

<div class="portfolio-content">

<div id="content1">
<div class="media"><img src="images/1.jpg"/></div>
<h3> Title 1 </h3>
<p> More content </p>
<a href="#" class="btn btn-primary">Link 1 </a> </div>

<div id="content2">
<div class="media"><img src="images/2.jpg"/></div>
<h3> Title 2 </h3>
<p> More content </p>
<a href="#" class="btn btn-primary">Link 2 </a> </div>

<div id="content3">
<div class="media"><img src="images/3.jpg"/></div>
<h3> Title 3 </h3>
<p> More content </p>
<a href="#" class="btn btn-primary">Link 3 </a> </div>

</div>

4. Call the plugin with options.

<script>
$(document).ready(function() {
$('.thumbs').portfolio({
cols: 4 // Number of columns you want your thumbnails to take. This is 3 by default
transition: 'slideDown' // What jQuery transition effect you want. This is slideDown by default
});
});
</script>

Change log:

2014-05-01

• fixed responsiveness onresize, added styles, and cleaned code

---

This awesome jQuery plugin is developed by arsenetoumani. For more Advanced Usages, please check the demo page or visit the official website.