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!

In this tutorial we are going to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse. When a thumbnail is clicked, it moves to the center of the page and the full screen image is loaded in the background. Now the user can move up and down and the image will get scrolled automatically, giving him the opportunity to see all of the image.

We will use some CSS3 Webkit properties to enhance the look and jQuery for the functionality.
That’s why the demo is best viewed in Webkit browsers like Google Chrome or Apple Safari.

We will be using the awesome jQuery thumbnail scroller by Malihu. Big thanks to him for this great and smooth script!

Again, we will be showing some amazing photography by Mark Sebastian. Please visit his Flickr page or his homepage for more information on his work. The images that we will be using are from “The IT Factor” photo set on Flickr.

So, let’s begin!

Example Image Gallery Full Page Klik here,,,

CSS::

<style>
*{
    margin:0;
    padding:0;
}
body {
    background:#212121;
    overflow:hidden;
    font-family:Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    color:#fff;
    font-size:10px;
}
#outer_container{
    position:fixed;
    bottom:-160px;    /*-160px to hide*/
    margin:0px 0px 30px 0px;
    height:130px;
    padding:0;
    -webkit-box-reflect:
        below 5px -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(transparent),
            color-stop(0.6, transparent),
            to(rgb(18, 18, 18))
        );
}
#thumbScroller{
    position:relative;
    overflow:hidden;
}
#thumbScroller .container{
    position:relative;
    left:0;
}
#thumbScroller .content{
    float:left;
}
#thumbScroller .content div{
    margin:2px;
    height:100%;
}
#thumbScroller img,
img.clone{
    border:5px solid #fff;
    height:120px;
}
#thumbScroller a{
    padding:2px;
    outline:none;
}
.fp_overlay{
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-TF_hDOQGE7Atw0Lf-imSTxdLiInhyn_uKIKnsdpUtTIhQwtlHER7fUTG5QN15dhAMKuGNmZyf_wy9ezC9wXQx2J5xhSh5UsEzI_mB_JM-UaGONkx7bzYe2eyg-DA4NquqzZz6y6b36A/s1600/overlay.png);
}
.fp_loading{
    display:none;
    position:fixed;
    top:50%;
    left:50%;
    margin:-35px 0px 0px -35px;
    background:#000 url(http://tympanus.net/Tutorials/FullPageImageGallery/images/icons/loader.gif) no-repeat center center;
    width:70px;
    height:70px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    z-index:999;
    opacity:0.7;
}
.fp_next,
.fp_prev{
    width:50px;
    height:50px;
    position:fixed;
    top:50%;
    margin-top:-15px;
    cursor:pointer;
    opacity:0.5;
}
.fp_next:hover,
.fp_prev:hover{
    opacity:0.9;
}
.fp_next{
    background:#000 url(http://tympanus.net/Tutorials/FullPageImageGallery/images/icons/next.png) no-repeat center center;
    right:-50px;
}
.fp_prev{
    background:#000 url(http://tympanus.net/Tutorials/FullPageImageGallery/images/icons/prev.png) no-repeat center center;
    left:-50px;
}
.fp_thumbtoggle{
    height:50px;
    background:#000;
    width:200px;
    text-align:center;
    letter-spacing:1px;
    text-shadow:1px 1px 1px #000;
    position:fixed;
    left:50%;
    margin-left:-100px;
    bottom:-50px;
    line-height:50px;
    cursor:pointer;
    opacity:0.8;
}
.fp_thumbtoggle:hover{
    opacity:1.0;
}
img.fp_preview{
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
}
</style>

SCRIPT::

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

<script type="text/javascript" src="http://tympanus.net/Tutorials/FullPageImageGallery/jquery.easing.1.3.js"></script>

