Portfolio

Portfolio Layouts#

Mamo comes with 6 cool portfolio layouts to cover all the needs.

• Slideshow - You can find the demo here.
• Fullscreen - You can find the demo here.
• Grid - You can find the demo here.
• Masonry - You can find the demo here.
• Creative - You can find the demo here.
• Carousel - You can find the demo here.

"scroll-out.min.js" is required for projects reveal effect on scroll (Scrollout is required anyway in all pages because many default effects rely on it, Just make sure not to remove it).

"Grid" and "Masonry" portfolio layouts require "imagesloaded.pkgd.min.js", "isotope.pkgd.min.js" & "isotope.min.js". Include the scripts before "scripts.min.js" at the bottom of the page body, "imagesloaded.pkgd.min.js" goes first then "isotope.pkgd.min.js" then "isotope.min.js".

Portfolio Filtering#

The "Grid" and "Masonry" portfolio layouts can have filtering capability using Isotope (Check Isotope documentation for more info).

...
<div class="pth-projects pth-projects--grid">
	<div class="pth-projects__filters">
		<ul class="pth-projects__filters-list">
			<li class="pth-projects__filter pth-current" data-filter="*"><a href="#">All</a></li>
			<li class="pth-projects__filter" data-filter=".pth-filter--photography"><a href="#">Photography</a></li>
			<li class="pth-projects__filter" data-filter=".pth-filter--web"><a href="#">Web</a></li>
			<li class="pth-projects__filter" data-filter=".pth-filter--ux"><a href="#">UX</a></li>
		</ul>
	</div>

	<div class="pth-projects__inner">
		...
	</div>
</div>
...

Every filter has data-filter attribute containes the class that should be filtered, .pth-filter--photography for example. When the filter clicked, it shows only the portfolio items that has this class. Notice that a single portfolio item may have multiple filtering classes.

...
<div class="pth-projects pth-projects--grid">
	<div class="pth-projects__filters">
		...
	</div>

	<div class="pth-projects__inner">
		<article class="pth-project pth-filter--photography">
			...
		</article>

		<article class="pth-project pth-filter--web">
			...
		</article>

		<article class="pth-project pth-filter--web pth-filter--ux">
			...
		</article>

		<article class="pth-project pth-filter--photography">
			...
		</article>

		<article class="pth-project pth-filter--web pth-filter--ux">
			...
		</article>
	</div>
</div>
...

Portfolio Pagination#

The "Grid" and "Masonry" portfolio layouts can have ajax pagination or "load more" buttom. You can find a demo for the pagination in portfolio-pagination.html for your reference.

...
<div class="pth-projects pth-projects--grid">
	<div class="pth-projects__filters">
		...
	</div>

	<div class="pth-projects__inner">
		...
	</div>

	<div class="pth-pagination">
		<a href="portfolio-pagination-2.html" class="pth-pagination__more" data-next="2" data-max="2">
			<span>Load More</span>
			<span>Loading</span>
		</a>
	</div>
</div>
...

There are a couple of "data" attributes that define the settings of the button, let's break them down:

• data-next - Defines the index of next page.
• data-max - Defines the total number of paginated pages.

These data used to identify when the pagination reaches the end to hide the "more" button.