The portfolio section is sortable, which means visitors can filter your work by what they are interested in. Also, when you hover over an image, there’s an indicator, letting you know you can see a larger view.
Portfolio navigation
<ul class="nav nav-pills">
<li class="filter" data-filter="all"><a href="#noAction">All</a></li>
<li class="filter" data-filter="web"><a href="#noAction">Web</a></li>
<li class="filter" data-filter="photo"><a href="#noAction">Photo</a></li>
<li class="filter" data-filter="identity"><a href="#noAction">Identity</a></li>
</ul>
Each filter item requires the attribute data-filter containing a CSS selector of the elements you wish to show which is typically the class name of that category (eg. data‑filter="photo").
The data-filter attribute also accepts the values
all.
Portfolio items
You want to change the title and description for portfolio item and image, find code like this in HTML file:
<li class="span4 mix photo">
<div class="thumbnail">
<img src="images/Portfolio05.png" alt="project 5">
<a href="#single-project" class="show_hide more" rel="#slidingDiv"><i class="icon-plus"></i></a>
<h3>Thumbnail label</h3>
<p>Thumbnail caption...</p>
<div class="mask"></div>
</div>
</li>
li element must contain class attribute with
mix and the name of the appropriate data-filter from portfolio navigation. To connect portfolio item with portfolio details item set rel attribute in <a> tag with the id of portfolio detail with #.
Single portfolio item details
Click on portfolio item will be open details for the project. All detail items are placed in:
<div id="single-project"></div>
Html code for portfolio details are like this:
<div id="slidingDiv" class="toggleDiv row-fluid single-project">
<div class="span6">
<img src="images/Portfolio01.png" alt="project 1" />
</div>
<div class="span6">
<div class="project-description">
<div class="project-title clearfix">
<h3>Webste for Some Client</h3>
<span class="show_hide close">
<i class="icon-cancel"></i>
</span>
</div>
<div class="project-info">
<div><span>Client</span>Some Client Name</div>
<div><span>Date</span>July 2013</div>
<div><span>Skills</span>HTML5, CSS3, JavaScript</div>
<div><span>Link</span>http://examplecomp.com</div>
</div>
<p>Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.</p>
</div>
</div>
</div>