<script type="text/javascript">
            $(window).load(function() {
                sliderLeft=$('#thumbScroller .container').position().left;
                padding=$('#outer_container').css('paddingRight').replace("px", "");
                sliderWidth=$(window).width()-padding;
                $('#thumbScroller').css('width',sliderWidth);
                var totalContent=0;
                $('#thumbScroller .content').each(function () {
                    totalContent+=$(this).innerWidth();
                    $('#thumbScroller .container').css('width',totalContent);
                });
                $('#thumbScroller').mousemove(function(e){
                    if($('#thumbScroller  .container').width()>sliderWidth){
                        var mouseCoords=(e.pageX - this.offsetLeft);
                        var mousePercentX=mouseCoords/sliderWidth;
                        var destX=-(((totalContent-(sliderWidth))-sliderWidth)*(mousePercentX));
                        var thePosA=mouseCoords-destX;
                        var thePosB=destX-mouseCoords;
                        var animSpeed=600; //ease amount
                        var easeType='easeOutCirc';
                        if(mouseCoords==destX){
                            $('#thumbScroller .container').stop();
                        }
                        else if(mouseCoords>destX){
                            //$('#thumbScroller .container').css('left',-thePosA); //without easing
                            $('#thumbScroller .container').stop().animate({left: -thePosA}, animSpeed,easeType); //with easing
                        }
                        else if(mouseCoords<destX){
                            //$('#thumbScroller .container').css('left',thePosB); //without easing
                            $('#thumbScroller .container').stop().animate({left: thePosB}, animSpeed,easeType); //with easing
                        }
                    }
                });
                $('#thumbScroller  .thumb').each(function () {
                    $(this).fadeTo(fadeSpeed, 0.6);
                });
                var fadeSpeed=200;
                $('#thumbScroller .thumb').hover(
                function(){ //mouse over
                    $(this).fadeTo(fadeSpeed, 1);
                },
                function(){ //mouse out
                    $(this).fadeTo(fadeSpeed, 0.6);
                }
            );
            });
            $(window).resize(function() {
                //$('#thumbScroller .container').css('left',sliderLeft); //without easing
                $('#thumbScroller .container').stop().animate({left: sliderLeft}, 400,'easeOutCirc'); //with easing
                $('#thumbScroller').css('width',$(window).width()-padding);
                sliderWidth=$(window).width()-padding;
            });
        </script>

        <!-- The JavaScript -->
        <script type="text/javascript">
            $(function() {
                //current thumb's index being viewed
                var current            = -1;
                //cache some elements
                var $btn_thumbs = $('#fp_thumbtoggle');
                var $loader        = $('#fp_loading');
                var $btn_next        = $('#fp_next');
                var $btn_prev        = $('#fp_prev');
                var $thumbScroller    = $('#thumbScroller');
               
                //total number of thumbs
                var nmb_thumbs        = $thumbScroller.find('.content').length;
               
                //preload thumbs
                var cnt_thumbs         = 0;
                for(var i=0;i<nmb_thumbs;++i){
                    var $thumb = $thumbScroller.find('.content:nth-child('+parseInt(i+1)+')');
                    $('<img/>').load(function(){
                        ++cnt_thumbs;
                        if(cnt_thumbs == nmb_thumbs)
                //display the thumbs on the bottom of the page
                showThumbs(2000);
                    }).attr('src',$thumb.find('img').attr('src'));
                }
               
               
                //make the document scrollable
                //when the the mouse is moved up/down
                //the user will be able to see the full image
                makeScrollable();
               
                //clicking on a thumb...
                $thumbScroller.find('.content').bind('click',function(e){
                    var $content= $(this);
                    var $elem     = $content.find('img');
                    //keep track of the current clicked thumb
                    //it will be used for the navigation arrows
                    current     = $content.index()+1;
                    //get the positions of the clicked thumb
                    var pos_left     = $elem.offset().left;
                    var pos_top     = $elem.offset().top;
                    //clone the thumb and place
                    //the clone on the top of it
                    var $clone     = $elem.clone()
                    .addClass('clone')
                    .css({
                        'position':'fixed',
                        'left': pos_left + 'px',
                        'top': pos_top + 'px'
                    }).insertAfter($('BODY'));
                   
                    var windowW = $(window).width();
                    var windowH = $(window).height();
                   
                    //animate the clone to the center of the page
                    $clone.stop()
                    .animate({
                        'left': windowW/2 + 'px',
                        'top': windowH/2 + 'px',
                        'margin-left' :-$clone.width()/2 -5 + 'px',
                        'margin-top': -$clone.height()/2 -5 + 'px'
                    },500,
                    function(){
                        var $theClone     = $(this);
                        var ratio        = $clone.width()/120;
                        var final_w        = 400*ratio;
                       
                        $loader.show();
                       
                        //expand the clone when large image is loaded
                        $('<img class="fp_preview"/>').load(function(){
                            var $newimg         = $(this);
                            var $currImage     = $('#fp_gallery').children('img:first');
                            $newimg.insertBefore($currImage);
                            $loader.hide();
                            //expand clone
                            $theClone.animate({
                                'opacity'        : 0,
                                'top'            : windowH/2 + 'px',
                                'left'            : windowW/2 + 'px',
                                'margin-top'    : '-200px',
                                'margin-left'    : -final_w/2 + 'px',
                                'width'            : final_w + 'px',
                                'height'        : '400px'
                            },1000,function(){$(this).remove();});
                            //now we have two large images on the page
                            //fadeOut the old one so that the new one gets shown
                            $currImage.fadeOut(2000,function(){
                                $(this).remove();
                            });
                            //show the navigation arrows
                            showNav();
                        }).attr('src',$elem.attr('alt'));
                    });
                    //hide the thumbs container
                    hideThumbs();
                    e.preventDefault();
                });
               
                //clicking on the "show thumbs"
                //displays the thumbs container and hides
                //the navigation arrows
                $btn_thumbs.bind('click',function(){
                    showThumbs(500);
                    hideNav();
                });
               
                function hideThumbs(){
                    $('#outer_container').stop().animate({'bottom':'-160px'},500);
                    showThumbsBtn();
                }

                function showThumbs(speed){
                    $('#outer_container').stop().animate({'bottom':'0px'},speed);
                    hideThumbsBtn();
                }
               
                function hideThumbsBtn(){
                    $btn_thumbs.stop().animate({'bottom':'-50px'},500);
                }

                function showThumbsBtn(){
                    $btn_thumbs.stop().animate({'bottom':'0px'},500);
                }

                function hideNav(){
                    $btn_next.stop().animate({'right':'-50px'},500);
                    $btn_prev.stop().animate({'left':'-50px'},500);
                }

                function showNav(){
                    $btn_next.stop().animate({'right':'0px'},500);
                    $btn_prev.stop().animate({'left':'0px'},500);
                }

                //events for navigating through the set of images
                $btn_next.bind('click',showNext);
                $btn_prev.bind('click',showPrev);
               
                //the aim is to load the new image,
                //place it before the old one and fadeOut the old one
                //we use the current variable to keep track which
                //image comes next / before
                function showNext(){
                    ++current;
                    var $e_next    = $thumbScroller.find('.content:nth-child('+current+')');
                    if($e_next.length == 0){
                        current = 1;
                        $e_next    = $thumbScroller.find('.content:nth-child('+current+')');
                    }
                    $loader.show();
                    $('<img class="fp_preview"/>').load(function(){
                        var $newimg         = $(this);
                        var $currImage         = $('#fp_gallery').children('img:first');
                        $newimg.insertBefore($currImage);
                        $loader.hide();
                        $currImage.fadeOut(2000,function(){$(this).remove();});
                    }).attr('src',$e_next.find('img').attr('alt'));
                }
               
                function showPrev(){
                    --current;
                    var $e_next    = $thumbScroller.find('.content:nth-child('+current+')');
                    if($e_next.length == 0){
                        current = nmb_thumbs;
                        $e_next    = $thumbScroller.find('.content:nth-child('+current+')');
                    }
                    $loader.show();
                    $('<img class="fp_preview"/>').load(function(){
                        var $newimg         = $(this);
                        var $currImage         = $('#fp_gallery').children('img:first');
                        $newimg.insertBefore($currImage);
                        $loader.hide();
                        $currImage.fadeOut(2000,function(){$(this).remove();});
                    }).attr('src',$e_next.find('img').attr('alt'));
                }
               
                function makeScrollable(){
                    $(document).bind('mousemove',function(e){
                        var top = (e.pageY - $(document).scrollTop()/2) ;
                        $(document).scrollTop(top);
                    });
                }
            });
        </script>

