Portfolio masonry gallery


Unlike the other themes masonry galleries we created simple way to dynamically change content. By manipulating href attributes you can distinguish which content should appear. We will cover in this section how to change categories, load next page and customize portfolio java scripts.

Basic markup for portfolio looks like this:

<div class="pt-page" id="portfolio-section">
	<div class="back-button hidden-xs">
		<a href="index.php" class="back">
			<i class="fa"></i>
		</a>
	</div>
	
	<div id="portfolio" class="page-content">
		<ul class="portfolio-list">
			<li><a href="portfolio-content/portfolio_more_1" class="portfolio-select portfolio-selected">all</a></li>
			<li><a href="portfolio-content/portfolio_more_2" class="portfolio-select">illustration</a></li>
			<li><a href="portfolio-content/portfolio_more_3" class="portfolio-select">web</a></li>
			<li><a href="portfolio-content/portfolio_more_1" class="portfolio-select">photo</a></li>
		</ul>
		
		<div id="basic" class="masonry-container">
			// portfolio ajax loaded content
		</div>

		<div class="portfolio-more-content hidden"></div>
	</div>
</div>

<div class="portfolio-overlay">

</div>

As you can see in .portfolio-list, we provided urls with content files (there should be no extension, files are .php and js takes care of it). First category will be loaded automatically after entering portfolio section (it's our step to optimize user experience by reducing required bandwidth to only visited sections).

<a href="portfolio-content/single_1" class="hover-portfolio mosaic open-portfolio">
	<i class="fa icon-refresh icon-spin"></i>
	<figure style="background-image: url(img/img-280x195/14.jpg)">
	</figure>
	<div class="description hidden-xs"><span>This is our portfolio</span></div>
</a>

<a href="portfolio-content/portfolio_more_2" class="hover-portfolio mosaic show-more">
	<div class="show-button"></div>
</a>

<a href="#" class="show-more mosaic portfolio-show-more-container">
	<div class="show-button" id="portfolio-show-more">
	</div>
</a>

This is example of single portfolio element in masonry, load more button and required hidden container. You can change columns and row count in main.js.

var portfolio = {
	options : {
		portfolioColumns : 6,
		portfolioRows : 4,
		portfolioMobileColumns : 4,
		container : '.masonry-container'
	},

Our goal was to create fullscreen portfolio without any scrolling mechanism. Please set your portfolioColumns and portfolioRows according to your elements real count. We do not support scrolling in portfolio section.

Single portfolio post

You can open portfolio overlay in every place you want. Just add open-portfolio class to an <a> element and give it proper href. Just like this:

<a class="open-portfolio" href="your_portfolio_content.php">your link name</a>