Selectable Images Demo Part 2 (Mobile Friendly)

In part 1 of this post, I demonstrated a very simply way to make objects selectable using the jQuery UI Selectable module. Unfortunately, jQuery UI has limited support for touch events so this could make your application unusable on a mobile device.

All is not lost however, as we can make use of a fantastic, tiny plugin called “jQuery UI Touch Punch” that is maintained by David Furfero at the following URL http://touchpunch.furf.com/.

To implement touch events you simply download the minified (production) version of the plugin and reference it in your html document.

Demo

See the Pen jQuery UI Selectable Demo with Images and Touch Support 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 or drag your finger across the images 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
Include the following scripts in your document.

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>

Now include your version of the script to initiate the selectable plugin and handle the selections, I have included a simple example below.

$(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) + ", ");
      });
    }
  });
});

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) + ", ");
      });
    }
  });
});

jQuery Basics Part 3

To continue this series, we shall list the ways you can filter your select elements:

Basic Filters

$("p:first").css("border", "3px solid red");
$("p:last").css("border", "3px solid red");
$("p:even").css("border", "3px solid red");
$("p:odd").css("border", "3px solid red");
$(".a:first").css("border", "3px solid red");
$(".b:even").css("border", "3px solid red");
$("p:gt(1)").css("border","3px solid red");
$("p:not(p:eq(2))").css("border", "3px solid red");

Attribute Filters

$("p[class]").css("border", "3px solid red");
$("p[id=para1]").css("border", "3px solid red");
$("p[id^=para]").css("border", "3px solid red");
$("p[id^=para][lang*=en-]").css("border", "3px solid red");

Child, Visibility and Content Filters

	
$("p:contains(3)").css("border", "3px solid red");
$("p:parent").css("border", "3px solid red");
$("ul:has(li[class=a])").css("border", "3px solid red");
$("ul li:nth-child(3)").css("border", "3px solid red");
$("ul li:nth-child(2n)").css("border", "3px solid red");

jQuery Basics Part 2

In this post I’m going to look at all the different ways you can target and select DOM elements.

Basic Selectors

$("p").css("border", "3px solid red");
$(".a").css("border", "3px solid red");
$("#list1").css("border", "3px solid red");
$("p.b").css("border", "3px solid red");

Form Selectors

$("form :input").css("border", "3px solid red");
$("form :text").css("border", "3px solid red");
$("form :text:enabled").css("border", "3px solid red");
$("form :checked").css("border", "3px solid red");
$("form :checkbox:checked").css("border", "3px solid red");

jQuery Basics Part 1

JQuery is pretty handy but if you don’t use it often it can pain remembering the basics. In this post I’ll list some very simple starter snippets.

Function declaration
To make sure the DOM has finished loading before your code initialises, you can wrap your code in either of these 2 functions:

$("document").ready(function() { 
   insert code here 
});

Alternatively you can use the short cut version

$(function{ 
   insert code here 
 });

Linking to jQuery
Rather than hosting the jQuery scipts on your own site there are many advantages to using the Google content delivery network:

  • Improved speed, the content delivery network will usually be a lot quicker and more reliable that your hosting provider.
  • Many other websites use the content delivery network alongside the Google services such as Gmail and Google docs so there is a good chance your visitors may already have the jQuery or jQuery UI scripts cached by their browser.
  • Free and easy to use.

To make things even easier, http://scriptsrc.net is a handy site that supplies the script tags to many of the frameworks that are hosted on the Google content delivery network.