Draggable & Scattered jQuery Image Gallery Plugin – photopile-js

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:

• Highly customizable and easy to use.
• Draggable thumbnails.
• Inbuilt popup/lightbox.
• Auto positioning of thumbnails.
• Random thumbnail rotation.

Dependency

• jquery-ui.min.js
• jquery.ui.touch-punch.min.js

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: