Mockup

Make sure your designs are pixel perfect.

Description

We sweat the details. This plugin allows you to overlay your design comps over your actual website while you develop to ensure they visually perfect.

How To Use

  • T Key: Resize browser window to fit mockup (broken in Chrome & untested)
  • Space: Toggle visibility of Mockup
  • Up Arrow: Increase mockup Opacity
  • Down Arrow: Decrease mockup Opacity
  • Right Arrow: Next mockup
  • Left Arrow: Previous mockup
  • Mouse Drag: Drag the image around to tweak positioning

Options

  • opacity: Set the initial opacity of the mockup, default 0.5
  • valign: Set the initial position of the mockup. Options are "top", "center", "bottom". default "center"
  • halign: Set the initial position of the mockup. Options are "left", "center", "right". default "center"
  • width: Set the width of the mockup, height adjusts accordingly, default is 1200
  • offsetX: Add a vertical pixel offset to the mockup position, default is 0
  • offsetY: Add a horizontal pixel offset to the mockup position, default is 0
  • visible: Set the initial visibility of the mockup, default is true

Further Developments

  • Move the entire thing into Javascript, no more markup needed
  • Better demo please

HTML

<div id="mockup">
	<img src="image1.png" >
	<img src="image2.png" >
	...
</div>

JAVASCRIPT

$('#mockup').mockup({width:960});