Mega Portfolio Gallery With jQuery Plugin

What is it?

Megafolio is a highly customizable jQuery Plugin to present your Gallery or Portfolio. It uses the power of jQuery to present your pics in a grid layout with a masonry effect (custom width or 100% width responsive). The detail lightbox shows the elements in original size(or a video) and gives your viewers the chance to use the usual social buttons and read a describing text.

Example Portfolio Gallery, Klik Here,,

Active Coding!

<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>

<!-- CSS STYLE -->
<link rel="stylesheet" type="text/css" href="http://www.themepunch.com/codecanyon/megafolio/css/style-full.css" media="screen" />

<link rel="stylesheet" type="text/css" href="http://www.themepunch.com/codecanyon/megafolio/megafolio/css/settings-full.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://www.themepunch.com/codecanyon/megafolio/megafolio/css/lightbox-full.css" media="screen" />

<!-- jQuery PORTFOLIO   -->
<script type="text/javascript" src="http://www.themepunch.com/codecanyon/megafolio/megafolio/js/jquery.themepunch.megafolio.js"></script>
<script type="text/javascript" src="http://www.themepunch.com/codecanyon/megafolio/megafolio/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="http://www.themepunch.com/codecanyon/megafolio/megafolio/flowplayer_plugins/flowplayer-3.2.6.min.js"></script>
       
<!-- FONT IMPORT -->
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700' rel='stylesheet' type='text/css'/>

<div id="main-background">
<div class="bg-tiled fadein" data-category="catall" data-src="http://www.themepunch.com/codecanyon/megafolio/images/bg/tile1.jpg"></div>
<div class="bg-tiled fadein" data-category="cata" data-src="http://www.themepunch.com/codecanyon/megafolio/images/bg/tile2.jpg"></div>
<div class="bg-fit-outside fadein" data-category="catb" data-src="http://www.themepunch.com/codecanyon/megafolio/images/bg/bg2.jpg"></div>
<div class="bg-fit-outside fadein" data-category="catc" data-src="http://www.themepunch.com/codecanyon/megafolio/images/bg/bg4.jpg"></div>
</div>

<!-- CONTENT & EXAMPLES -->
<div id="content_wrap" style="z-index:100">

<!-- THE SELECTED FILTER -->
<h3><div id="selected-filter-title" class="fullwidth">All Categories</div></h3>
<div class="example-wrapper">
<!-- THE FILTER BUTTON -->
<div id="portfolio-filter" class="filter-fullwidth dropdown">
<div class="buttonlight"><span class="category">Category Selection</span></div>
<ul>
<li data-category="catall">All Categories</li>
<li data-category="cata">Category One</li>
<li data-category="catb">Category Two</li>
<li data-category="catc">Category Three</li>
</ul>
</div>

<!-- THE PORTFOLIO GRID ITSELF -->
<div id="products" class="tp-portfolio">

<!-- ENTRY 1 -->
<div class="cell2x1 catb catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb1.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb1_bw.jpg"></div>
<div class="caption">Hipp Hopp Girl</div>   
<a href="http://ut2a-4down.blogspot.com/" class="blog-link"></a>
<div class="entry-info">                       
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large1.jpg"></div>
<div class="entry-title">Category One - Hipp Hopp Girl</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>

<!-- ENTRY 2 -->
<div class="cell1x2 cata catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb2.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb2_bw.jpg"></div>
<div class="caption">Cool Dude Doing Cool Stuff</div>
<a href="http://ut2a-4down.blogspot.com/" class="blog-link"></a>
<div class="entry-info">
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large2.jpg"></div>
<div class="entry-title">Category One - Cool Dude Doing Cool Stuff</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>                                        </div>

<!-- ENTRY 3 -->
<div class="cell2x2 cata catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb3.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb3_bw.jpg"></div>
<div class="caption">Guy In White</div>
<a href="http://ut2a-4down.blogspot.com/" class="blog-link"></a>
<div class="entry-info">
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large3.jpg"></div>
<div class="entry-title">Category One - Guy In White</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>                                        </div>

<!-- ENTRY 4 -->
<div class="cell1x1 catb catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb4.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb4_bw.jpg"></div>
<div class="caption">Green Hoddie</div>
<a href="http://ut2a-4down.blogspot.com/" class="blog-link"></a>
<div class="entry-info">
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large4.jpg"></div>
<div class="entry-title">Category Two - Green Hoddie</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>                                        </div>

