Back to post

Photopile-js is a JavaScript/jQuery image gallery plugin that creates a bunch of auto adjustable scattered photos within the specified container area. You can rearrange each of the thumbnail position by dragging of the mouse. Clicks on a thumbnail it will remove from the bunch and opens as a lightbox image and clicking on the empty spaces of the window it will return to the bunch again.

Features:

Dependency

How to use it:

1. Include the Javascript jquery-ui.min.js, jquery.ui.touch-punch.min.js and photopile.js at the bottom of the web page.

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="/path/to/photopile.js"></script>

2. Include the CSS photopile.css in the header of the page.

<link rel="stylesheet" href="/path/to/photopile.css">

3. Add the basic HTML to the page.

<div class="photopile-wrapper">
  <ul class="photopile">
    <li>
      <a href="/path/to/fullsize/demo-1.jpg">
        <img src="/path/to/thumb/demo-1.jpg" alt="" />
      </a>
    </li>
    <li>
      <a href="/path/to/fullsize/demo-2.jpg">
        <img src="/path/to/thumb/demo-2.jpg" alt="" />
      </a>
    </li>
  </ul>
</div>

4. Initialize the plugin and we're ready to go. 

PhotoPile({
  //OPTION: VALUE,
}).scatter()

Plugin's default options:

Name Default Description
numLayers 5 number of layers in the pile (max zindex)
thumbOverlap 50 overlap amount (px)
thumbRotation 45 maximum rotation (deg)
thumbBorderWidth 2 border width (px)
thumbBorderColor 'white' border color
thumbBorderHover '#EAEAEA' border hover color
draggable true enable draggable thumbnails
fadeDuration 200 peed at which photo fades (ms)
pickupDuration 500 speed at which photo is picked up & put down (ms)
photoZIndex 100 z-index (show above all)
photoBorder 10 border width around fullsize image
photoBorderColor 'white' border color
showInfo true include photo description (alt tag) in photo container
autoplayGallery false autoplay the photopile
autoplaySpeed 5000 ms
loading 'images/loading.gif' path to img displayed while gallery/thumbnails loads

Default example

HTML structure

<div class="photopile-wrapper">
<ul class="photopile">
  <li>
    <a href="/path/to/fullsize/demo-1.jpg">
      <img src="/path/to/thumb/demo-1.jpg" alt="" />
    </a>
  </li>
  <li>
    <a href="/path/to/fullsize/demo-2.jpg">
      <img src="/path/to/thumb/demo-2.jpg" alt="" />
    </a>
  </li>
</ul>
</div>

Script

PhotoPile({
  //OPTION: VALUE,
}).scatter()