A Javascript/jQuery photo gallery
Remembering when we actually had physical photos
Photopile JS is a JavaScript/jQuery image gallery that simulates a pile of photos scattered about on a surface. Thumbnail clicks remove photos from the pile, (enlarging them as if being picked up by the user), and once in view a secondary click returns the photo to the pile. Thumbnails are draggable, enhancing the experience by allowing photos buried deep in the pile to be uncovered.
Try out the demo.
Photopile JS is free to use and customize without restriction, but if you are feeling especially generous crediting backlinks are always appreciated.
Download Photopile JS and add photopile.css, photopile.js, loading.gif, and nav-sprites.png to your project. If using a different directory structure, you will need to update the image paths for loading.gif and nav-sprites.png in photopile.js and photopile.css respectively.
Photopile JS is jQuery/jQuery UI dependent, so you'll need to link to both, as well as photopile.js
<body>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<script src="YOUR/PATH/TO/photopile.js"></script>
</body>
Another script you'll probably want to include is jQuery UI Touch Punch. Without it draggable thumbnails won't function properly on touch screens, so get yourself a copy and include it in your project.
Oh, And don't forget to link to photopile.css ...
<head> <link href="PATH/TO/photopile.css" rel="stylesheet"> </head>
Assuming you've already created your thumbnails and images, you are ready to add the photopile markup.
<div class="photopile-wrapper">
<ul class="photopile">
<li>
<a href="PATH/TO/YOUR/FULLSIZE/IMAGE">
<img src="PATH/TO/YOUR/THUMBNAIL/IMAGE" alt="Image description" ... />
</a>
</li>
<!-- Add as many list items as you require for your gallery :) -->
</ul>
</div>
And with that your photopile should be ready to go!