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!

Really nice image jQuery Zoom plugin with the following features: click on plus and minus to zoom, drag the slider to zoom Zoom using mousewheel hover the image, Moving mouse hover the image change the pan, Click on the image to show in lightbox style...
Demo sobat lihat disini...

CSS::

/* Component containers
----------------------------------*/
.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 11px; }
.ui-widget-content { border: 1px solid #bbb;background:#ffffff url(http://lab.gianiaz.com/jquery/gzoom/images/ui/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;}
/* Interaction states
----------------------------------*/
.ui-widget-content .ui-state-default { border: 1px solid #d3d3d3; background: #a59a8d url(http://lab.gianiaz.com/jquery/gzoom/images/ui/ui-bg_glass_75_a59a8d_1x400.png) 50% 50% repeat-x;}
.ui-widget-content .ui-state-hover { border: 1px solid #999999; background: #dadada url(http://lab.gianiaz.com/jquery/gzoom/images/ui/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x;}
/* Icons
----------------------------------*/
.ui-icon { width: 16px; height: 16px; background-image: url(http://lab.gianiaz.com/jquery/gzoom/images/ui/ui-icons_222222_256x240.png); }
/* positioning */
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
/* Slider
----------------------------------*/
.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }


/* MiniZoomPan styles */
.gzoomwrap {
  float:left;
  margin:0 10px 0 0;
}
.minizoompan {
  background: #fff;
  position: relative; /* always set to relative or offset() won't work */
border: 1px solid lightgray;
  padding: 0;
  margin: 0;
}

.minizoompan span.loader { /* the loader label*/
  position:absolute;
  left:0;
  top:0;
  z-index: 1;
  display: none;
  color:#000;
  background:none;
  font: normal 11px Arial, Verdana;
  padding: 3px;
}
.minizoompan .zoomIcon { /* the zoom icon */
  position:absolute;
  cursor:pointer;
  left:0;
  top:0;
  z-index: 1;
  display: none;
}

.gzoombutton {
  float:left;
  cursor:pointer;
}
.gzoomSlider {
  float:left;
  margin:3px 5px 0 5px;
}

#gzoomoverlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    height: 500px;
}
#gzoomlbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    text-align: center;
    line-height: 0;
}
#gzoomlbox a img {
  border: none;
}
#imagebox {
    position: relative;
    background-color: #fff;
    width: 250px;
    height: 250px;
    margin: 0 auto;
}
#gzoom-cont-img { padding: 10px; }

#lboximgdatacontainer {
    font: 10px Verdana, Helvetica, sans-serif;
    background-color: #fff;
    margin: 0 auto;
    line-height: 1.4em;
    overflow: auto;
    width: 100%;
    padding: 0 10px 0;
    padding: 0 10px 10px 10px;
    color:#666;
}
#gzoomloading {display:inline;background:url(http://lab.gianiaz.com/jquery/gzoom/images/loading.gif) no-repeat;
    position: absolute;
    top:50%;
    left:50%;right:50%;
    height: 25%;
    width: 100%;
    text-align: center;
    line-height: 0;
}

#lboximgdatacontainer #gzoomlbox-image-details { width:70%; float:left;text-align:left; }
#gzoom-image-caption {font-weight:bold;}
.zoomIcon {width:40px;height:40px;position:absolute;top:0;right:0;}

SCRIPT::

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>

<script type="text/javascript" src="http://lab.gianiaz.com/jquery/gzoom/jquery/ui.core.min.js"></script>
<script type="text/javascript" src="http://lab.gianiaz.com/jquery/gzoom/jquery/ui.slider.min.js"></script>
<script type="text/javascript" src="http://lab.gianiaz.com/jquery/gzoom/jquery/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://lab.gianiaz.com/jquery/gzoom/jquery/jquery.gzoom.js"></script>

HTML for Excample 1

<div id="zoomligaka" class="zoom">
<img height='325' src="url-image.jpg" alt="zoomligaka" width='400' title="Beautiful Girl and Orchid - 2013 &copy; akaUTta" />
</div>
<script type= "text/javascript">
/*<![CDATA[*/
$(function() {
$("#zoomligaka").gzoom({
sW: 400,
sH: 325,
lW: 1024,
lH: 768,
lightbox: true,
zoomIcon: 'http://www.matalaaerationproducts.com/images/zoom-icon.png'
});});
/*]]>*/
</script>

HTML for Excample 2

<div class="zoomligaka1">
<img height='400' src="url-image.jpg" width='300' alt="zoomligaka" title="Beautiful Girl - Hair Orange Piercing - 2013 &copy; akaUTta" />
</div>
<script type= "text/javascript">
/*<![CDATA[*/
$(function() {
$(".zoomligaka1").gzoom({
sW: 300,
sH: 400,
lW: 1024,
lH: 768,
lightbox: true
});});
/*]]>*/
</script>

Ability to zoom in and drag or scroll the image within the same window This plugin has been tested in ie7+ , safari 4+, chrome 9+, firefox 3.6+, opera 10+.

CSS::

<style type="text/css">
.boxgalleryaka{float:left;width:100%;display:block;}
.boxgalleryaka ul{margin:0;padding:0;list-style-type:none;}
.boxgalleryaka li{float:left;margin-left:0;}
.boxgalleryaka li img{width:180px;height:130px;border:1px solid #eee;}
</style>

<link href="http://www.pirolab.it/pirobox_v_1_2/css_pirobox/style_3/style.css" rel="stylesheet" type="text/css"/>

SCRIPT::

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

<script type="text/javascript" src="http://www.pirolab.it/pirobox_v_1_2/js/pirobox_extended_def_08_2011.js"></script>
<script type="text/javascript" src="http://www.pirolab.it/pirobox_v_1_2/js/jquery_ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.pirobox_ext({
piro_speed : 650,
zoom_mode : true,
move_mode : 'mousemove',
bg_alpha : 0.5,
piro_scroll : true,
share: true
});
//$('#try_it').click()
});
</script>

Images Gallery

HTML::

<div class="boxgalleryaka">
<ul>
<li><a href="url-image.jpg" media="gallery" id="tre" class="pirobox_gall" title="Your descrizione immagine.">
<img title="Click for Original Image" src="url-image.jpg"/></a></li>

<li><a href="url-image.jpg" media="gallery" class="pirobox_gall" title="Your descrizione immagine.">
<img title="Click for Original Image" src="url-image.jpg"/></a></li>

<li><a href="url-image.jpg" media="gallery" class="pirobox_gall" title="Your descrizione immagine.">
<img title="Click for Original Image" src="url-image.jpg"/></a></li>

<li><a href="url-image.jpg" media="gallery" class="pirobox_gall" title="Your descrizione immagine.">
<img title="Click for Original Image" src="url-image.jpg"/></a></li>
</ul>
</div>

=================================================================================

Single image

HTML::

<div class="boxgalleryaka">
<a href="url-image.jpg" media="single"  class="pirobox" title="Your descrizione immagine.">
<img title="Click for Original Image" src="url-image.jpg"/></a>
</div>