Remembering when we actually had physical photos
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.
<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!