Responsive Photo Grid Plugin with jQuery - Sortable Photos

File Size: 14 KB
Views Total: 12863
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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="//"></script> 
<script src="//"></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>

4. Initialize the photo grid plugin.

  selector: '> .photo-grid-item'

5. More options to customize the photo grid.

  // 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.