Description

The Keystone Image jQuery plugin overlays a semi-transparent wireframe/design image over everything in the web browser viewport. Handy when converting a PSD from a graphic designer into a webpage to ensure pixel perfect layouts.

The keystone image persists in localStorage (one image per domain). No need to re-add the image after closing the tab/browser.

Installation

Add this line to your application's Gemfile:

gem 'keystone_image'

Add this line to your application.html.erb to load up the relevant javascripts:

<% if Rails.env == 'development' %>
  <%= keystone_image %>
<% end %>

The keystone_image view helper takes options to override the default settings listed at the top of jquery.keystone-image.js:

<%= keystone_image 'toogle_overlay_keycode' => 49, 'overlay_opacity' => 0.2 %>

Usage

  • in the webpage, press 'alt/option + 2' to toggle the dropbox - drag and drop any image into it
  • press 'alt/option + 1' to toggle keystone image on/off
  • to move the keystone image, hold alt + one of 3/4/5/6 keys - hold shift to move faster
  • alt + 7 re-centers the keystone image

Limitations

Do not access your webpage via the file:// protocol or you might not be able to drag/drop images due to cross domain issues.

Compatibility

Because of the usage of HTML5 Local Storage, native drag/drop, and File API, only modern browsers are supported. Known working with:

  • jQuery 1.6.2
  • Firefox 6.0
  • Chrome 13.0.782.112
  • Safari 6.0.2 (8536.26.17)
  • IE10

Similar in-browser plugins