<!-- ENTRY 5 -->
<div class="cell1x2 catc catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb5.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb5_bw.jpg"></div>
<div class="caption">Red Haired Dancer</div>   
<a href="http://ut2a-4down.blogspot.com/" class="blog-link"></a>
<div class="entry-info">
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large5.jpg"></div>
<div class="entry-title">Category Three - Red Haired Dancer</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>

<!-- ENTRY 6 -->
<div class="cell1x1 cata catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb11.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb11_bw.jpg"></div>
<div class="caption">Beat This</div>
<div class="entry-info">
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large11.jpg"></div>
<div class="entry-title">Category One - Beat This</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>

<!-- ENTRY 7 -->
<div class="cell2x1 catb catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb6.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb6_bw.jpg"></div>
<div class="caption">Get A Move On</div>
<a href="http://ut2a-4down.blogspot.com/" class="blog-link"></a>
<div class="entry-info">
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large6.jpg"></div>
<div class="entry-title">Category Two - Get A Move On</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>

<!-- ENTRY 8 -->
<div class="cell1x1 catc catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb7.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb7_bw.jpg"></div>
<div class="caption blue">Vimeo Video</div>   
<a href="http://ut2a-4down.blogspot.com/" class="blog-link"></a>
<div class="entry-info">
<div class="media" data-typ="video" data-width="720"  data-height="408" data-src='<iframe class="video_clip" src="http://player.vimeo.com/video/24456787?title=0&amp;byline=0&amp;portrait=0" width="720" height="408" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>'></div>
<div class="entry-title">Category Three - Vimeo Video</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>

<!-- ENTRY 9 -->
<div class="cell2x2 cata catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb8.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb8_bw.jpg"></div>
<div class="caption red">Local FLV Video</div>   
<a href="http://ut2a-4down.blogspot.com/" class="blog-link"></a>
<div class="entry-info">
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large8.jpg"></div>
<div class="entry-title">Category One - Jeans Style Girl</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
<div class="entry-info">                       
<div class="media" data-typ="video" data-flv="true" data-width="640" data-height="360" data-flvplayer="http://www.themepunch.com/codecanyon/megafolio/megafolio/flowplayer_plugins/flowplayer-3.2.7.swf" data-src='<a href="http://www.themepunch.com/valiano/wp-content/uploads/2012/03/purpleparty.flv" style="display:block;width:640px;height:360px" id="individuellid-1"></a>'></div>
<div class="entry-title">FLV Video<br/><span style='font-size:11px;color:#bbb;'>Lorem Ipsum</span></div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>

<!-- ENTRY 10 -->
<div class="cell1x2 catb catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb9.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb9_bw.jpg"></div>
<div class="caption red">Youtube Video</div>
<a href="http://ut2a-4down.blogspot.com/" class="blog-link"></a>
<div class="entry-info">
<div class="media" data-typ="video" data-width="720"  data-height="408" data-src='<iframe class="video_clip" src="http://www.youtube.com/embed/kjX-8kQmakk?hd=1&amp;wmode=opaque&amp;autohide=1&amp;showinfo=0" height="408" width="720" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>'></div>
<div class="entry-title">Category Two - Youtube Video</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>

<!-- ENTRY 11 -->
<div class="cell2x1 catb catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb10.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb10_bw.jpg"></div>
<div class="caption">Golden Shoes</div>
<div class="entry-info">
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large10.jpg"></div>
<div class="entry-title">Category Two - Golden Shoes</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>

<!-- ENTRY 12 -->
<div class="cell1x2 cata catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb14.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb14_bw.jpg"></div>
<div class="caption">Envato Bro's</div>
<div class="entry-info">
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large14.jpg"></div>
<div class="entry-title">Category One - Envato Bro's</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>

<!-- ENTRY 13 -->
<div class="cell2x1 cata catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb13.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb13_bw.jpg"></div>
<div class="caption">Sideways</div>
<div class="entry-info">
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large13.jpg"></div>
<div class="entry-title">Category One - Sideways</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>

<!-- ENTRY 14 -->
<div class="cell1x2 cata catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb12.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb12_bw.jpg"></div>
<div class="caption">Fit Girl</div>
<div class="entry-info">
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large12.jpg"></div>
<div class="entry-title">Category One - Fit Girl</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>