HTML::

<div id="fp_gallery" class="fp_gallery">
<img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/1.jpg" alt="" class="fp_preview" style="display:none;"/>
            <div class="fp_overlay"></div>
            <div id="fp_loading" class="fp_loading"></div>
            <div id="fp_next" class="fp_next"></div>
            <div id="fp_prev" class="fp_prev"></div>
            <div id="outer_container">
                <div id="thumbScroller">
                    <div class="container">
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/1.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/1.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/2.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/2.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/3.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/3.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/4.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/4.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/5.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/5.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/6.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/6.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/7.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/7.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/8.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/8.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/9.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/9.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/10.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/10.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/11.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/11.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/12.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/12.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/13.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/13.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/14.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/14.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/15.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/15.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/16.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/16.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/17.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/17.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/18.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/18.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/19.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/19.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/20.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/20.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/21.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/21.jpg" class="thumb" /></a></div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="fp_thumbtoggle" class="fp_thumbtoggle">View Thumbs</div>
        </div>
        <div>

        </div>

In this little experiment we created an interactive photo desk that provides some “realistic” interaction possibilities for the user. The idea is to have some photos on a surface that can be dragged and dropped, stacked and deleted, each action resembling the real world act.

For example, if we drag a picture, it get’s “picked up” first, making it appear a little bit bigger, since it would be closer to us. Dropping it results in the picture being “thrown back” to the table, in a random rotation. Viewing all photos mirrors the action of collecting all images into a pile and viewing the first one in a none rotated way. Clicking to see the next one then, makes the previous one being thrown back to the surface. Deleting an image will make it appear as a crumpled paper ball.
When using the shuffle function, the photos get rotated and spread over the desk randomly.

