Responsive Photo Grid Plugin with jQuery - Sortable Photos

Sortable Photos is a jQuery & jQuery UI plugin for creating a neat, responsive, drag'n'drop sortable photo grid that all the images will be resized and centered according to their containers. Without the need to write any CSS rules.

Dependencies:

• jQuery
• jquery.ui.core.js
• jquery.ui.widget.js
• jquery.ui.draggable.js
• jquery.ui.droppable.js

How to use it:

1. Include the needed jQuery and jQuery UI scripts on the web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 

2. Download the sortable photos plugin and include the JavaScript file jquery-sortable-photos.js after jQuery library.

<script src="jquery-sortable-photos.js"></script> 

3. Add your favorite images with different heights into the photo grid.

<div class="photo-grid-container">
  <div class="photo-grid-item"><img src="1.jpg"></div>
  <div class="photo-grid-item"><img src="2.jpg"></div>
  <div class="photo-grid-item"><img src="3.jpg"></div>
  ...
</div>

4. Initialize the photo grid plugin.

$('.photo-grid-container').sortablePhotos({
  selector: '> .photo-grid-item'
});

5. More options to customize the photo grid.

$('.photo-grid-container').sortablePhotos({
  // CSS selector
  selector: '> *',

  // enable drag and drop sorting
  sortable: true,

  // space bewteen images
  padding: 2
});

---

This awesome jQuery plugin is developed by glekli. For more Advanced Usages, please check the demo page or visit the official website.