<!-- ENTRY 15 -->
<div class="cell1x1 cata catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb15.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb15_bw.jpg"></div>
<div class="caption">Acrobatics Dude</div>
<div class="entry-info">
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large15.jpg"></div>
<div class="entry-title">Category One - Acrobatics Dude</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>

<!-- ENTRY 16 -->
<div class="cell1x1 cata catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb15.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb15_bw.jpg"></div>
<div class="caption">Acrobatics Dude</div>
<div class="entry-info">
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large15.jpg"></div>
<div class="entry-title">Category One - Acrobatics Dude</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>

<!-- ENTRY 17 -->
<div class="cell1x2 cata catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb12.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb12_bw.jpg"></div>
<div class="caption">Fit Girl</div>
<div class="entry-info">
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large12.jpg"></div>
<div class="entry-title">Category One - Fit Girl</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>

<!-- ENTRY 18 -->
<div class="cell2x1 cata catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb13.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb13_bw.jpg"></div>
<div class="caption">Sideways</div>
<div class="entry-info">
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large13.jpg"></div>
<div class="entry-title">Category One - Sideways</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>

<!-- ENTRY 19 -->
<div class="cell1x2 cata catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb14.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb14_bw.jpg"></div>
<div class="caption">Envato Bro's</div>
<div class="entry-info">
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large14.jpg"></div>
<div class="entry-title">Category One - Envato Bro's</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>

<!-- ENTRY 20 -->
<div class="cell2x1 catb catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb10.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb10_bw.jpg"></div>
<div class="caption">Golden Shoes</div>
<div class="entry-info">
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large10.jpg"></div>
<div class="entry-title">Category Two - Golden Shoes</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>

<!-- ENTRY 21 -->
<div class="cell1x2 catb catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb9.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb9_bw.jpg"></div>
<div class="caption red">Youtube Video</div>   
<a href="http://ut2a-4down.blogspot.com/" class="blog-link"></a>
<div class="entry-info">
<div class="media" data-typ="video" data-width="720"  data-height="408" data-src='<iframe class="video_clip" src="http://www.youtube.com/embed/kjX-8kQmakk?hd=1&amp;wmode=opaque&amp;autohide=1&amp;showinfo=0" height="408" width="720" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>'></div>
<div class="entry-title">Category Two - Youtube Video</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>

<!-- ENTRY 22 -->
<div class="cell2x2 cata catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb8.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb8_bw.jpg"></div>
<div class="caption">Jeans Style Girl</div>   
<a href="http://ut2a-4down.blogspot.com/" class="blog-link"></a>
<div class="entry-info">
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large8.jpg"></div>
<div class="entry-title">Category One - Jeans Style Girl</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>

<!-- ENTRY 23 -->
<div class="cell1x1 catc catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb7.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb7_bw.jpg"></div>
<div class="caption blue">Vimeo Video</div>   
<a href="http://ut2a-4down.blogspot.com/" class="blog-link"></a>
<div class="entry-info">
<div class="media" data-typ="video" data-width="720"  data-height="408" data-src='<iframe class="video_clip" src="http://player.vimeo.com/video/24456787?title=0&amp;byline=0&amp;portrait=0" width="720" height="408" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>'></div>
<div class="entry-title">Category Three - Vimeo Video</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>

<!-- ENTRY 24 -->
<div class="cell2x1 catb catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb6.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb6_bw.jpg"></div>
<div class="caption">Get A Move On</div>
<a href="http://ut2a-4down.blogspot.com/" class="blog-link"></a>
<div class="entry-info">
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large6.jpg"></div>
<div class="entry-title">Category Two - Get A Move On</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>

<!-- ENTRY 25 -->
<div class="cell1x1 cata catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb11.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb11_bw.jpg"></div>
<div class="caption">Beat This</div>
<div class="entry-info">
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large11.jpg"></div>
<div class="entry-title">Category One - Beat This</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>
                       
<!-- ENTRY 26 -->
<div class="cell1x2 catc catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb5.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb5_bw.jpg"></div>
<div class="caption">Red Haired Dancer</div>   
<a href="http://ut2a-4down.blogspot.com/" class="blog-link"></a>
<div class="entry-info">
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large5.jpg"></div>
<div class="entry-title">Category Three - Red Haired Dancer</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>
                       
<!-- ENTRY 27 -->
<div class="cell1x1 catb catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb4.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb4_bw.jpg"></div>
<div class="caption">Green Hoddie</div>
<a href="http://ut2a-4down.blogspot.com/" class="blog-link"></a>
<div class="entry-info">
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large4.jpg"></div>
<div class="entry-title">Category Two - Green Hoddie</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>

<!-- ENTRY 28 -->
<div class="cell2x2 cata catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb3.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb3_bw.jpg"></div>
<div class="caption">Guy In White</div>
<a href="http://ut2a-4down.blogspot.com/" class="blog-link"></a>
<div class="entry-info">
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large3.jpg"></div>
<div class="entry-title">Category One - Guy In White</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>

<!-- ENTRY 29 -->
<div class="cell1x2 cata catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb2.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb2_bw.jpg"></div>
<div class="caption">Cool Dude Doing Cool Stuff</div>
<a href="#" class="blog-link"></a>
<div class="entry-info">
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large2.jpg"></div>
<div class="entry-title">Category One - Cool Dude Doing Cool Stuff</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>

<!-- ENTRY 30 -->
<div class="cell2x1 catb catall">
<div class="thumbnails" data-mainthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb1.jpg" data-bwthumb="http://www.themepunch.com/codecanyon/megafolio/images/thumbs_dark/thumb1_bw.jpg"></div>
<div class="caption">Hip Hop Girl In Purple</div>   
<a href="http://ut2a-4down.blogspot.com/" class="blog-link"></a>
<div class="entry-info">
<div class="media" data-src="http://www.themepunch.com/codecanyon/megafolio/images/large_dark/large1.jpg"></div>
<div class="entry-title">Category Two - Hip Hop Girl In Purple</div>
<div class="entry-description">Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
</div>
</div>

</div>
</div>    <!-- EXAMPLE WRAP END -->

</div>    <!-- CONTENT WRAP END -->

<!-- ACTIVATE THE BANNER HERE -->
<script type="text/javascript">
jQuery.fn.css = jQuery.fn.cssOriginal;
$(document).ready(function() {
$.noConflict();

<!-- PORTFOLIO -->
jQuery('#products').portfolio({   

<!-- GRID SETTINGS -->
gridOffset:90, <!-- Manual Right Padding Offset for 100% Width -->
cellWidth:176, <!-- The Width of one CELL in PX-->
cellHeight:176,    <!-- The Height of one CELL in PX-->
cellPadding:10,    <!-- Spaces Between the CELLS -->
entryProPage:16, <!-- The Max. Amount of the Entries per Page Pagination -->
captionOpacity:100, <!-- Opacity of Caption -->
captionPosition:"bottom",
captionYOffset:-20,

<!-- FILTERING -->
filterList:"#portfolio-filter",    <!-- Which Filter is used for the Filtering / Pagination -->
title:"#selected-filter-title",    <!-- Which Div should be used for showing the Selected Title of the Filter -->
<!-- Page x from All Pages -->
pageOfFormat:"Page #n of #m", <!-- The #n will be replaced with the actual Item Nr., #m will be replaced with the amount of all items in the filtered Gallery-->

<!-- Social Settings-->
showGoogle:"yes", <!-- Show The Social Buttons ...-->
showFB:"yes",
showTwitter:"yes",
showEmail:"yes", <!-- ADD EMAIL TO LINK ALSO TO THE LIGHTBOX  -->
emailLinkText:"Email to Friend",
emailBody:"mailto:email@echoecho.com?body=I found some great File here #url", <!-- The #url will be replaced with the url of the image -->
emailUrlCustomPrefix:"http://ut2a-4down.blogspot.com/", <!-- Use this if you wish a Custom Prefix to Link Path -->                       
emailUrlCustomSuffix:"?ref=...", <!-- Use This if you wish to use a Custtom Suffix for Link Path -->

urlDivider:"?",    <!-- What is the Divider in the Url to add the Variables, Filter and Image ID . Impotant for WordPress i.e. Social will share this link with this divider -->

<!-- BACKGROUND -->
backgroundHolder:"#main-background",
backgroundSlideshow:0
})

});
</script>

Coming Soon!
Please rate this article: