Skip to content

Latest commit

 

History

History
76 lines (52 loc) · 2.5 KB

README.md

File metadata and controls

76 lines (52 loc) · 2.5 KB
Raw

website-mobile-preview

Features

  • Currently supports iPhone 6.
  • 3 different perspectives - front, left, and right facing.
  • Choose from the black, white, and gold versions.
  • Easy jQuery-like initialization.
  • Scrollbars modified for webkit to resemble track and thumb of iPhone 6
  • Coded in vanilla Javascript, no library dependencies

Usage

Place the script and images on your server.

Include the script.

<script type="text/javascript" src="biomp.js"></script>

Create a div element, which will contain the preview.

<div id="preview"></div>

Initialize a new bioMp object using the div.

Vanilla JavaScript

bioMp(document.getElementById('preview'));

jQuery

bioMp($('#preview'));

You must include options such as an image and viewing perspective for the preview to show correctly. This is shown in the next section.

Options

All options must be added to the init function as an object.

Name Type Default Description
url string blank URL of the web page to preview.
view string front The perspective of the phone. Possible values are front, left, and right.
image string blank URL of the image to use for the phone. A total of 9 images are included with this script.
scale float 1 Resize the phone preview by a multiplier value. For instance, a value of 1 is full size, while 0.5 would half the size. If this option is set, both width and height options are ignored.
width integer 428 The width of the phone in pixels. If this option is set, the height option is automatically set to proportion. If scale is not set, it will be automatically set to proportion as well.
height integer 889 The height of the phone in pixels. If this option is set, both the scale and width options are ignored and automatically set to proportion.

For example, to create a left facing preview for http://beeker.io on the gold iPhone, you would initiate the preview div in the usage example with these options.

bioMp(document.getElementById('preview'), {
    url: 'http://beeker.io',
    view: 'left',
    image: 'images/iphone6_side_left_gold.png'
});

Credits

Thank you to JustD for the images of the iPhone 6. You can find his work here on Behanced.

License

MIT license, feel free to use however you wish!

Created by beeker.io