jQuery Sortable Photos

jQuery Sortable Photos is a jQuery UI plugin that can display photos in a responsive, sortable grid.

The photo grid is arranged in such a way that the height of the images in each row is consistent, and the images are resized to fill in the full width. The grid can optionally be configured to allow drag-and-drop sorting.

Try the demo: http://glekli.github.io/jQuery-Sortable-Photos/

Requirements

• jQuery 1.4+
• jQuery UI 1.8+ (ui.core, ui.widget, ui.draggable, ui.droppable)

Installation

• Install using Bower OR download the latest release.

bower install jquery-sortable-photos

• Include the javascript file on pages where needed. Be sure to include it after jQuery and jQuery UI.

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

Usage

Render your images in HTML. The images need to be inside a container, as follows:

<div class="my-container">
  <div class="my-item"><img src="image1.jpg"></div>
  <div class="my-item"><img src="image2.jpg"></div>
  ...
</div>

Initialize the plugin on the container:

$('.my-container').sortablePhotos({
  selector: '> .my-item',
  sortable: true,
  padding: 2
});

Options

selector:

The CSS selector that identifies the individual image elements inside the container.

Default: '> *' (meaning all immediate children of the container)

sortable:

If true, the images will be sortable using drag and drop. If you enable sorting, you will need to also specify an afterDrop callback, and save or process the new order in that callback as appropriate.

Default: true

padding:

The amount of padding in between the images in pixels.

Default: 2

afterDrop:

A callback function that gets called after the user has dropped an image to a new position. You can use this callback to process the new order of images.

The function receives two arguments: event is a jQuery event object, and element is a jQuery object containing the element on which the plugin has been initialized.

Default: undefined

Example:

$('.my-container').sortablePhotos({
  selector: '> .my-item',
  sortable: true,
  afterDrop: function (event, element) {
    // Save new order.
  }
});

beforeArrange:

A callback function that gets called before the images are arranged. You can use this to modify the content before the plugin processes it if needed.

The function receives two arguments: event is a jQuery event object, and element is a jQuery object containing the element on which the plugin has been initialized.

Default: undefined

Example:

$('.my-container').sortablePhotos({
  selector: '> .my-item',
  sortable: true,
  beforeArrange: function (event, element) {
    // Modify content.
  }
});

Notes

The arranging algorithm relies on the images' actual sizes. If these are not available when the plugin is first initialized, the grid will be constantly rearranged as images load. This may result in flickering. To prevent this, specify the width and height attributes on the <img> elements. In addition, applying max-width: 100% to the images may preclude the ability to determine exact image sizes and thus interfere with the grid arrangement.