jQuery UI Selectable Demo

Selectable Images Demo Part 1


Here is a quick example of how to create a selectable set of images. Please note this demo is only suitable for desktop browsers and is not a good solution for mobile devices. I will follow up this post with a better example that will work on both desktop and mobile browsers.


See the Pen jQuery UI Selectable Demo with Images by Mark Taylor (@codesnips) on CodePen.0



<h1>Jquery UI Selectable Demo with Images</h1>
<p>Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections. </p>

<div id="selectable">
  <img src="http://dummyimage.com/190x190/2c488f/ffffff&text=Image+1" class="ui-widget-content" />
  <img src="http://dummyimage.com/190x190/522F93/ffffff&text=Image+2" class="ui-widget-content" />
  <img src="http://dummyimage.com/190x190/882F93/ffffff&text=Image+3" class="ui-widget-content" />
  <img src="http://dummyimage.com/190x190/932F64/ffffff&text=Image+4" class="ui-widget-content" />
  <img src="http://dummyimage.com/190x190/6D932F/ffffff&text=Image+5" class="ui-widget-content" />
  <img src="http://dummyimage.com/190x190/2F9379/ffffff&text=Image+6" class="ui-widget-content" />
  <img src="http://dummyimage.com/190x190/2F7993/ffffff&text=Image+7" class="ui-widget-content" />

<p class="selected-items">You have selected the following images: <span id="selected-item-list"></span></p>


#selectable .ui-selecting {
  border: 2px dashed #ff0000;

#selectable .ui-selected {
  border: 2px solid #ff0000;
  -webkit-box-shadow: 0px 0px 8px 0px rgba(255, 0, 0, 1);
  -moz-box-shadow: 0px 0px 8px 0px rgba(255, 0, 0, 1);
  box-shadow: 0px 0px 8px 0px rgba(255, 0, 0, 1);

#selectable img {
  margin: 5px;
  padding: 5px;
  border: 2px solid #ffffff;
.selected-items {
  border: 2px solid #ff0000;
  line-height: 32px;


$(function() {
    selected: function() {
      var selectedItemList = $("#selected-item-list").empty();
      $(".ui-selected", this).each(function() {
        var index = $("#selectable img").index(this);
        selectedItemList.append((index + 1) + ", ");

Published by

Mark Taylor

Web developer, based in Bourne, Lincolnshire, UK. builder of web applications, ASP.NET, Web Standards HTML, CSS & JavaScript. SQL Server & MySQL DB developer.

One thought on “Selectable Images Demo Part 1”

Leave a Reply

Your email address will not be published. Required fields are marked *