You can download the source code of this and experiment with it, there are many more possibilities to discover and integrate.

We are using two important jQuery plugins: 2D Transform for animating rotations and Shadow Animation for animating the box shadow.

The images are taken from the amazing photostream of tibchris on Flickr.
The rotation did not work well with IE (although in principle it should) so we don’t rotate when IE is used.

We hope you enjoy this little experiment!!

CSS::

#gallerybox {width:700px;height:500px;margin:0 auto;position:relative;border:1px solid #fff;box-shadow:0px 0px 5px #eee;-moz-box-shadow:0px 0px 5px #eee;-webkit-box-shadow:0px 0px 5px #eee;}
a.pd_next_photo,
a.pd_loading{z-index:999999;cursor:pointer;border:1px solid #aaa;width:50px;height:50px;position:absolute;top:50%;left:50%;opacity:0.8;margin:-25px 0px 0px -25px;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;}
a.pd_loading{display:none;background:#f6f6f6 url(http://tympanus.net/Development/PhotoDesk/images/loading.gif) no-repeat 50% 50%;}
a.pd_next_photo{background:#B8B8B8 url(http://tympanus.net/Development/PhotoDesk/images/next.png) no-repeat 50% 50%;}
a.pd_next_photo:hover,
a.pd_loading:hover{opacity:1.0;}
.pd_options_bar a.viewall,
.pd_options_bar a.shuffle,
.pd_options_bar a.backdesk
{outline:none;padding:0px 15px 0px 50px;line-height:47px;text-decoration:none;font-size:24px;color:#333;text-shadow:1px 1px 1px #f0f0f0;height:50px;float:right;margin:5px 10px 0px 0px;-moz-box-shadow:1px 1px 2px #666;-webkit-box-shadow:1px 1px 2px #666;box-shadow:1px 1px 2px #666;opacity:0.8;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;}
.pd_options_bar a.viewall{background:#f6f6f6 url(http://tympanus.net/Development/PhotoDesk/images/viewall.png) no-repeat 10px 50%;}
.pd_options_bar a.shuffle{background:#f6f6f6 url(http://tympanus.net/Development/PhotoDesk/images/shuffle.png) no-repeat 10px 50%;}
.pd_options_bar a.backdesk{background:#f6f6f6 url(http://tympanus.net/Development/PhotoDesk/images/backdesk.png) no-repeat 10px 50%;}
.pd_options_bar a.viewall:hover,
.pd_options_bar a.shuffle:hover,
.pd_options_bar a.backdesk:hover
{opacity:1.0;text-shadow:1px 1px 1px #fff;-moz-box-shadow:1px 1px 2px #fff;-webkit-box-shadow:1px 1px 2px #fff;box-shadow:1px 1px 2px #fff;}
.pd_container{position:absolute;top:30px;bottom:30px;right:30px;left:30px;}
.pd_photo{position:absolute;z-index:10;border:7px solid #f6f6f6;border-bottom:28px solid #f6f6f6;width:180px;height:180px;top:0px;left:0px;display:none;-moz-box-shadow:1px 1px 5px #555;-webkit-box-shadow:1px 1px 5px #555;box-shadow:1px 1px 5px #555;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
.pd_photo img, #gallerybox img{width:180px;height:180px;}
.pd_photo span.delete{position:absolute;width:16px;height:16px;right:-16px;top:2px;cursor:pointer;background:#fff url(http://tympanus.net/Development/PhotoDesk/images/close.png) no-repeat center center;-moz-border-radius:0px 8px 8px 0px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px;border-top-right-radius:8px;border-bottom-right-radius:8px;-moz-box-shadow:1px 1px 5px #555;-webkit-box-shadow:1px 1px 5px #555;box-shadow:1px 1px 5px #555;}
.pd_paperball{background:transparent url(http://tympanus.net/Development/PhotoDesk/images/paperball.png) no-repeat center center;
position:absolute;}

SCRIPT::

<!-- The JavaScript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>

<script src="http://tympanus.net/Development/PhotoDesk/jquery.transform-0.6.2.min.js"></script>
<script src="http://tympanus.net/Development/PhotoDesk/jquery.animate-shadow-min.js"></script>

<script type="text/javascript">
$(function(){var idx,idxLarge=-1;var mouseup=false;var photoW=184;var photoH=205;var $container=$('#pd_container');var $options=$('#pd_options_bar');var photosSize=$container.find('.pd_photo').length;var navPage=0;var ie=false;if($.browser.msie){ie=true}start();function start(){$('#pd_loading').show();var tableW=$container.width();var tableH=$container.height();var horizontalMax=tableW-photoW;var verticalMax=tableH-photoH;$('<img />').attr('src','images/paperball.png');var cntPhotos=0;$container.find('.pd_photo').each(function(i){var $photo=$(this);$('<img />').load(function(){++cntPhotos;var $image=$(this);var r=Math.floor(Math.random()*201)-100;var maxzidx=parseInt(findHighestZIndex())+1;var param={'top':Math.floor(Math.random()*verticalMax)+'px','left':Math.floor(Math.random()*horizontalMax)+'px','z-index':maxzidx};$photo.css(param);if(!ie)$photo.transform({'rotate':r+'deg'});$photo.show();if(cntPhotos==photosSize){bindEvents();$('#pd_loading').hide()}}).attr('src',$photo.find('img').attr('src'))})}function mouseDown($photo){mouseup=true;idx=$photo.index()+1;var maxzidx=parseInt(findHighestZIndex())+1;$photo.css('z-index',maxzidx);if(ie)var param={'width':'+=40px','height':'+=40px'};else var param={'width':'+=40px','height':'+=40px','rotate':'0deg','shadow':'5px 5px 15px #222'};$photo.stop(true,true).animate(param,100).find('img').stop(true,true).animate({'width':'+=40px','height':'+=40px'},100)}$(document).bind('mouseup',function(e){if(mouseup){mouseup=false;var $photo=$container.find('.pd_photo:nth-child('+idx+')');var r=Math.floor(Math.random()*101)-50;var $photoT=parseFloat($photo.css('top'),10);var $photoL=parseFloat($photo.css('left'),10);var newTop=$photoT+r;var newLeft=$photoL+r;if(ie)var param={'width':'-=40px','height':'-=40px','top':newTop+'px','left':newLeft+'px'};else var param={'width':'-=40px','height':'-=40px','top':newTop+'px','left':newLeft+'px','rotate':r+'deg','shadow':'0 0 5px #000'};$photo.stop(true,true).animate(param,200).find('img').stop(true,true).animate({'width':'-=40px','height':'-=40px'},200)}e.preventDefault()});$container.find('.delete').bind('click',function(){var $photo=$(this).parent();var $photoT=parseFloat($photo.css('top'),10);var $photoL=parseFloat($photo.css('left'),10);var $photoZIndex=$photo.css('z-index');var $trash=$('<div />',{'className':'pd_paperball','style':'top:'+parseInt($photoT+photoH/2)+'px;left:'+parseInt($photoL+photoW/2)+'px;width:0px;height:0px;z-index:'+$photoZIndex}).appendTo($container);$trash.animate({'width':photoW+'px','height':photoH+'px','top':$photoT+'px','left':$photoL+'px'},100,function(){var $this=$(this);setTimeout(function(){$this.remove()},800)});$photo.animate({'width':'0px','height':'0px','top':$photoT+photoH/2+'px','left':$photoL+photoW/2+'px'},200,function(){--photosSize;$(this).remove()})});function stack(){navPage=0;var cnt_photos=0;var windowsW=$(window).width();var windowsH=$(window).height();$container.find('.pd_photo').each(function(i){var $photo=$(this);$photo.css('z-index',parseInt(findHighestZIndex())+1000+i).stop(true).animate({'top':parseInt((windowsH-100)/2-photoH/2)+'px','left':parseInt((windowsW-100)/2-photoW/2)+'px'},800,function(){$options.find('.backdesk').show();var $photo=$(this);$photo.unbind('mousemove');++cnt_photos;var $nav=$('<a class="pd_next_photo" style="display:none;"></a>');$nav.bind('click',function(){$(this).remove();navigate()});$photo.prepend($nav);$photo.draggable('destroy').find('.delete').hide().andSelf().find('.pd_hold').unbind('mousedown').bind('mousedown',function(){return false});$options.find('.shuffle,.viewall').unbind('click');if(cnt_photos==photosSize)enlarge(findElementHighestZIndex())})})}function enlarge($photo){var windowsW=$(window).width();var windowsH=$(window).height();if(ie)var param={'width':'+=200px','height':'+=200px','top':parseInt((windowsH-100)/2-(photoH+200)/2)+'px','left':parseInt((windowsW-100)/2-(photoW+200)/2)+'px'};else var param={'width':'+=200px','height':'+=200px','top':parseInt((windowsH-100)/2-(photoH+200)/2)+'px','left':parseInt((windowsW-100)/2-(photoW+200)/2)+'px','rotate':'0deg','shadow':'5px 5px 15px #222'};$photo.animate(param,500,function(){idxLarge=$(this).index();var $photo=$(this);$photo.unbind('mousemove').bind('mousemove',function(){$(this).find('.pd_next_photo').show()}).unbind('mouseleave').bind('mouseleave',function(){$(this).find('.pd_next_photo').hide()})}).find('img').animate({'width':'+=200px','height':'+=200px'},500)}function disperse(){var windowsW=$(window).width();var windowsH=$(window).height();$container.find('.pd_photo').each(function(i){var $photo=$(this);if($photo.index()==idxLarge){if(ie)var param={'top':parseInt((windowsH-100)/2-photoH/2)+'px','left':parseInt((windowsW-100)/2-photoW/2)+'px','width':'170px','height':'170px'};else var param={'top':parseInt((windowsH-100)/2-photoH/2)+'px','left':parseInt((windowsW-100)/2-photoW/2)+'px','width':'170px','height':'170px','shadow':'1px 1px 5px #555'};$photo.stop(true).animate(param,500,function(){shuffle();$options.find('.viewall').show()}).find('img').animate({'width':'170px','height':'170px'},500)}});$container.find('.pd_next_photo').remove();bindEvents()}function bindEvents(){$options.find('.shuffle').unbind('click').bind('click',function(e){if(photosSize==0)return;shuffle();e.preventDefault()}).andSelf().find('.viewall').unbind('click').bind('click',function(e){var $this=$(this);if(photosSize==0)return;stack();$this.hide();e.preventDefault()}).andSelf().find('.backdesk').unbind('click').bind('click',function(e){var $this=$(this);if(photosSize==0)return;disperse();$this.hide();e.preventDefault()});$container.find('.pd_photo').each(function(i){var $photo=$(this);$photo.draggable({containment:'#pd_container'}).find('.delete').show()}).find('.pd_hold').unbind('mousedown').bind('mousedown',function(e){var $photo=$(this).parent();mouseDown($photo);e.preventDefault()})}function navigate(){if(photosSize==0)return;var tableW=$container.width();var tableH=$container.height();var horizontalMax=tableW-photoW;var verticalMax=tableH-photoH;var $photo=$container.find('.pd_photo:nth-child('+parseInt(idxLarge+1)+')');var r=Math.floor(Math.random()*201)-100;if(ie)var param={'top':Math.floor(Math.random()*verticalMax)+'px','left':Math.floor(Math.random()*horizontalMax)+'px','width':'170px','height':'170px'};else var param={'top':Math.floor(Math.random()*verticalMax)+'px','left':Math.floor(Math.random()*horizontalMax)+'px','width':'170px','height':'170px','rotate':r+'deg','shadow':'1px 1px 5px #555'};$photo.stop(true).animate(param,500,function(){++navPage;var $photo=$(this);$container.append($photo.css('z-index',1));if(navPage<photosSize)enlarge(findElementHighestZIndex());else{$options.find('.backdesk').hide();$options.find('.viewall').show();bindEvents()}}).find('img').animate({'width':'170px','height':'170px'},500)}function shuffle(){var tableW=$container.width();var tableH=$container.height();var horizontalMax=tableW-photoW;var verticalMax=tableH-photoH;$container.find('.pd_photo').each(function(i){var $photo=$(this);var r=Math.floor(Math.random()*301)-100;if(ie)var param={'top':Math.floor(Math.random()*verticalMax)+'px','left':Math.floor(Math.random()*horizontalMax)+'px'};else var param={'top':Math.floor(Math.random()*verticalMax)+'px','left':Math.floor(Math.random()*horizontalMax)+'px','rotate':r+'deg'};$photo.animate(param,800)})}function findHighestZIndex(){var photos=$container.find('.pd_photo');var highest=0;photos.each(function(){var $photo=$(this);var zindex=$photo.css('z-index');if(parseInt(zindex)>highest){highest=zindex}});return highest}function findElementHighestZIndex(){var photos=$container.find('.pd_photo');var highest=0;var $elem;photos.each(function(){var $photo=$(this);var zindex=$photo.css('z-index');if(parseInt(zindex)>highest){highest=zindex;$elem=$photo}});return $elem}Array.prototype.remove=function(from,to){var rest=this.slice((to||from)+1||this.length);this.length=from<0?this.length+from:from;return this.push.apply(this,rest)}});
</script>

HTML::

<div id='gallerybox'>
<div><a id="pd_loading" href="#" class="pd_loading"></a></div>
<div id="pd_options_bar" class="pd_options_bar">
<a href="" class="shuffle">Shuffle</a>
<a href="" class="backdesk" style="display:none;">Back to Desk</a>
<a href="" class="viewall">View All</a>
</div>
<div id="pd_container" class="pd_container">

<div class="pd_photo">
<div class="pd_hold">
<img src="http://favim.com/orig/201105/17/baby-baby-girl-beautiful-child-cute-girl-Favim.com-48227.jpg" alt=""/>
</div>
<span class="delete"></span>
</div>

<div class="pd_photo">
<div class="pd_hold">
<img src="http://data.whicdn.com/images/35398355/face-cute-girl-nina-dobrev-hair-look-photos_large.jpg" alt=""/>
</div>
<span class="delete"></span>
</div>

<div class="pd_photo">
<div class="pd_hold">
<img src="http://s2.favim.com/orig/35/asian-asian-girl-cute-free-girl-Favim.com-281584.jpg" alt=""/>
</div>
<span class="delete"></span>
</div>

<div class="pd_photo">
<div class="pd_hold">
<img src="http://parttimebkk2556.files.wordpress.com/2012/12/cute-korean-girls02.jpg" alt=""/>
</div>
<span class="delete"></span>
</div>

<div class="pd_photo">
<div class="pd_hold">
<img src="http://25.media.tumblr.com/tumblr_m41qspMUvL1rphuipo4_1280.jpg" alt=""/>
</div>
<span class="delete"></span>
</div>

<div class="pd_photo">
<div class="pd_hold">
<img src="http://happy.ap.teacup.com/yukarisuketetu/timg/middle_1338987463.jpg" alt=""/>
</div>
<span class="delete"></span>
</div>

<div class="pd_photo">
<div class="pd_hold">
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1zaS3Xb4rXXXI.Zo9_102633.jpg" alt=""/>
</div>
<span class="delete"></span>
</div>

</div>
</div>

Example Interactive Gallery Photo Desk With jQuery & CSS3.!