DeviceMock.js - Add Device Frames For Any Elements On Webpage

Now a days on the web it is common practice to add device frames for website screenshots to give a feeling that how website looks when opened on that device. It may be browser, desktop, laptop, tablet or mobile screen. If that situation arises for you to create a device mockup, you don’t have to start from scratch designing or you don’t have to be any designer to do that. All you need is a DeviceMock.js library.

Using DeviceMock.js you can easily add device frames for any of the elements (div, img, iframe). It requires jQuery v1.5.0 or higher.

How to use DeviceMock.js in your projects:

<!-- includes -->
<link rel="stylesheet" type="text/css" href="path/to/assets/css/jquery.devicemock.css">
<script src="jquery.js"></script>
<script src="path/to/assets/js/jquery.devicemock.1.0.0.js"></script>

<!-- element -->
<div class="your-selector"><!-- something... --></div>

<!-- script -->
<script type="text/javascript">
   $(".your-selector").deviceMock({
      type : "browser",
      size : "1x",
      address : "https://example123.com",
      imgPath : "path/to/assets/img/" // path of asset images,
      cssPrefix : "df-" // css namespace ( "df-" is default )
   });
</script>

Website: http://rm-labo.com/labo/devicemock/
Github: https://github.com/rm-labo/devicemock

Related posts:

Cookies