jQuery UI Selectable Demo

Selectable Images Demo Part 1

Introduction

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.

Demo

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

Code

HTML

<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" />
</div>

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

CSS

#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;
}

JavaScript

$(function() {
  $("#selectable").selectable({
    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 *